Volumetric god-rays that slowly sweep and breathe, with optional film grain. Pure CSS.

A soft fan of volumetric light rays beams down from above, slowly sweeping and breathing in intensity, finished with a layer of film grain. Cinematic and warm — the spotlight-from-the-heavens hero. Pure CSS. Drop it as the first child of a relative overflow-hidden container.

Playground

Step into the light

God-rays that gently breathe.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/light-rays.json"

Usage

tsx

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

<div className="relative overflow-hidden">
  <LightRays />
  <YourContent />
</div>

The layer is absolute inset-0 z-base; parent must be relative overflow-hidden, content at z-raised+. Color defaults to --color-primary. The sweep stops under prefers-reduced-motion; the static fan remains.

Examples

Warm

Props

Prop	Type	Default	Description
`rayCount`	`number`	`14`	Number of rays in the fan.
`color`	`string`	`--color-primary`	Ray color.
`speed`	`number`	`1`	Sweep speed multiplier.
`angle`	`number`	`0`	Base angle (deg) the fan points from.
`intensity`	`number`	`0.6`	Overall ray opacity, `0`–`1`.
`grain`	`number`	`0.05`	Film-grain amount, `0`–`1` (`0` disables it).

Also accepts standard div attributes (e.g. className, style).

Light Rays