Primitive · CLI
ASCII Rain
Falling streams of glyphs whose color fades along each tail, head cell bright — the procedural field effect behind the matrix look.
Preview
npx shadcn@latest add @atroui/ascii-rainInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/ascii-rainSource lands in your repo. Installation · Registry
Usage
Pin behind content like meteors: the canvas is decorative (aria-hidden under a role=img wrapper). Swap chars to '01' for a leaner field, katakana for the classic.
tsx
import { AsciiRain } from "@/components/ui/ascii-rain"
<div className="relative overflow-hidden rounded-[var(--radius)] bg-card p-10">
<AsciiRain cols={64} opacity={0.5} />
<p className="relative">Lands behind your content</p>
</div>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | 52 | Stream count; wider grids use proportionally more rows. |
| speed | number | 1 | Fall-speed multiplier. |
| chars | string | half-width katakana | Characters that fall — any string. |
| label | string | "Falling columns of characters" | Accessible description. |
| className | string | — | Regular className. |
Rain