Memory Card Stack

"use client";
import { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "motion/react";

// Damping ratio ζ = damping / (2·√(stiffness·mass)). Every spring here was sitting at ζ ≈ 0.92–1.02,
// which is critically damped or past it — a spring() curve that never actually springs. These sit lower,
// so the motion overshoots once and settles instead of just easing in.
const SP = { type: "spring" as const, stiffness: 260, damping: 24, mass: 0.9 }; // ζ ≈ 0.78
const SP_FAST = { type: "spring" as const, stiffness: 480, damping: 30, mass: 0.75 }; // ζ ≈ 0.79
// The card dropping back into the deck, and the deck fanning out around it: the most physical move here,
// so it gets the loosest ratio of the three.
const SP_SETTLE = { type: "spring" as const, stiffness: 240, damping: 20, mass: 1 }; // ζ ≈ 0.65
/** How long the browse exit keyframes run, and so how long the next/prev lock is held. */
const BROWSE_MS = 480;