Light Rays

Installation

showLineNumbers

import { LightRays } from "@/components/ui/light-rays"

showLineNumbers

<div className="relative h-96 w-full">
  <LightRays count={7} color="rgba(160, 210, 255, 0.2)" />
</div>

Prop	Type	Default	Description
`count`	`number`	`7`	The number of light rays to render.
`color`	`string`	`rgba(160, 210, 255, 0.2)`	The color of the light rays (CSS color value).
`blur`	`number`	`36`	The blur amount in pixels.
`speed`	`number`	`14`	The animation speed (cycle duration in seconds).
`length`	`string`	`70vh`	The length of the rays (CSS length value).
`className`	`string`	`-`	Additional class names for the container.
`ref`	`React.Ref<HTMLDivElement>`	`-`	Ref for the container element.
…rest	`React.HTMLAttributes<HTMLDivElement>`	`-`	All standard div HTML attributes are supported.