ns-ui / hero-gravity-well
SINGULARITY
move your cursor — the well is live
ns-ui / loud
Headline as a monochrome particle cloud — the cursor is a gravity well that eats letters into an orbital accretion ring, then releases them to spring back into typeset.
Use when a hero built from ONLY a headline, no surrounding CTA/copy layout — rendered as a particle cloud the cursor pulls into an orbiting accretion ring and releases to spring back into type; zero deps, use when the headline alone should be the whole scene; pick hero-cloth-type instead when the headline should stay legible and deform in place rather than scatter, hero-dipole-field when a crisp DOM headline should sit over the reactive field, or hero-letterpress-lockup when the arrival should end in one terminal lockup rather than an ongoing interaction.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-gravity-well
move your cursor — the well is live
| Prop | Type | Default | Description |
|---|---|---|---|
| text? | string | "SINGULARITY" | — |
| gravity? | number | 4_000_000 | well strength G in px³/s²; accel a = G / max(d², 24²) |
| captureRadius? | number | 180 | px — pointer distance inside which the well owns a particle |
| springK? | number | 90 | spring stiffness k in s⁻² for the return-home phase |
| damping? | number | 0.55 | damping ratio ζ; < 1 gives visible overshoot as letters reform |
| className? | string | — | — |