61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:Tdbd,"use client"; import * as React from "react"; import { cn } from "../lib/cn"; import { useReducedMotion } from "../hooks/use-reduced-motion"; export interface Card3DProps extends React.HTMLAttributes { /** Max tilt in degrees at the edges. Default: 12. */ tilt?: number; /** Show a moving light glare across the surface. Default: true. */ glare?: boolean; /** How far the card lifts toward the viewer on hover (px). Default: 40. */ lift?: number; children?: React.ReactNode; } /** * A card that tilts in 3D toward the cursor with a perspective transform and an * optional light glare. * * The rotation is written to CSS custom properties on pointer move via * `requestAnimationFrame`, so tracking the cursor never re-renders React — the * transform reads `var(--rx)` / `var(--ry)`. Tilt is disabled under reduced * motion. Add `preserve-3d` children (with `translateZ`) for layered depth. */ export const Card3D = React.forwardRef( function Card3D( { className, children, tilt = 12, glare = true, lift = 40, style, onPointerMove, onPointerEnter, onPointerLeave, ...props }, ref, ) { const reduced = useReducedMotion(); const innerRef = React.useRef(null); const frame = React.useRef(null); const setRefs = React.useCallback( (node: HTMLDivElement | null) => { innerRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }, [ref], ); const handleMove = (event: React.PointerEvent) => { onPointerMove?.(event); const node = innerRef.current; if (reduced || !node) return; const rect = node.getBoundingClientRect(); const px = (event.clientX - rect.left) / rect.width; const py = (event.clientY - rect.top) / rect.height; if (frame.current !== null) cancelAnimationFrame(frame.current); frame.current = requestAnimationFrame(() => { node.style.setProperty("--ry", `${(px - 0.5) * tilt * 2}deg`); node.style.setProperty("--rx", `${(0.5 - py) * tilt * 2}deg`); node.style.setProperty("--gx", `${px * 100}%`); node.style.setProperty("--gy", `${py * 100}%`); }); }; const handleEnter = (event: React.PointerEvent) => { onPointerEnter?.(event); innerRef.current?.style.setProperty("--active", "1"); }; const handleLeave = (event: React.PointerEvent) => { onPointerLeave?.(event); const node = innerRef.current; if (!node) return; node.style.setProperty("--active", "0"); node.style.setProperty("--rx", "0deg"); node.style.setProperty("--ry", "0deg"); }; return (

{children} {glare ?

: null}

); }, ); 60:["$","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,["$","$L61",null,{"namespace":"@stacklyui","registryDependencies":["@stacklyui/cn","@stacklyui/use-reduced-motion"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"../../packages/ui/src/components/card-3d.tsx","content":"$63","type":"registry:ui","target":"components/stackly/card-3d.tsx"}],"className":"h-[70svh] min-h-80"}]]}]