ns-ui / hero-ascii-terrain
Terrain rendered in type.
Layered ridgelines, deterministic noise, a horizon that answers to the pointer, no images, no dependencies, just characters.
Read the docsns-ui / loud
A full-bleed ASCII landscape hero — five ridgelines of deterministic value noise recede toward a horizon, each layer stepping up in frequency, height and ink density the nearer it sits, with the pointer driving parallax so the terrain slides past like a window on a moving vehicle.
Use when Pick hero-ascii-terrain for a full-viewport landing hero that reads as a literal place — receding ridgelines and a horizon line, parallax driven by the pointer like glancing sideways out of a window. Its sibling hero-ascii-tunnel is a forward-motion corridor instead of a horizontal landscape; reach for that one when the feel you want is being pulled down a tunnel rather than looking out across terrain. 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.comLayered ridgelines, deterministic noise, a horizon that answers to the pointer, 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 | — | — |