Letter 3d Swap

3D box letter swap animation on hover with configurable rotation direction and stagger

text 3d animation hover swap letter transform

Hover Over MeHHoovveerr OOvveerr MMee

import Letter3DSwap from "@/components/vritti/letter-3d-swap"

export function Letter3DSwapExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <Letter3DSwap
        mainClassName="text-4xl font-bold cursor-pointer"
        frontFaceClassName="text-foreground"
        secondFaceClassName="text-primary"
        staggerFrom="first"
        staggerDuration={0.03}
        rotateDirection="top"
      >
        Hover Over Me
      </Letter3DSwap>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/letter-3d-swap"

Dependencies


pnpm add motion

Props

Letter 3d Swap

Prop	Type	Default	Description
`children`	`React.ReactNode`	`-`	Text content to animate
`as`	`ElementType`	`"p"`	HTML element type to render as
`mainClassName`	`string`	`-`	CSS classes for the main container element
`frontFaceClassName`	`string`	`-`	CSS classes for the front face of each letter
`secondFaceClassName`	`string`	`-`	CSS classes for the second (reveal) face of each letter
`staggerDuration`	`number`	`0.05`	Delay between each letter's animation in seconds
`staggerFrom`	`"first" \| "last" \| "center" \| number \| "random"`	`"first"`	Direction from which the stagger effect originates
`transition`	`ValueAnimationTransition \| AnimationOptions`	`{ type: "spring", damping: 30, stiffness: 300 }`	Motion transition configuration for the swap animation
`rotateDirection`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Direction of the 3D rotation on hover