"use client"; import { useRef } from "react"; import { motion, useAnimationFrame, useMotionValue, useMotionTemplate, useSpring, useTransform, } from "framer-motion"; import { Move3d } from "lucide-react"; import { cn } from "@/lib/utils"; const round = (n: number) => Math.round(n * 100) / 100; const springConfig = { stiffness: 150, damping: 18, mass: 0.6 }; export function WobbleCard({ children, className, }: { children: React.ReactNode; className?: string; }) { const ref = useRef(null); // Raw cursor position, normalized to [-0.5, 0.5]. const px = useMotionValue(0); const py = useMotionValue(0); const mx = useSpring(px, springConfig); const my = useSpring(py, springConfig); // Continuous idle drift, updated per frame from a deterministic lissajous. const idleX = useMotionValue(0); const idleY = useMotionValue(0); // Blend between idle (0) and cursor-driven (1) motion. const hover = useMotionValue(0); const hoverS = useSpring(hover, { stiffness: 120, damping: 22 }); useAnimationFrame((t) => { const s = t / 1000; idleX.set(Math.sin(s * 0.62)); idleY.set(Math.sin(s * 0.44 + 1.7)); }); // Every transform is a weighted mix: idle amplitude at rest, cursor amplitude on hover. const rotateY = useTransform(() => { const h = hoverS.get(); return round(idleX.get() * 4.5 * (1 - h) + mx.get() * 28 * h); }); const rotateX = useTransform(() => { const h = hoverS.get(); return round(-(idleY.get() * 3.8 * (1 - h) + my.get() * 24 * h)); }); const tx = useTransform(() => { const h = hoverS.get(); return round(idleX.get() * 4 * (1 - h) + mx.get() * 16 * h); }); const ty = useTransform(() => { const h = hoverS.get(); return round(idleY.get() * 3 * (1 - h) + my.get() * 12 * h); }); const skewX = useTransform(() => { const h = hoverS.get(); return round(idleX.get() * 1.4 * (1 - h) + mx.get() * 5 * h); }); const scale = useTransform(hoverS, (h) => round(1 + h * 0.03)); // Glare + glow track the same blended field, so they drift at rest too. const glareX = useTransform(() => { const h = hoverS.get(); return round(50 + (idleX.get() * (1 - h) + mx.get() * 2 * h) * 26); }); const glareY = useTransform(() => { const h = hoverS.get(); return round(50 + (idleY.get() * (1 - h) + my.get() * 2 * h) * 26); }); const glare = useMotionTemplate`radial-gradient(180px circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.14), transparent 58%)`; const glowOpacity = useTransform(hoverS, (h) => round(0.32 + h * 0.5)); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; px.set((e.clientX - rect.left) / rect.width - 0.5); py.set((e.clientY - rect.top) / rect.height - 0.5); } return (

hover.set(1)} onMouseLeave={() => { hover.set(0); px.set(0); py.set(0); }} className={cn("relative [perspective:1100px]", className)} > {/* Breathing glow behind the card. */} {/* Tilt-linked specular glare. */} {/* Thin bright top edge. */}

{children}

); } export default function Demo() { return (

Depth on every surface

The panel leans toward your cursor, then keeps a slow living drift when you step away. One spring, no textures, no images.

Live at rest spring physics

); }

Wobble Card

Depth on every surface