Letters gain weight and color from how fast the pointer moves across them, then cool back down, so a quick swipe leaves a bold trail that fades. Optional autoplay sweeps a ghost pointer when idle.
npx shadcn@latest add https://hyperblur.dev/r/text-weight-trail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-weight-trail.tsx.
import { TextWeightTrail } from "@/components/hyperblur/text-weight-trail"
<TextWeightTrail text="Move fast, leave a mark" className="text-5xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Needs a variable font for smooth weight steps. |
| minWeight | number | 250 | Weight of a cold letter. |
| maxWeight | number | 900 | Weight of a fully heated letter. |
| accent | string | "#7fb3ff" | Color and underline of heated letters. |
| radius | number | 70 | Reach of the pointer in pixels. |
| sensitivity | number | 1 | How much heat a given pointer speed adds. |
| decay | number | 0.93 | Heat kept per frame at 60 fps. Lower values cool faster. |
| autoPlay | boolean | false | Sweep a virtual pointer across the text after 1.6 seconds without real input. |