50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tfbc,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface LeanCardProps { children: ReactNode; /** Max lean (skew) in degrees. */ lean?: number; /** Px the card drifts toward the pointer. */ drift?: number; /** 0 to 1: how much the content leans back the other way. */ counter?: number; /** Px the shadow slides away from the pointer. */ shadowShift?: number; /** Follow speed. Higher is snappier. */ stiffness?: number; /** Soft light that follows the pointer. */ glare?: boolean; className?: string; /** Classes for the inner content layer. */ contentClassName?: string; } export function LeanCard({ children, lean = 7, drift = 10, counter = 0.6, shadowShift = 22, stiffness = 9, glare = true, className, contentClassName, }: LeanCardProps) { const root = useRef(null); const card = useRef(null); const inner = useRef(null); const light = useRef(null); useEffect(() => { const el = root.current!; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const target = { x: 0, y: 0, h: 0 }; const cur = { x: 0, y: 0, h: 0 }; let raf = 0; let prev = 0; const apply = () => { if (!card.current || !inner.current) return; // unmounted const { x, y, h } = cur; const a = -x * lean; card.current!.style.transform = `translate3d(${x * drift}px, ${y * drift * 0.6}px, 0) skewX(${a}deg) rotateX(${-y * lean * 0.6}deg) scale(${1 + h * 0.02})`; card.current!.style.boxShadow = `${-x * shadowShift}px ${18 - y * shadowShift * 0.6 + h * 10}px ${40 + h * 20}px -14px rgba(0,0,0,${0.35 + h * 0.2})`; inner.current!.style.transform = `translate3d(${-x * drift * counter}px, ${-y * drift * counter * 0.6}px, 0) skewX(${-a * counter}deg)`; if (light.current) { light.current.style.opacity = String(h); light.current.style.background = `radial-gradient(circle at ${50 + x * 50}% ${50 + y * 50}%, rgba(255,255,255,.14), transparent 60%)`; } }; const loop = (now: number) => { const dt = Math.min(0.05, (now - (prev || now)) / 1000); prev = now; const k = 1 - Math.exp(-stiffness * dt); let moving = false; for (const key of ["x", "y", "h"] as const) { cur[key] += (target[key] - cur[key]) * k; if (Math.abs(target[key] - cur[key]) > 0.0005) moving = true; } apply(); raf = moving ? requestAnimationFrame(loop) : 0; if (!moving) prev = 0; }; const kick = () => { if (!raf) raf = requestAnimationFrame(loop); }; const move = (e: PointerEvent) => { const r = el.getBoundingClientRect(); target.x = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1)); target.y = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1)); target.h = 1; kick(); }; const leave = () => { target.x = target.y = target.h = 0; kick(); }; apply(); el.addEventListener("pointermove", move); el.addEventListener("pointerleave", leave); return () => { cancelAnimationFrame(raf); el.removeEventListener("pointermove", move); el.removeEventListener("pointerleave", leave); }; }, [lean, drift, counter, shadowShift, stiffness]); return (

{children}

{glare &&

}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/lean-card.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]