motion-swap
Splits text into individual characters and swaps them vertically on hover or scroll reveal. Each character has an original and duplicate that trade places with a spring animation.
Preview
Import
Usage
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | "hover" | "reveal" | "hover" | Animation trigger — hover swaps in/out on mouseenter/mouseleave; reveal plays once on viewport entry |
| | | boolean | true | When true, letters swap bottom-to-top. When false, top-to-bottom. |
| | | number | 0.03 | Delay in seconds between each character's animation start |
| | | object | { type: "spring", duration: 0.7 } | Motion animation options for each character pair |
| | | boolean | true | Animate only on first intersection (reveal mode) |
| | | number | 0 | Delay in seconds before animation starts |
Accessibility
Respects prefers-reduced-motion: when enabled, the swap effect is skipped and the text appears at its default state.