ns-ui / loud
Hero background of drifting, breathing isobar-like contour lines whose density bunches tightly around the primary CTA and whose whole field leans toward the pointer, so the layout physically reads as a live pressure system centered on the one action that matters.
Use when a landing hero whose visual hierarchy is encoded structurally — line density converging on the CTA, reinforced by a live pressure field that breathes and leans toward the cursor — rather than hero-dipole-field, where cursor proximity is the whole mechanism, or chart-ridgeline-terrain, a canvas terrain sampling live data; pick this one when the persuasion has to survive prefers-reduced-motion as a still frame, since the density gradient alone still does the full hierarchy job with the drift, breathing and pointer-lean all frozen off.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-isobar-contours
the contour lines bunch tighter the closer they get to the button — hover it to deepen the low
ISOBAR-01
Pressure Front reads the room before anyone clicks: the whole layout is a low-pressure system centered on one button, and every ring of contour drawn around it exists to say so.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow? | string | — | — |
| headline? | string | string[] | — | — |
| subcopy? | string | — | — |
| primaryCta | PressureFrontCta | — | — |
| secondaryCta? | PressureFrontCta | — | — |
| rings? | number | — | number of contour rings. default 30 |
| driftMs? | number | — | ms for one full drift loop of the noise phase. default 20000 |
| className? | string | — | — |