ns-ui / loud
ASCII rendered as a real engraving — glyph density traces concentric contour bands through an orbiting metaball field instead of mapping brightness straight to weight, so the plate reads as ridged hatch linework over a soft rounded subject, with a pointer-driven polish trail and a self-healing burin-slip glitch.
Use when a generative full-bleed ASCII/glyph canvas where the text density traces literal contour hatching over an evolving 3D-ish form and the pointer visibly polishes a trail into it; reach for background-ascii-dither instead for a luminance-to-glyph renderer of an actual image or flowing noise field with a cursor-brightness halo, and event-stream-vapor for a particle-trail generative piece with no glyphs at all.
Install
npx shadcn add https://design.helpmarq.comns-ui / ascii-engraving-contour — move the cursor across the plate
Hatch density comes from contour bands through an orbiting metaball field, not from raw brightness — the pointer polishes a trail finer, and the plate slips on a fixed interval and self-heals.
| Prop | Type | Default | Description |
|---|---|---|---|
| className? | string | — | — |
| cellSize? | number | — | grid cell size in px |
| ringDensity? | number | — | hatch lines per field unit — higher reads finer |
| ringWidth? | number | — | fraction of each ring cycle that draws ink, the rest is the gap between hatch lines |
| polishRadius? | number | — | px radius of the pointer's polish influence |
| polishStrength? | number | — | extra hatch density under a fresh polish trail, 0-1 |
| glitchIntervalMs? | number | — | ms between burin-slip glitch bursts; 0 disables |