ns-ui / loud
A hero whose backdrop is pure string art — a few hundred straight chords across a circle under the map i → k*i, whose envelope is an epicycloid caustic that the chords draw without any curve ever being plotted; the pointer's horizontal position continuously morphs k, so cusps split and merge under the cursor.
Use when a landing hero whose backdrop is an honest geometric construction — only straight <line> segments, with the bright curve emerging as their envelope — and where the cursor should continuously reshape that curve's cusp count; pick hero-isobar-contours instead when the point is visual hierarchy converging on the CTA rather than the construction itself, and background-ascii-caustics when you want a full-bleed textural field rather than a single centred figure.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-string-envelope
240 straight chords, i to k·i — move across to morph k and split the cusps
ENVELOPE-01 / k = 3, NEPHROID
Every mark on this page is a straight line between two points on a circle. The bright edge is where they crowd — an epicycloid nobody drew. Slide across the hero and the multiplier moves with you.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow? | string | — | — |
| headline? | string | string[] | — | — |
| subcopy? | string | — | — |
| primaryCta | StringEnvelopeCta | — | — |
| secondaryCta? | StringEnvelopeCta | — | — |
| points? | number | — | number of nodes on the circle, one chord each. default 240 |
| multiplier? | number | — | resting multiplier the ambient breathing is centered on. default 3 (nephroid) |
| className? | string | — | — |