3D Letter Swap
Staggered customizable 3D letter swap animation
3d-letter-swap-tw
Hover Me!
Customize
0.03s
0.6s
4px
0.1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be displayed and animated |
| as | ElementType | "p" | HTML Tag to render the component as |
| className | string | "" | Class name for the main container element |
| frontFaceClassName | string | "" | Class name for the front face element |
| backFaceClassName | string | "" | Class name for the secondary face element |
| staggerInterval | number | 0.05 | Duration of stagger delay between elements in seconds |
| staggerOrigin | "first" | "last" | "center" | "random" | number | "first" | Direction to stagger animations from |
| animation | ValueAnimationTransition | AnimationOptions | { type: 'spring', damping: 30, stiffness: 300 } | Animation transition configuration |
| flipDirection | "top" | "bottom" | "top" | Direction of rotation |
| playOnScroll | boolean | false | Trigger animation when element scrolls into view |
| scrollThreshold | number | 0.1 | IntersectionObserver threshold for scroll trigger |
| blur | boolean | false | Enable blur effect during animation |
| blurAmount | number | 4 | Amount of blur in pixels during transition |
| duration | number | 0.6 | Duration of the animation in seconds |
| onAnimationStart | () => void | undefined | Callback fired when animation starts |
| onAnimationComplete | () => void | undefined | Callback fired when animation completes |
| respectReducedMotion | boolean | true | Honor user's prefers-reduced-motion setting |