Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Glyph Rain, animated React component

A 404 hero of falling characters that hides a message. Columns of letters rain down at their own speeds with bright heads and fading tails, and your pointer lights them as it passes. Linger and the rain around you stops changing and settles into the words of a hidden message, which stays a while before melting back into the rain. The title, description and button are plain HTML over the canvas.

  • Pro
  • Background Effects
  • Hover

A faint ticking as the letters settle into the hidden message. Sound is off on this site until you switch it on.

Play with it

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

404
Nothing at this address
Something's written in the rain. Move over it to find out what.
Hidden message: THIS PAGE WANDERED OFF

Props

PropTypeDefaultWhat it does
messagestring[]["THIS PAGE", "WANDERED OFF"]What the rain spells where you linger: one string per line of letters, digits and spaces.
codestring"404"The big code.
titlestring"Nothing at this address"The heading.
descriptionstring—The line under the heading.
actionstring"Back to home"The button's label.
onAction() => void—Called when the button is pressed.
enableSoundbooleantrueA faint ticking as the letters settle. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseMoves a pointer through the rain by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

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 with your API key

    Glyph Rain is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Glyph Rain works

A 404 page hero of falling characters that hides a message. Columns of letters and symbols rain down the panel at their own speeds, each with a bright head and a fading tail, the characters flickering as they fall. Your pointer lights them as it passes, leaving a trail of blue that fades.

The source, the install command and the build prompt come with Pro.

Glyph Rain questions

Does it make sound, and how do I turn it off?

A faint ticking as the letters settle into the hidden message. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More background effects