ns-ui / hero-ascii-tunnel
Forward, always forward.
A corridor drawn entirely in characters, depth from ink weight alone, steered by the cursor.
Read the docsns-ui / loud
A full-bleed ASCII perspective-corridor hero — sixteen squircle rings advance toward the viewer on a continuous loop, shaded through a density ramp so depth reads from character weight alone, with the pointer steering the shared vanishing point and the whole corridor tilting to follow it.
Use when Pick hero-ascii-tunnel for a full-viewport landing hero built around forward momentum — a corridor of rings pulling the eye toward a vanishing point that the cursor steers. Its sibling hero-ascii-terrain is a horizontal landscape read instead of a tunnel; reach for that one when the feel you want is looking sideways across receding terrain rather than being pulled down a shaft. background-ascii-plasma is the pick when you want an abstract plasma surface with no spatial read at all.
Install
npx shadcn add https://design.helpmarq.comA corridor drawn entirely in characters, depth from ink weight alone, steered by the cursor.
Read the docs| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize? | number | — | grid cell size in px |
| children? | ReactNode | — | headline / CTA centered at the vanishing point |
| className? | string | — | — |