Bring it to totality.
The cursor carries the transit. Line the centers up and the corona answers — no images, no dependencies, just characters.
Read the docsns-ui / loud
A full-bleed ASCII hero built around an occlusion event — a dark glyph disc transits a bright sun disc over a fixed starfield, the pointer dragging the transit, and a corona blooms at the rim only as the two centers nearly align, the way a real solar corona is only visible near totality.
Use when Pick hero-ascii-eclipse for a hero whose payoff is a single alignment event — drag the cursor to bring two discs into occlusion and watch a corona bloom — rather than a place to look out across (hero-ascii-terrain), a corridor to be pulled through (hero-ascii-tunnel), or a field bent by wind (hero-ascii-rainfall).
Install
npx shadcn add https://design.helpmarq.com /r/hero-ascii-eclipse.jsonThe cursor carries the transit. Line the centers up and the corona answers — no images, no dependencies, just characters.
Read the docs| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize? | number | — | grid cell size in px |
| children? | ReactNode | — | headline / CTA rendered over the field |
| className? | string | — | — |