Flip Card

flip x backface

Card that flips to reveal content on the back. From Animata.

cardflip3danimata

Click to flip

Code

card-flip.tsx

"use client";
import { useState } from "react";

export function FlipCard() {
  const [flipped, setFlipped] = useState(false);
  return (
    <div style={{ perspective: "800px" }}>
      <div onClick={() => setFlipped(!flipped)} className="cursor-pointer"
        style={{ transformStyle: "preserve-3d", transform: flipped ? "rotateY(180deg)" : "", transition: "transform 0.6s" }}>
        <div className="rounded-xl border border-border bg-card p-8" style={{ backfaceVisibility: "hidden" }}>
          Click to flip
        </div>
      </div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Flip Card component and wire it to my accent.”