Interactive 120 FPS Physics Swipe Card Deck

import React, { useState } from 'react';
import { motion, useMotionValue, useTransform } from 'framer-motion';

export function SwipeCard({ onDismiss, children }) {
  const x = useMotionValue(0);
  const rotate = useTransform(x, [-200, 200], [-18, 18]);
  const opacity = useTransform(x, [-200, -120, 0, 120, 200], [0, 1, 1, 1, 0]);

  return (
    <motion.div
      style={{ x, rotate, opacity }}
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      onDragEnd={(e, { offset, velocity }) => {
        const swipe = Math.abs(offset.x) * velocity.x;
        if (offset.x > 140 || swipe > 1000) {
          onDismiss?.('right');
        } else if (offset.x < -140 || swipe < -1000) {
          onDismiss?.('left');
        }
      }}
      className="w-80 h-96 bg-white rounded-3xl shadow-xl border border-stone-200 cursor-grab active:cursor-grabbing p-6 flex flex-col justify-between select-none"
    >
      {children || <div className="text-stone-800 font-semibold">ExodeUI Swipe Card</div>}
    </motion.div>
  );
}