A lens follows the pointer and bends the line: letters shove aside, grow and tilt with a smooth falloff.
npx shadcn@latest add https://hyperblur.dev/r/text-warp.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-warp.tsx.
import { TextWarp } from "@/components/hyperblur/text-warp"
<TextWarp text="Bend the line" className="font-serif text-5xl italic" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| radius | number | 130 | Reach of the lens in pixels. |
| strength | number | 26 | Maximum push distance in pixels at the center of the lens. |
| magnify | number | 0.55 | Extra scale at the center of the lens. 0 disables magnifying. |
| twist | number | 16 | Maximum rotation in degrees, leaning away from the lens center. |
| mode | "push" | "pull" | "push" | Push letters away from the pointer or pull them toward it. |
| align | "left" | "center" | "right" | "center" | Horizontal alignment of the text inside its block. |