Flip Card

1"use client";2
3import React, { useEffect, useRef, useState } from "react";4import type { ReactNode } from "react";5import {6  animate,7  motion,8  useMotionValue,9  useReducedMotion,10  useTransform,11  useVelocity,12} from "motion/react";13import { cn } from "@/lib/utils";14
15export type FlipCardProps = {16  front: ReactNode;17  back: ReactNode;18  /** Accessible name / hint on the front. */19  label?: string;20  /** Hint shown on the back. */21  backLabel?: string;22  flipped?: boolean;23  defaultFlipped?: boolean;24  onFlippedChange?: (flipped: boolean) => void;25  /** Flip around the vertical (`y`) or horizontal (`x`) axis. */26  axis?: "x" | "y";27  className?: string;28};29
30const SPRING = { type: "spring" as const, stiffness: 160, damping: 20, mass: 0.9 };31const DRAG_RATIO = 0.55; // degrees per px32
33export function FlipCard({34  front,35  back,36  label = "Show more details",37  backLabel = "Tap to return",38  flipped: flippedProp,39  defaultFlipped = false,40  onFlippedChange,41  axis = "y",42  className,43}: FlipCardProps) {44  const reduce = !!useReducedMotion();45  const isControlled = flippedProp !== undefined;46  const [uncontrolled, setUncontrolled] = useState(defaultFlipped);47  const flipped = isControlled ? flippedProp : uncontrolled;48
49  // `rotation` accumulates, so flipping twice in the same direction keeps50  // spinning forward instead of unwinding.51  const base = useRef(flipped ? 180 : 0);52  const rotation = useMotionValue(base.current);53  const velocity = useVelocity(rotation);54  const drag = useRef<{ start: number; moved: boolean } | null>(null);55  const suppressClick = useRef(false);56  const [dragging, setDragging] = useState(false);57
58  const rad = useTransform(rotation, (r) => (r * Math.PI) / 180);59  // Lift toward the viewer mid-flip, and shade the face that turns away.60  const scale = useTransform(rad, (a) => 1 + 0.06 * Math.abs(Math.sin(a)));61  const shade = useTransform(rad, (a) => Math.abs(Math.sin(a)) * 0.35);62  const shadow = useTransform(rad, (a) => {63    const lift = Math.abs(Math.sin(a));64    return `0 ${10 + lift * 24}px ${28 + lift * 40}px -18px rgba(0,0,0,${0.18 + lift * 0.2})`;65  });66  const rotate = axis === "y" ? { rotateY: rotation } : { rotateX: rotation };67
68  const settle = (target: number, v = 0) => {69    base.current = target;70    if (reduce) rotation.jump(target);71    else animate(rotation, target, { ...SPRING, velocity: v });72  };73
74  // Follow the controlled prop.75  useEffect(() => {76    const showingBack = Math.round(base.current / 180) % 2 !== 0;77    if (showingBack !== flipped) settle(base.current + 180);78    // eslint-disable-next-line react-hooks/exhaustive-deps79  }, [flipped]);80
81  const setFlipped = (next: boolean, target: number, v = 0) => {82    settle(target, v);83    if (!isControlled) setUncontrolled(next);84    onFlippedChange?.(next);85  };86
87  const flip = (dir: 1 | -1 = 1, v = 0) => setFlipped(!flipped, base.current + 180 * dir, v);88
89  const onPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {90    if (reduce || e.button !== 0) return;91    drag.current = { start: axis === "y" ? e.clientX : e.clientY, moved: false };92  };93
94  const onPointerMove = (e: React.PointerEvent<HTMLButtonElement>) => {95    const d = drag.current;96    if (!d) return;97    const delta = (axis === "y" ? e.clientX : -e.clientY) - (axis === "y" ? d.start : -d.start);98    if (!d.moved) {99      if (Math.abs(delta) < 6) return;100      d.moved = true;101      setDragging(true);102      try {103        e.currentTarget.setPointerCapture(e.pointerId);104      } catch {105        /* Pointer may already be gone. */106      }107    }108    rotation.set(base.current + delta * DRAG_RATIO);109  };110
111  const onPointerUp = () => {112    const d = drag.current;113    drag.current = null;114    if (!d?.moved) return;115    setDragging(false);116    suppressClick.current = true;117    const turned = rotation.get() - base.current;118    const v = velocity.get();119    // Past a quarter turn, or a quick flick, completes the flip that way.120    if (Math.abs(turned) > 70 || Math.abs(v) > 500) flip(Math.sign(turned || v) as 1 | -1, v);121    else settle(base.current, v);122  };123
124  const face = "col-start-1 row-start-1 rounded-[20px] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]";125
126  return (127    <div className={cn("w-full", className)} style={{ perspective: 1200 }}>128      <motion.button129        type="button"130        aria-pressed={flipped}131        aria-label={flipped ? backLabel : label}132        onClick={(e) => {133          if (suppressClick.current) {134            suppressClick.current = false;135            return;136          }137          flip(1);138          // Keyboard flips keep focus; pointer flips don't need a ring.139          if (e.detail > 0) e.currentTarget.blur();140        }}141        onPointerDown={onPointerDown}142        onPointerMove={onPointerMove}143        onPointerUp={onPointerUp}144        onPointerCancel={onPointerUp}145        whileHover={reduce || dragging ? undefined : { y: -2 }}146        className={cn(147          "grid w-full touch-pan-y rounded-[20px] text-left outline-none select-none",148          "focus-visible:ring-2 focus-visible:ring-(--color-focus) focus-visible:ring-offset-4 focus-visible:ring-offset-(--color-paper)",149          dragging ? "cursor-grabbing" : "cursor-pointer",150        )}151        style={{ ...rotate, scale, boxShadow: shadow, transformStyle: "preserve-3d" }}152      >153        <div154          aria-hidden={flipped}155          inert={flipped}156          className={cn(face, "relative flex min-h-56 flex-col bg-(--color-paper) p-6 shadow-[inset_0_0_0_1px_var(--color-rule)]")}157        >158          <div className="flex-1">{front}</div>159          <div className="mt-6 flex items-center gap-1.5 text-[12px] text-(--color-neutral)">160            {label}161            <span aria-hidden>↻</span>162          </div>163          <motion.div aria-hidden className="pointer-events-none absolute inset-0 rounded-[20px] bg-black" style={{ opacity: shade }} />164        </div>165        <div166          aria-hidden={!flipped}167          inert={!flipped}168          className={cn(face, "relative flex min-h-56 flex-col bg-(--color-ink) p-6 text-(--color-paper)")}169          style={{ transform: axis === "y" ? "rotateY(180deg)" : "rotateX(180deg)" }}170        >171          <div className="flex-1">{back}</div>172          <div className="mt-6 flex items-center gap-1.5 text-[12px] opacity-60">173            {backLabel}174            <span aria-hidden>↺</span>175          </div>176          <motion.div aria-hidden className="pointer-events-none absolute inset-0 rounded-[20px] bg-black" style={{ opacity: shade }} />177        </div>178      </motion.button>179    </div>180  );181}