Letter 3D Swap

A text component that rotates each letter in 3D on hover to reveal a second face, useful for animated headings and hero titles.

Fancy ComponentsbyDaniel Petho

"use client";

import Letter3DSwap from "@/components/ui/letter-3d-swap";
import { useState } from "react";

export default function Preview() {
  const [debug, setDebug] = useState(false);
  const sharedProps = {
    mainClassName:
      "text-lg sm:text-3xl md:text-4xl bg-background lowercase text-foreground",
    frontFaceClassName: `bg-background ${debug ? "border" : ""}`,
    secondFaceClassName: `bg-background ${debug ? "border" : ""}`,
    staggerDuration: 0.02,
    transition: {
      type: "spring" as const,
      damping: 25,
      stiffness: debug ? 50 : 160,
    },
  };

  return (
    <div className="relative w-dvw h-dvh flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-background gap-4 sm:gap-6 md:gap-8">
      <div className="flex flex-col items-center gap-4 sm:gap-6 md:gap-8 max-w-xs sm:max-w-xl md:max-w-2xl font-cotham">
        <Letter3DSwap
          rotateDirection="left"
          staggerFrom="first"
          {...sharedProps}
        >
          Rotate Left, Stagger First
        </Letter3DSwap>

        <Letter3DSwap
          rotateDirection="right"
          staggerFrom="last"
          {...sharedProps}
        >
          Rotate Right, Stagger Last
        </Letter3DSwap>

        <Letter3DSwap
          rotateDirection="top"
          staggerFrom="center"
          {...sharedProps}
        >
          Rotate Top, Stagger Center
        </Letter3DSwap>

        <Letter3DSwap
          rotateDirection="bottom"
          staggerFrom="random"
          {...sharedProps}
        >
          Rotate Bottom, Stagger Random
        </Letter3DSwap>
      </div>
    </div>
  );
}