3D Letter Swap

Staggered customizable 3D letter swap animation

3d-letter-swap-tw

Hover Me!HHoovveerr MMee!!

Customize

Tweak the props live

Text & Stagger

Text

Flip Direction

Stagger Origin

Stagger Interval0.03s

Animation

Duration0.6s

Blur Effect

Blur Amount4px

Scroll & Accessibility

Play on Scroll

Scroll Threshold0.1

Respect Reduced Motion

Show 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

Default:0.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

Default:false

scrollThresholdnumber

IntersectionObserver threshold for scroll trigger

Default:0.1

blurboolean

Enable blur effect during animation

Default:false

blurAmountnumber

Amount of blur in pixels during transition

Default:4

durationnumber

Duration of the animation in seconds

Default:0.6

onAnimationStart() => void

Callback fired when animation starts

Default:undefined

onAnimationComplete() => void

Callback fired when animation completes

Default:undefined

respectReducedMotionboolean

Honor user's prefers-reduced-motion setting

Default:true