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.

Component

BLANK

Component Registry

Every piece in this registry is a working port of a production load sequence, rebuilt as one installable React component: the grid dissolve, the stepped progress bar, and the ASCII render pass all run from a single file.

Install

npx shadcn@latest add @compronents/ascii-monogram-hero

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

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.

Customize

name / roletext

Corner copy shared by the loader and the sticky hero.

monogramtext

Characters drawn as the giant blackletter shape at runtime.

themetext

Page scheme: "white" (ink on paper) or "black".

Dependencies

gsapthree