弹簧拖拽

// npm install motion
"use client";

import { motion } from "motion/react";

export default function Page() {
    return (
        <div className="flex min-h-screen items-center justify-center">
            {/* 外层只管拖拽，形状交给内层：Motion 的 transform 会整个覆盖 CSS transform */}
            <motion.div
                drag
                dragSnapToOrigin
                dragTransition={{ bounceStiffness: 400, bounceDamping: 10 }}
                whileDrag={{ scale: 1.2, rotate: 7 }}
                whileHover={{ scale: 1.06 }}
                className="cursor-grab active:cursor-grabbing"
            >
                {/* 三圆角一尖角 → 转 45° 让尖角朝上 → 横向压扁纵向拉长 */}
                <div className="size-24 rounded-[12%_50%_50%_50%] bg-gradient-to-br from-cyan-100 via-sky-400 to-blue-700 [transform:scaleX(0.72)_scaleY(1.24)_rotate(45deg)]" />
            </motion.div>
        </div>
    );
}