Letter 3D Swap

Heroes 18

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Letter 3D Swap to your project and fits it to your theme.

Code

How Letter 3D Swap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function Preview() {
  const [debug, setDebug] = useState(false);

  return (
    <div className="relative w-dvw h-dvh flex flex-col items-center justify-center p-8 bg-background">
      <div className="flex flex-col items-center max-w-2xl font-cotham">
        <Letter3DSwap
          mainClassName="text-2xl sm:text-5xl md:text-7xl bg-background lowercase"
          frontFaceClassName={`bg-background ${debug ? "border" : ""} text-foreground`}
          secondFaceClassName={`bg-background ${debug ? "border" : ""} text-foreground`}
          rotateDirection="top"
          staggerDuration={0.03}
          staggerFrom="first"
          transition={{
            type: "spring",
            damping: 25,
            stiffness: debug ? 50 : 160,
          }}
        >
          SET YOUR MIND TO IT
        </Letter3DSwap>
      </div>
    </div>
  );
}