"use client"; import { motion, AnimatePresence, type Transition } from "motion/react"; import { useState } from "react"; /** * Add-to-cart morphing button — Rauno Freiberg style. * * Design rules applied: * 1. Monochrome — neutral-900 / white / one muted accent * 2. Spring physics everywhere — no cubic-bezier, real springs * 3. One morphing container — layout animates via spring * 4. Content crossfades — whole phrase, not per-character * 5. Only transform + opacity — zero filter:blur * 6. Fewer elements — no pills-in-pills, no checkmarks, no icons * 7. Slot-machine flip — the only "flashy" detail, earned * 8. Hover & press feel physical — scale springs with overshoot */ /* ── spring presets ── */ const SPRING_LAYOUT: Transition = { type: "spring", stiffness: 400, damping: 30, }; const SPRING_CONTENT: Transition = { type: "spring", stiffness: 300, damping: 25, }; const SPRING_TAP: Transition = { type: "spring", stiffness: 500, damping: 30, }; /* ── component ── */ interface AddToCartButtonProps { price?: number; currency?: string; maxQuantity?: number; onQuantityChange?: (quantity: number) => void; } export function AddToCartButton({ price = 24.99, currency = "$", maxQuantity = 99, onQuantityChange, }: AddToCartButtonProps) { const [added, setAdded] = useState(false); const [qty, setQty] = useState(1); const [locked, setLocked] = useState(false); const total = `${currency}${(price * qty).toFixed(2)}`; const lock = () => { setLocked(true); setTimeout(() => setLocked(false), 350); }; const add = () => { if (locked) return; lock(); setAdded(true); setQty(1); onQuantityChange?.(1); }; const minus = () => { if (qty <= 1) { if (locked) return; lock(); setAdded(false); onQuantityChange?.(0); return; } const n = qty - 1; setQty(n); onQuantityChange?.(n); }; const plus = () => { const n = Math.min(qty + 1, maxQuantity); setQty(n); onQuantityChange?.(n); }; return (

{!added ? ( /* ──────────────────────────────────── STATE A — "Add to cart" Quiet, confident, one surface. ──────────────────────────────────── */ Add to cart ) : ( /* ──────────────────────────────────── STATE B — Quantity controls Same surface, wider. Minimal controls. ──────────────────────────────────── */ {/* ── Minus ── */} − {/* ── Quantity — slot-machine flip ── */} {qty} {/* ── Plus ── */} + {/* ── Divider ── */} {/* ── Price — slot-machine flip ── */} {total} )}

); } export default AddToCartButton;