Text 3D Flip

An interactive character animation rotating segments 90 degrees in 3D perspective space on hover.

Preview

HOVER ME TO SPINHHOOVVEERR MMEE TTOO SSPPIINN

pnpm dlx vibe-ui-kit@latest add text-3d-flip

import { Text3DFlip } from "@/components/ui/text-3d-flip"

<Text3DFlip>HOVER ME TO SPIN</Text3DFlip>

Prop	Type	Default	Description
`children`	`ReactNode`	`""`	Text string to split and animate in 3D perspective space
`staggerDuration`	`number`	`0.025`	Delay in seconds between character flips
`rotateDirection`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	3D axis direction for character flip rotation
`className`	`string?`	`""`	Additional classes for the container

This Text3DFlip component dynamically rotates character segments 90 degrees in 3D perspective space on hover.

Ensure that the following CSS utility configurations are declared inside your main stylesheet to support 3D transform layout configurations:

@utility transform-3d {
  transform-style: preserve-3d;
}

@utility backface-hidden {
  backface-visibility: hidden;
}

Jenish Sabhadiya