Text Displacement Field
A readable field of words and display letters pushed away by cursor proximity. Each span keeps an eased target, so the copy ripples around the pointer and then settles home.
onesubscription
Sharing the craft behind building interactive experiences and carefully tuned websites. The best lessons live in small gestures: a word moving away from the cursor, a line finding its rhythm, a surface reacting without shouting. This component turns text into a responsive field while keeping the copy readable.
endlesswebdesign
npx shadcn@latest add @compronents/text-displacement-fieldInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| intro / body / outro | string | source-inspired copy | Text split into letters and words for displacement. |
| radius | number | 150 | Pointer influence radius in pixels. |
| displacement / ease | number | 300 / 0.1 | Maximum span offset and interpolation amount. |
intro / body / outrotextareaDisplay lines and paragraph copy split into moving spans.
radius / displacement / easetuplePointer field radius, maximum push, and easing factor.
None.