ASCII Monogram Hero
A load-in and hero sequence where a 50 by 14 grid of solid cells dissolves in a random stagger behind a stepped glyph progress bar, revealing a giant blackletter monogram zooming from 10x scale, lit by a pointer-following light in a fogged Three.js scene and rendered entirely as monospace ASCII characters.
npx shadcn@latest add https://ui.aryank.space/r/ascii-monogram-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 |
|---|---|---|---|
| name | string | "BLANK" | Name shown top left in the loader and the hero. |
| role | string | "Component Registry" | Role or tagline shown top right. |
| monogram | string | "Bk" | One or two characters drawn as the blackletter monogram. |
| monogramImage | string | undefined | Optional white-on-black silhouette image used instead of the drawn monogram. |
| theme | "white" | "black" | "white" | Ink on paper, or paper on ink. |
| scrollLength | number | 2.75 | Total scroll length in multiples of the container height. |
| className / style | string / React.CSSProperties | undefined | Passed through to the scroll container root. |
name / roletextCorner copy shared by the loader and the sticky hero.
monogramtextCharacters drawn as the giant blackletter shape at runtime.
themetextPage scheme: "white" (ink on paper) or "black".
gsapthree