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 https://ui.aryank.space/r/text-displacement-field.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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.