ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Lightfall, animated React component

A WebGL background. Lanes of light pour down a wall, round a cove and run out across a glossy floor towards you, with pulses streaking along every lane and the wall faintly mirrored in the floor. Move over it and the lanes part around your cursor like water around a finger; click, or press Space, to send a surge of light down every lane at once. Three palettes (Dusk, Tide, Ember) ease into each other from a built-in switcher. Until you touch it an invisible hand drifts across it and surges fire on their own. Put your own content on top with children.

  • Free
  • Background Effects
  • Hover
  • Glow

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

PropTypeDefaultWhat it does
heightnumber500Height of the stage in pixels. The width is the width of its container.
mode"dusk" | "tide" | "ember""dusk"Starting palette. The built-in switcher changes it afterwards, and changing the prop moves the stage to the new palette.
speednumber1Multiplier for how fast the pulses travel.
autoplaybooleantrueUntil the first touch, an invisible hand drifts across the lanes and surges fire every few seconds. Slowed under reduced motion and paused while the stage is off screen.
showModesbooleantrueShows the Dusk / Tide / Ember switcher in the corner.
hintReactNode—Optional caption under the stage.
childrenReactNode—Content layered over the lights. Defaults to a small title; pass null for none.
classNamestring—Extra classes for the outer wrapper.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry

    Run this once per project. It writes the Nexus UI entry into components.json for you:

    npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

    Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.

  1. 3

    Add the component

    Run this from your project root. It adds the component, the helpers it imports and its npm packages.

    npx shadcn@latest add @nexus-labs/lightfall
  2. 4

    Check what was added

    With a project made as in the Quick Start (a src/ folder), these files land in it:

    components/
    lightfall/
    index.ts
    lightfall.tsx
  3. 5

    Copying by hand? Skip the registry

    Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

    npm install framer-motion

    Then show the source and create each file at the path it gives:

  4. 6

    Use it in a page

    Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

    // src/app/page.tsx
import { Lightfall } from "@/components/lightfall";

export default function Page() {
  return (
    <main>
      <Lightfall />
    </main>
  );
}

More background effects