3D Letter Swap

Staggered customizable 3D letter swap animation

3d-letter-swap-tw

Hover Me!HHoovveerr MMee!!

Customize

Text

Stagger Interval

0.03s

Duration

0.6s

Blur Effect

Blur Amount

4px

Play on Scroll

Scroll Threshold

0.1

Respect Reduced MotionShow Callbacks

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

childrenReact.ReactNode

The content to be displayed and animated

Default-

asElementType

HTML Tag to render the component as

Default"p"

classNamestring

Class name for the main container element

Default""

frontFaceClassNamestring

Class name for the front face element

Default""

backFaceClassNamestring

Class name for the secondary face element

Default""

staggerIntervalnumber

Duration of stagger delay between elements in seconds

Default0.05

staggerOrigin"first" | "last" | "center" | "random" | number

Direction to stagger animations from

Default"first"

animationValueAnimationTransition | AnimationOptions

Animation transition configuration

Default{ type: 'spring', damping: 30, stiffness: 300 }

flipDirection"top" | "bottom"

Direction of rotation

Default"top"

playOnScrollboolean

Trigger animation when element scrolls into view

Defaultfalse

scrollThresholdnumber

IntersectionObserver threshold for scroll trigger

Default0.1

blurboolean

Enable blur effect during animation

Defaultfalse

blurAmountnumber

Amount of blur in pixels during transition

Default4

durationnumber

Duration of the animation in seconds

Default0.6

onAnimationStart() => void

Callback fired when animation starts

Defaultundefined

onAnimationComplete() => void

Callback fired when animation completes

Defaultundefined

respectReducedMotionboolean

Honor user's prefers-reduced-motion setting

Defaulttrue