"use client"; import { useMemo, useRef, useState } from "react"; import { motion, useMotionValue, useTransform, useVelocity, type MotionValue, } from "framer-motion"; import { GripVertical, Radio, TrendingUp, ArrowUpRight } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; export function DraggableCard({ children, className, constraintsRef, hint = "Drag me around", }: { children: React.ReactNode; className?: string; constraintsRef: React.RefObject; hint?: string; }) { const x = useMotionValue(0); const y = useMotionValue(0); const [dragging, setDragging] = useState(false); const [thrown, setThrown] = useState(false); // Rotate toward the throw: a base tilt from horizontal offset plus a // sharper kick from horizontal velocity while flinging. const velX = useVelocity(x); const tiltFromX = useTransform(x, [-180, 180], [-14, 14], { clamp: true }); const tiltFromVel = useTransform(velX, [-1600, 1600], [-16, 16], { clamp: true, }); const rotate = useTransform( [tiltFromX, tiltFromVel] as MotionValue[], ([a, b]) => Math.round((a + b) * 100) / 100 ); return ( { setDragging(true); setThrown(true); }} onDragEnd={() => setDragging(false)} whileHover={{ scale: 1.02 }} whileDrag={{ scale: 1.04 }} style={{ x, y, rotate }} className={cn( "relative z-10 cursor-grab touch-none active:cursor-grabbing", className )} > {/* Inner layer floats gently at rest so a static preview feels alive. */} {/* Thin bright top edge */}

{/* Soft brand wash */}

{children} {/* Drag hint, fades once the card has been thrown */} {hint} ); } function Sparkline() { // Deterministic seeded points, rounded for hydration safety. const { line, area, dotX, dotY } = useMemo(() => { const w = 232; const h = 46; const n = 24; const seed = (i: number) => Math.abs(Math.sin(i * 12.9898 + 4.1)) % 1; const pts = Array.from({ length: n }, (_, i) => { const t = i / (n - 1); const base = t * 0.7 + 0.15; const noise = (seed(i) - 0.5) * 0.28; const val = Math.min(0.95, Math.max(0.06, base + noise)); return { x: Math.round(t * w * 100) / 100, y: Math.round((h - val * h) * 100) / 100, }; }); const d = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" "); const last = pts[pts.length - 1]; return { line: d, area: `${d} L${w},${h} L0,${h} Z`, dotX: last.x, dotY: last.y, }; }, []); return ( ); } export default function Demo() { const constraintsRef = useRef(null); return (

{/* Ambient depth so the drag space reads as intentional at rest */}

Live signal

+24.8% 7d

Momentum across 1,204 sessions this week.

Weekly report Open

); }

Draggable Card