A text component that rotates each letter in 3D on hover to reveal a second face, useful for animated headings and hero titles.
"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>
);
}
Part of Fancy Components — browse the full library on 21st.dev.
