Text Flip
A 3D character flip on hover, staggered and springy across every single letter.
textflip3dheadlineanimationtypographyhover
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The string to render. |
as | keyof React.JSX.IntrinsicElements | "span" | Tag rendered as the outer element. |
direction | "top" | "right" | "bottom" | "left" | "top" | Axis the characters rotate around when flipping. |
trigger | "hover" | "click" | "both" | "hover" | What starts a flip cycle. |
duration | number | 0.45 | Flip duration per character in seconds. |
staggerDuration | number | 0.05 | Delay between each character, in seconds. |
staggerFrom | "first" | "last" | "center" | "random" | number | "first" | Where the stagger wave originates. |
easing | string | cubic-bezier(0.34, 1.4, 0.64, 1) | CSS easing. Default approximates a spring overshoot. |
frontColor | string | theme | Front face color. Omit for theme auto. |
backColor | string | theme | Back face color. Omit for theme auto. |
disabled | boolean | false | Disable pointer triggers. Imperative flip() still works. |
replayKey | string | number | - | Changing this value forces a flip cycle. |