Glyph Rain
Digital rain in katakana, binary, hex, latin or block glyphs with mutating trails. Optional torch mode dims the rain except where your pointer shines.
canvastextpointer5 files · 398 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/glyph-rain.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs glyph-rainUsage
import { GlyphRain } from "@/components/opus/backgrounds/glyph-rain";
<GlyphRain glyphs="katakana" className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| color / headColor | string | — | Trail and leading-glyph colours. |
| glyphs | "katakana" | "binary" | "hex" | "latin" | "blocks" | "katakana" | Character set. |
| fontSize | number | 16 | Glyph size (px). |
| spotlight | boolean | false | Torch mode: dark except around the pointer. |
| interactive | boolean | true | React to the pointer (tracked on window). |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Optional content rendered above the canvas. |
Notes
- Canvas 2D with a device-pixel-ratio aware backing store (capped at 2×).
- The animation loop stops off-screen and in hidden tabs; resize re-seeds the scene.
prefers-reduced-motion: reducedraws a single static frame.