motion.tsx

"use client";

import { motion } from "framer-motion";

export const AnimatedCard = () => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{
        duration: 0.3,
        type: "spring",
        stiffness: 260,
        damping: 20,
      }}
      whileHover={{ scale: 1.05 }}
      className="p-6 bg-white rounded-xl shadow-lg"
    >
      <h3 className="text-xl font-bold">动效卡片</h3>
      <p>优雅的弹性动画效果</p>
    </motion.div>
  );
};