ASCII TV Hero
A hero where a video plays as a wall of luminance-mapped ASCII glyphs inside a bulging CRT tube, with pointer movement smearing nearby cells along a chromatic trail, and scrolling expanding the set from a floating television to a flat fullscreen wall.
npx shadcn@latest add https://ui.aryank.space/r/ascii-tv-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| videoSrc | string | BLANK hero footage | CORS-readable video sampled into the glyph wall. |
| headline | [string, string] | ["Interfaces, motion and code.", "One integrated practice."] | Bottom-left copy that fades out during expansion. |
| scrollLength | number | 3 | Scroll distance of the expansion, in multiples of the container height. |
| cellSize | number | 6 | Glyph cell size in CSS pixels. |
| glyphRamp | string | "@#W$9876543210?!abc;:+=-,._ " | Characters ordered from densest ink to empty space. |
videoSrcasset-urlThe video the glyph wall samples. Must be CORS-readable.
headlinetextareaTwo lines pinned bottom left that fade as the TV grows.
cellSize / glyphRamptextCell size in CSS pixels and the character ramp from densest to empty.
None.