Lightfall

Streaks of light falling like rain across three depth layers, each with a glowing head and fading trail. WebGL.

Lightfall

Open

colorA

colorB

speed1

density12

length0.35

glow1

Installation

npx shadcn@latest add @glint-ui/lightfall

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/lightfall.json

Usage

import { Lightfall } from "@/components/ui/lightfall";

<div className="relative h-96">
  <Lightfall colorA="#67e8f9" colorB="#a78bfa" />
</div>

Props

Prop	Type	Default	Description
colorA	string	"#67e8f9"	First streak color.
colorB	string	"#a78bfa"	Second streak color.
speed	number	1	Fall speed multiplier.
density	number	12	Columns per container height (front layer).
length	number	0.35	Trail length, in container heights.
glow	number	1	Brightness and bloom.
className	string	—	Extra classes for the root element.