Primitive · CLI
ASCII Wave
Every visible cell is f(x, y, t) — travelling sines over a diagonal carrier — mapped through a luminance ramp. One text node per frame, no canvas.
Preview
npx shadcn@latest add @atroui/ascii-waveInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/ascii-waveSource lands in your repo. Installation · Registry
Usage
A quiet background band for footers and horns of hero sections. Sizing: cells at text-[11px] are ~11px wide; keep rows small so the band stays a band.
tsx
import { AsciiWave } from "@/components/ui/ascii-wave"
<AsciiWave cols={72} rows={7} chars={"░▒▓"} />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | 56 | Grid width in cells (clamped 16–160). |
| rows | number | 16 | Grid height in lines (clamped 4–64). |
| speed | number | 1 | Field speed multiplier. |
| chars | string | ladder | Ramp for the field, dim → bright. |
| label | string | "Interference wave of characters" | Accessible description. |
| className | string | — | Regular className. |
Wave