ns-ui / loud
A frosted prism strip rides the cursor across a headline, magnifying the text beneath it and tearing it into velocity-driven RGB channel slices that snap back with spring overshoot.
Use when a frosted prism strip rides the cursor across a headline, magnifying it and tearing it into velocity-driven RGB channel slices that snap back with overshoot; use for a glitchy, chromatic-aberration headline moment, not a soft/organic one; pick text-ligature-melt instead when the distortion should be soft and gooey rather than chromatic, text-variable-weight when the headline should respond in weight alone with no colour fringing, or text-decrypt when the effect should fire once on mount rather than ride the cursor.
Install
npx shadcn add https://design.helpmarq.comns-ui / text-prism-split
drag the prism
| Prop | Type | Default | Description |
|---|---|---|---|
| text? | string | "REFRACTION" | — |
| stripWidth? | number | 120 | prism strip width in px |
| stiffness? | number | 300 | spring stiffness (N/m-ish, px units) |
| damping? | number | 24 | spring damping coefficient |
| mass? | number | 1 | spring mass |
| dispersionGain? | number | 0.018 | px of red-channel offset per px/s of strip velocity |
| maxDispersion? | number | 14 | channel offset clamp in px |
| magnify? | number | 1.06 | scale of the refracted clones inside the strip |
| className? | string | — | — |