Text 3D Flip

A text effect that flips each letter in 3D with a staggered animation on hover. It renders text with individual character elements. Use it to add a dynamic 3D flip animation to text content.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/text-3d-flip

npx layro-cli add @magicuidesign/text-3d-flip

npx layro-cli add @magicuidesign/text-3d-flip

bunx layro-cli add @magicuidesign/text-3d-flip

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React, {
  memo,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  type ElementType,
} from "react"
import {
  useAnimate,
  type AnimationOptions,
  type ValueAnimationTransition,