Text Split
Split text animation that shifts top and bottom halves on hover with customizable offset and falloff.
Examples
Text Split Preview
BB
ee
rr
ll
ii
xx
UU
II
Text Split with gradual Falloff
CC
uu
tt
tt
hh
rr
oo
uu
gg
hh
tt
hh
ee
ss
ii
ll
ee
nn
cc
ee
Installation
npx shadcn@latest add "https://ui.rechesoares.com/registry/text-split.json"
Component Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | string | - | Yes | Text to be split. |
| className | string | - | No | Optional classes for the outer container |
| topClassName | string | - | No | Optional classes for the top half. |
| bottomClassName | string | - | No | Optional classes for the bottom half. |
| maxMove | number | 50 | No | Maximum vertical movement percentage. |
| falloff | number | 0.3 | No | Controls how much nearby letters move when hovering. |