Light Rays Background 🌌

This component creates a mesmerizing light rays background effect, perfect for adding a dynamic and immersive atmosphere to your web applications.

The rays can be customized in terms of origin, color, speed, and more.

Pumki UI

Installation

1import LightRays from '@/components/pumki-ui/backgrounds/bg-light-rays';

1<LightRays />

Prop	Type	Default	Description
`raysOrigin`	`”top-center” \| “top-left” \| “top-right” \| “right” \| “left” \| “bottom-center” \| “bottom-right” \| “bottom-left"`	`"top-center”`	Where the light rays originate from.
`raysColor`	`string`	`”#ffffff”`	Hex color of the rays.
`raysSpeed`	`number`	`1`	Speed of the ray animation.
`lightSpread`	`number`	`1`	How widely the rays spread out.
`rayLength`	`number`	`2`	How far the rays extend.
`pulsating`	`boolean`	`false`	Whether the rays pulsate.
`fadeDistance`	`number`	`1.0`	Fade-out distance factor for the rays.
`saturation`	`number`	`1.0`	Color saturation adjustment (0 = grayscale, 1 = full color).
`followMouse`	`boolean`	`true`	If true, rays will follow the mouse movement.
`mouseInfluence`	`number`	`0.1`	How much the mouse influences ray direction.
`noiseAmount`	`number`	`0.0`	Amount of static/noise overlay on the rays.
`distortion`	`number`	`0.0`	Distortion intensity for ray angles.
`className`	`string`	`""`	Custom Tailwind classes for the wrapper container.