3D Letter Swap

Letters that flip in 3D to swap on hover

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

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