ASCII Render
Visual EffectsA live ASCII-art field: two drifting noise octaves are sampled per cell and mapped through a brightness ramp into a monospace grid, with an optional pointer ripple. A single rAF loop pauses off-screen; the first frame is deterministic so SSR agrees, and under reduced-motion that one static frame is all that renders.
Inspired by Skiper UI — ASCII simulation (pattern) — independently built, not affiliated. Attribution policy
Installation
npx shadcn@latest add https://parable-three.vercel.app/r/ascii-render.jsonRuns the shadcn CLI — the component source is copied intocomponents/parable/ascii-render.tsx. You own it from there.
Usage
The exact code rendering the preview above.
<AsciiRender rows={22} cols={64} color="#8b5cf6" speed={1} className="w-full" />Props
AsciiRenderProps extends React.HTMLAttributes<HTMLPreElement>
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | 20 | Grid rows. |
| cols | number | 60 | Grid columns. |
| color | string | "#8b5cf6" | Glyph colour. Mirrors the site `--pb-violet` token. |
| speed | number | 1 | Flow speed multiplier. |
| pointerReactive | boolean | true | Let the pointer push a bright ripple into the field. |
| label | string | — | Accessible name. When set, the field is exposed as an image with this label; otherwise it is decorative (`aria-hidden`). |