Every letter swells in weight and size as the pointer gets close, with a slow breathing wave when nothing is touching it.
Slide across the letters and feel them push back.
npx shadcn@latest add https://hyperblur.dev/r/text-pressure.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-pressure.tsx.
import { TextPressure } from "@/components/hyperblur/text-pressure"
<TextPressure text="Heavy hands" className="text-5xl font-sans" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| minWeight | number | 300 | Font weight of letters far from the pointer. |
| maxWeight | number | 900 | Font weight of the letter right under the pointer. Needs a variable font to look smooth. |
| maxScale | number | 1.18 | Scale of the letter right under the pointer. 1 keeps the size and only changes the weight. |
| radius | number | 150 | Reach of the pointer in pixels. |
| breathe | boolean | true | Idle wave that ripples through the letters while the pointer is away. |
| align | "left" | "center" | "right" | "center" | Horizontal alignment of the text inside its block. |