Vibe UI
Initializing Vibe UI System...

Lightfall

A hardware-accelerated WebGL animated falling light streak background component rendering beautiful aurora flows, code rain streams, and warm golden embers. Highly responsive to resizing, frame loop throttled when out of viewport or blurred, and interactive to pointer movements.

Preview

Vibe UI

Sandbox

Demo Content
Canvas BG
#080515
Color 1
#A6C8FF
Color 2
#5227FF
Color 3
#FF9FFC
Speed
0.40
Streaks
3
Width
1.5
Length
1.2
Density
0.50
Glow
1.2
Twinkle
1.0
Zoom
3.5
Bg Glow
0.6

Installation

Installation

pnpm dlx vibe-ui-kit@latest add lightfall

Presets

Cosmic Aurora

✨ Aurora Fall

Cosmic Aurora

Procedural particles flowing down the screen in high performance WebGL. Interacts dynamically with mouse movements.

Neon Cyberpunk

⚡ Cyber Fall

Neon Cyberpunk

Energetic falling lights mimicking code rain inside a virtual matrix environment. Fast speeds and highly reactive.

Golden Embers

🌅 Warm Sunset

Golden Embers

Warm embers cascading down slowly to create a relaxed, cozy fireplace glow. Ideal for tranquil light mode combinations.

Props

PropTypeDefaultDescription
colorsstring[]['#A6C8FF', '#5227FF', '#FF9FFC']Array of hex color strings (max 8) for the falling streaks.
backgroundColorstring'#0A29FF'The base background color for the canvas layout.
speednumber0.5Speed multiplier of the light streaks movement.
streakCountnumber2Number of simultaneous streaks to render (1 to 16).
streakWidthnumber1Width factor of individual streaks.
streakLengthnumber1Length factor of individual streaks.
glownumber1Bloom/glow intensity factor of the falling lights.
densitynumber0.6Grid placement density/frequency.
twinklenumber1Pulse/flicker intensity factor.
zoomnumber3Camera perspective zoom multiplier.
backgroundGlownumber0.5Backlighting glow factor.
opacitynumber1Overall opacity of the WebGL canvas layer.
mouseInteractionbooleantrueEnables pointer warp attraction fields.
mouseStrengthnumber0.5Magnitude of mouse warp influence.
mouseRadiusnumber1Radius of pointer interaction sphere.
mouseDampeningnumber0.15Fluid pointer follow easing.

Contributors

Theme Customizer

8px
@theme { --radius: 0.5rem; --glass-blur: 8px; }
Changes apply instantly to this documentation workspace.
Lightfall | Vibe UI