Light Rays

Animated light rays effect using WebGL shaders.

Beautiful

Light Rays

Installation

pnpm dlx shadcn@latest add @spell/light-rays

import Rays from "@/components/light-rays";

<div className="relative h-[300px] w-full">
  <Rays />
  <div className="relative z-10">Your content here</div>
</div>

Multi Colored

Light Rays

Prop	Type	Default
`intensity`	`number`	`13`
`rays`	`number`	`32`
`reach`	`number`	`16`
`position`	`number`	`50`
`radius`	`string`	`"0px"`
`backgroundColor`	`string`	`"#000"`
`animation`	`{ animate: boolean; speed: number }`	`{ animate: true, speed: 10 }`
`raysColor`	`{ mode: "single"; color: string } \| { mode: "multi"; color1: string; color2: string } \| { mode: "random" }`	`{ mode: "single", color: "#639AFF" }`
`className`	`string`	-
`style`	`CSSProperties`	-