Light Rays

Soft rays of light that fan down from the top and sway slowly.

Light Rays

Set the stage for what matters.

Installation#

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

Or pass the full URL: https://ui.balick.me/r/light-rays.json

Usage#

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

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <LightRays />
      <h1 className="relative">Into the light</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`rays` Number of rays.	`number`	9	Number of rays.
`spread` Angle between the outermost rays, in degrees.	`number`	80	Angle between the outermost rays, in degrees.
`duration` Duration of one sway, as a CSS time.	`string`	"14s"	Duration of one sway, as a CSS time.