ns-ui
Full-bleed hero where the headline exists twice: crisp DOM type above, and beneath it a canvas field of iron-filing strokes solved from a two-pole dipole field, so the type visibly iron-files into existence as the cursor approaches and CTA hover bends the whole field toward the button.
Use when a hero whose headline exists twice — crisp DOM type over a Canvas 2D field of iron-filing strokes that bend toward the cursor and snap toward the CTA on hover; zero deps, best when the headline itself should feel physically alive; pick hero-gravity-well instead when the headline itself should become the particles rather than sit crisply over them, hero-cloth-type when the type should deform under the cursor rather than a field behind it, or success-iron-filings when the same filings mechanic should mark a confirmation moment rather than carry a hero.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-dipole-field
move the cursor — the headline iron-files into place · hover the primary CTA to bend the field
FIELD-ALIGNED INFRASTRUCTURE
Lodestone routes traffic the way a magnet organizes iron filings: declare the pole, and every request, retry, and rollback aligns itself. No orchestration YAML, no drift.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow? | string | "FIELD-ALIGNED INFRASTRUCTURE" | mono eyebrow line above the headline |
| headlineLines? | string[] | ["Every signal bends", "toward your stack"] | display headline, one string per rendered line — this is the letter-mask source |
| subcopy? | string | "Lodestone routes traffic the way a magnet organizes iron filings: declare the pole, and every request, retry, and rollback aligns itself. No orchestration YAML, no drift." | muted supporting copy under the headline |
| primaryCta? | { label: string; href: string } | { label: "Deploy the field", href: "#deploy" } | primary accent CTA — its center is the fixed anchor pole |
| secondaryCta? | { label: string; href: string } | { label: "Read the docs", href: "#docs" } | ghost secondary CTA |
| stats? | { value: string; label: string }[] | [ { value: "12ms", label: "p99 route solve" }, { value: "99.98%", label: "field uptime" }, { value: "4,200+", label: "clusters aligned" }, ] | three mono stats for the bordered strip below the CTAs |
| maskFilings? | number | 1800 | filings rejection-sampled inside the headline letter-mask |
| ambientFilings? | number | 600 | sparse ambient filings outside the mask |
| className? | string | — | — |