Background

Waterfall Of Light

A stream of light falls from above, gathers into strands, strikes the top edge of a card and spreads along it. The GPU does the work: a shader builds the curtain, the impact, the god-rays and the reflection on the surface.

React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.

What you can change

  • eyebrow, title, text — the card eyebrow, heading and paragraph
  • author, role, avatar and action — the byline and the action chip
  • photos — the frames on the right: src, alt and caption

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme
Waterfall Of Light — A stream of light falls from above, gathers into strands, strikes the top edge of a card and spreads along it. The GPU does the work: a shader builds the curtain, the impact, the god-rays and the reflection on the surface.

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.club/c/background-003?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

How to use

<Background003 title="Light gathers where the work is" photos={[{ src: "/photo.webp", caption: "Server room" }]} />

A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.

Settings

Card heading
title · default: Light gathers where the work is
Glow
glow · default: #7fa0ff
Stream core
core · default: #f7f9ff
Far edge
deep · default: #1b2a6b
Night
background · default: #090b0d
Card
card · default: #141518
Light strength
intensity · default: 1
Strand density
strands · default: 1
Fall speed
speed · default: 1
Cursor light
spotlight · default: on

FAQ

How do I add Waterfall Of Light with Cursor or Claude Code?
Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
What does Waterfall Of Light depend on?
No npm packages beyond React and Tailwind CSS.
What can I change in Waterfall Of Light?
Adapt: eyebrow, title, text — the card eyebrow, heading and paragraph; author, role, avatar and action — the byline and the action chip; photos — the frames on the right: src, alt and caption. Keep as installed: the local --vibeui-background-003-* palette — do not swap it for your theme tokens; the layer order in the shader: thread, curtain of strands, haze, impact, spread, god-rays, spill — light stacks exactly this way, otherwise the stream stops falling and becomes a fill; the spill across the card: the run along the edge and the streams downward — without them the light stops at the line and the scene splits in two.
Is Waterfall Of Light free?
The preview is open to everyone; the source is available with a PRO subscription.

For developers

npx shadcn@latest add https://vibeui.club/r/pro/background-003.json

This command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options

Technical notes

The scene is drawn by a WebGL 2 fragment shader; the DOM only carries the card and its edge. The layers are computed in screen space and stack in the order light behaves in life: the thread of the stream at the top, the curtain of strands widening downward (the noise drifts down, so the flow looks accelerated), the haze around it, the impact at the edge, the long spread along it, god-rays from the point of impact and the reflection on the card. Colour is stacked in steps (depth, glow, core) and passes through Reinhard tone mapping — the glow keeps the structure of the strands instead of blowing out to white. The canvas sits above the card in screen mode: the light truly lands on the surface rather than lighting it from below. The cursor moves an extra light point inside the shader, so React re-renders nothing. Frames are computed only while the component is visible and the tab is active, devicePixelRatio is capped at two, and prefers-reduced-motion leaves a single still frame. Where WebGL 2 is missing, gradients of the same drawing hold the scene. The background under the stream is not empty: a grid with dots runs across it and an invisible field of technical glyphs lies on top — it appears only under the cursor beam, the donor's trick, where artwork opens only under a torch; the cursor coordinates go into CSS variables, so the reveal re-renders nothing. Smoke drifts through the dark part of the frame, and every few seconds a distant lightning briefly lights a cloud — the flash draws no bolt and does not argue with the waterfall. Card content is passed through children.

Tags

  • background
  • waterfall
  • light
  • beam
  • webgl
  • shader
  • hero
  • dark
  • card
  • ambient
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…