Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

LightRays

Soft overhead shafts overlap in an atmospheric cone and dissolve before reaching the lower surface.

AnimationsBackgrounds@gaudi/design-system/animations/LightRaysView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { LightRays } from '@gaudi/design-system/animations/LightRays';

Usage

import { LightRays } from '@gaudi/design-system/animations/LightRays';
<LightRays height={360} paused />

Examples

Playground

Storybook

API

10 props

Accessibility

The canvas is decorative and hidden from assistive technology; children remain accessible. Reduced motion shows a still frame, and unavailable graphics use a static color fallback. Provide a visible pause control when motion continues beside meaningful content. Keep text contrast independent of the moving artwork.

Notes

  • The playground layers a Gaudi header, hero and working documentation links above the effect. The Demo content switch hides only this foreground; canvas size, animation phase and pause state are retained.
  • Pointer movement subtly steers the light direction. The source remains overhead, and the response relaxes on leave.
  • Visual idea inspired by Light Rays from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits code or assets are included.
PointerA pointer effect scoped to its container, with direct, spring and lazy tracking, hover feedback, and native input fallbacks.AeroShardsFaceted shards flow through a curved stream in layers of depth. Hold the pointer to gather the stream, then release to unfurl it.AuroraTheme-aware Aurora light curtains, with a Soft Aurora variant that forms a narrow glowing ribbon.CRTWarpCoarse phosphor cells form evolving plasma shapes beneath fine scanlines, analog grain, and local pointer distortion.DarkVeilBroad illuminated folds drift across a dark surface, with sharp creases and deep intervening shadows.DitherFlowing waves rendered with ordered dithering and a limited tonal palette.