ns-ui / loud

Hero ASCII Eclipse

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.json
  • ascii
  • hero
  • background
  • canvas
  • cursor
  • eclipse
  • occlusion
ns-ui / hero-ascii-eclipse

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 docs

Props

PropTypeDefaultDescription
cellSize?numbergrid cell size in px
children?ReactNodeheadline / CTA rendered over the field
className?string