Card Reveal

A simple Framer Motion component that flips to reveal additional information.

It's set to flip when tapping on the card that way you could interact with other elements, such as copying the card details to clipboard. But could also flip while-tap to get a quick look at the sensitive data.

Using spring transition, the card flips on the Y-axis with a smooth and organic feeling animation. This kind of UI is ideal for use cases such as finance apps, but you can get creative.

Unstyled component

Here is an unstyled version to get you started.

import { motion } from "framer-motion";

export default function CreditCard() {
  return (
    <motion.div
      whileTap="flipped"
      style={{ transformStyle: "preserve-3d" }}
      transition={{ type: "spring", duration: 1 }}
      variants={{
        flipped: {
          rotateY: 180,
          rotateX: 5,
        },
      }}
    >
      {/* front side */}
      <div style={{ backfaceVisibility: "hidden" }}></div>
      {/* backside */}
      <div
        style={{
          backfaceVisibility: "hidden",
          transform: "rotateY(180deg)",
        }}
      ></div>
    </motion.div>
  );
}