4e: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"] 4f: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"] 50:T6abd,"use client"; import { useRef, useState } from "react"; import { gsap } from "gsap"; import { Flip } from "gsap/Flip"; import { Draggable } from "gsap/Draggable"; import { useGSAP } from "@gsap/react"; // A hand of photo cards. At rest they sit in a tight stack; hover (or focus) opens them into an arc // around a pivot far below the stack, like a hand of playing cards. Pointing at a card lifts it. // Clicking a card sends it to the middle at full size with GSAP Flip and turns it over in 3D to // show its back. Any card can be dragged out of the hand and springs back when you let go. export type CardFanCard = { /** The photo on the front. */ src: string; /** Describes the photo for screen readers. */ alt: string; /** The title on the back. */ title: string; /** One line of text on the back. */ text: string; }; export type CardFanProps = { /** The cards, left to right. Four to eight look best. */ cards: CardFanCard[]; /** How wide the open fan is, from the first card to the last, in degrees. */ spread?: number; /** How far below the cards the fan's pivot sits, in pixels. Bigger is a flatter arc. */ radius?: number; /** How far a card rises when you point at it, in pixels. */ lift?: number; /** How long the trip to the middle and the turn take, in seconds. */ flipDuration?: number; /** Width of a card in the hand, in pixels (smaller on narrow screens). */ cardWidth?: number; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Extra classes for both faces of every card, e.g. a radius or a shadow. */ cardClassName?: string; /** Classes for the layer behind an open card, e.g. a tint or a blur. */ backdropClassName?: string; }; // How open the hand is at rest, as a share of the full spread const REST = 0.16; // Cards are 4:5, like the photos const ASPECT = 1.25; export function CardFan({ cards, spread = 64, radius = 560, lift = 36, flipDuration = 0.9, cardWidth = 210, className = "", cardClassName = "rounded-[14px] shadow-[0_24px_48px_-20px_rgba(0,0,0,0.45),0_2px_6px_-2px_rgba(0,0,0,0.2)]", backdropClassName = "bg-black/25", }: CardFanProps) { const boxRef = useRef(null); const backdropRef = useRef(null); const cardRefs = useRef<(HTMLButtonElement | null)[]>([]); // True once the deal-in has played, so a prop change re-lays the hand instead of dealing again const dealt = useRef(false); // Which card shows its back (drives the blurred back photo and what screen readers hear) const [turned, setTurned] = useState(-1); // Roving tab stop: one card is in the tab order, arrows move between them const [tabStop, setTabStop] = useState(0); useGSAP( (_context, contextSafe) => { const box = boxRef.current; const backdrop = backdropRef.current; const shells = cardRefs.current.slice(0, cards.length).filter((card): card is HTMLButtonElement => card !== null); if (!box || !backdrop || shells.length === 0 || !contextSafe) return; gsap.registerPlugin(Flip, Draggable); const lifters = shells.map((shell) => shell.querySelector("[data-fan-lift]")!); const flippers = shells.map((shell) => shell.querySelector("[data-fan-flip]")!); const backs = shells.map((shell) => shell.querySelector("[data-fan-back]")!); const count = shells.length; const middle = (count - 1) / 2; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const touch = window.matchMedia("(hover: none)").matches; const doc = box.ownerDocument; // Everything the layout needs, measured from the box const size = { boxW: 0, boxH: 0, cardW: 0, cardH: 0, pivot: radius, centreY: 0, bigW: 0, spread }; const measure = () => { size.boxW = box.clientWidth; size.boxH = box.clientHeight; // Phones get wider cards (a share of a small box), so the inner cards stay big enough to tap const narrow = size.boxW < 600; size.cardW = Math.min(cardWidth, size.boxW * (narrow ? 0.4 : 0.34), (size.boxH * 0.46) / ASPECT); size.cardH = size.cardW * ASPECT; // On a narrow box the pivot gets pulled in hard, so open the fan wider to keep the cards apart size.spread = narrow ? Math.min(spread * 1.35, 120) : spread; // Pull the pivot in when the open fan would spill past the sides of the box const half = (size.spread / 2) * (Math.PI / 180); // The end card leans out a little further when a neighbour is pointed at (see seat()) const edge = half + Math.min(4, (size.spread / count) * 0.4) * (Math.PI / 180); // How far the end card's outer corner reaches past its centre once it is rotated const reach = (size.cardW / 2) * Math.cos(edge) + (size.cardH / 2) * Math.sin(edge); const room = size.boxW / 2 - 16 - reach; size.pivot = edge > 0 && Math.sin(edge) * radius > room ? Math.max(room / Math.sin(edge), 0) : radius; // Centre the whole open hand (raised middle card down to the dipped end corners), so big // cards on a short box don't sink into whatever sits below the hand const above = size.cardH / 2 + lift; const below = (1 - Math.cos(half)) * size.pivot + (size.cardW / 2) * Math.sin(half) + (size.cardH / 2) * Math.cos(half); size.centreY = size.boxH * 0.5 + (above - below) / 2; size.bigW = Math.min(440, size.boxW - 48, (size.boxH - 72) / ASPECT); }; // The state of the hand. Plain variables: they change on every pointer move and React // doesn't need to hear about it. let fanned = reduced; let hovered = -1; let open = -1; let dragging = -1; let ready = false; // A prop change rebuilds the context while the pointer may be resting over the hand let pointerInside = box.matches(":hover"); // A prop change rebuilds the context while a card may still have focus let focusInside = box.contains(doc.activeElement); let visible = true; let justDragged = false; // Cards in the middle of a Flip are left alone by the layout const flying = new Set(); // Where card i sits: on a circle around a pivot below the hand, rotated to face out from it const seat = (i: number, amount: number, around: number) => { const t = count > 1 ? (i - middle) / (count - 1) : 0; let degrees = t * size.spread * amount; // Neighbours lean away from the card you point at, so it has room to rise if (around >= 0 && around !== i) degrees += (i < around ? -1 : 1) * Math.min(4, (size.spread / count) * 0.4) * amount; const angle = degrees * (Math.PI / 180); // x and y place the card's top-left corner (Flip works in plain pixels, so no xPercent) return { x: size.boxW / 2 + Math.sin(angle) * size.pivot - size.cardW / 2, y: size.centreY + (1 - Math.cos(angle)) * size.pivot - size.cardH / 2, rotation: degrees, }; }; // Where an open card goes: big, in the middle of the box const openSpot = () => ({ x: (size.boxW - size.bigW) / 2, y: (size.boxH - size.bigW * ASPECT) / 2, width: size.bigW, height: size.bigW * ASPECT, }); // contextSafe: layout also runs from tween and observer callbacks, and every tween it makes // must belong to this context so a prop change reverts it const layout = contextSafe((duration = 0.8) => { if (!ready) return; const amount = fanned ? 1 : REST; shells.forEach((shell, i) => { if (i === open || i === dragging || flying.has(i)) return; // The lifted card comes to the front so its neighbours don't cover it gsap.set(shell, { zIndex: i === hovered && open < 0 ? count + 1 : i + 1 }); gsap.to(shell, { ...seat(i, amount, fanned ? hovered : -1), opacity: open >= 0 ? 0.35 : 1, duration: reduced ? 0 : duration, ease: "power3.out", overwrite: "auto", }); const rising = i === hovered && open < 0; gsap.to(lifters[i]!, { y: rising ? -lift : open >= 0 ? 28 : 0, scale: rising ? 1.03 : 1, duration: reduced ? 0.15 : 0.55, ease: rising ? "back.out(2)" : "power3.out", overwrite: "auto", }); }); }); const setFanned = (next: boolean) => { if (reduced) next = true; if (next === fanned) return; fanned = next; layout(); }; measure(); gsap.set(shells, { width: size.cardW, height: size.cardH, zIndex: (i: number) => i + 1, force3D: true }); gsap.set(flippers, { transformPerspective: 1400, rotationY: 0 }); // Reduced motion: the back sits flat on top of the front and fades in instead of turning round gsap.set(backs, reduced ? { rotationY: 0, opacity: 0 } : { rotationY: 180, opacity: 1 }); gsap.set(backdrop, { autoAlpha: 0 }); if (touch && !reduced) fanned = visible; if (reduced || dealt.current) { // Already dealt (or no motion): put the hand straight down gsap.set(shells, { x: (i: number) => seat(i, fanned ? 1 : REST, -1).x, y: (i: number) => seat(i, fanned ? 1 : REST, -1).y, rotation: (i: number) => seat(i, fanned ? 1 : REST, -1).rotation, opacity: 1 }); ready = true; if (!reduced) { // A prop just changed: open the hand and raise the middle card for a moment so the change shows fanned = true; hovered = Math.round(middle); layout(0.7); gsap.delayedCall(1.6, () => { // Keep the card under a resting pointer raised, else the focused one const under = shells.findIndex((shell) => shell.matches(":hover")); hovered = under >= 0 && !touch ? under : shells.indexOf(doc.activeElement as HTMLButtonElement); pointerInside = pointerInside || box.matches(":hover"); setFanned(pointerInside || focusInside || (touch && visible)); layout(); }); } } else { // The deal: cards rise from below the box one after another and settle into the stack gsap.set(shells, { x: (i: number) => seat(i, REST, -1).x + (i - middle) * 30, y: size.boxH + size.cardH, rotation: (i: number) => (i - middle) * -14, opacity: 1, }); gsap.to(shells, { x: (i: number) => seat(i, REST, -1).x, y: (i: number) => seat(i, REST, -1).y, rotation: (i: number) => seat(i, REST, -1).rotation, duration: 1.3, ease: "expo.out", stagger: 0.07, delay: 0.15, onComplete: () => { dealt.current = true; ready = true; layout(); }, }); } const openCard = (i: number) => { const shell = shells[i]!; open = i; hovered = -1; flying.add(i); setTurned(i); draggables[i]?.disable(); Flip.killFlipsOf(shell); // A hover tween or a drag spring may still be moving this card: stop it, or it keeps // pulling the open card back toward its seat (rotated, off-centre) while the Flip runs gsap.killTweensOf(shell, "x,y,rotation,opacity,zIndex"); // Flip: note where the card is now, jump it to its open spot, then animate from the old spot const state = Flip.getState(shell); gsap.set(shell, { ...openSpot(), rotation: 0, zIndex: 50, opacity: 1 }); gsap.to(backdrop, { autoAlpha: 1, duration: reduced ? 0.2 : flipDuration * 0.7, ease: "power2.out" }); if (reduced) { gsap.fromTo(shell, { opacity: 0 }, { opacity: 1, duration: 0.25 }); gsap.set(lifters[i]!, { y: 0, scale: 1 }); gsap.to(backs[i]!, { opacity: 1, duration: 0.25 }); flying.delete(i); } else { Flip.from(state, { duration: flipDuration, ease: "expo.inOut", scale: true, onComplete: contextSafe(() => { flying.delete(i); // Backstop: if the box changed size during the flight, land on the new centre if (open === i) gsap.set(shell, { ...openSpot(), rotation: 0, scaleX: 1, scaleY: 1 }); }), }); gsap.to(lifters[i]!, { y: 0, scale: 1, duration: flipDuration * 0.6, ease: "power2.inOut", overwrite: "auto" }); // The turn starts a beat after the flight so the card leaves the hand face up gsap.to(flippers[i]!, { rotationY: 180, duration: flipDuration * 0.9, delay: flipDuration * 0.1, ease: "power3.inOut", overwrite: "auto" }); } layout(0.7); }; const closeCard = () => { const i = open; if (i < 0) return; const shell = shells[i]!; open = -1; flying.add(i); Flip.killFlipsOf(shell); gsap.killTweensOf(shell, "x,y,rotation,opacity,zIndex"); const state = Flip.getState(shell); gsap.set(shell, { ...seat(i, fanned ? 1 : REST, -1), width: size.cardW, height: size.cardH }); gsap.to(backdrop, { autoAlpha: 0, duration: reduced ? 0.2 : flipDuration * 0.6, ease: "power2.out" }); const land = contextSafe(() => { flying.delete(i); gsap.set(shell, { zIndex: i + 1 }); draggables[i]?.enable(); // Focus came back to this card (Escape or Enter), so it stays raised like any focused card if (doc.activeElement === shell && open < 0) hovered = i; setTurned((current) => (current === i ? -1 : current)); layout(0.4); }); if (reduced) { gsap.set(backs[i]!, { opacity: 0 }); gsap.fromTo(shell, { opacity: 0 }, { opacity: 1, duration: 0.25 }); land(); } else { Flip.from(state, { duration: flipDuration * 0.85, ease: "expo.inOut", scale: true, onComplete: land }); gsap.to(flippers[i]!, { rotationY: 0, duration: flipDuration * 0.75, ease: "power3.inOut", overwrite: "auto" }); } layout(0.8); }; // Dragging: a card follows the pointer, tilts with its speed and springs back to its seat. // The work lives in contextSafe functions (Draggable calls its callbacks outside the context, // and contextSafe replaces `this`, so the Draggable's numbers are passed in instead). const dragStart = contextSafe((i: number) => { dragging = i; justDragged = true; gsap.set(shells[i]!, { zIndex: 45 }); gsap.to(lifters[i]!, { y: 0, scale: 1.05, duration: 0.3, ease: "power3.out", overwrite: "auto" }); }); const dragMove = contextSafe((i: number, deltaX: number) => { const lean = gsap.utils.clamp(-16, 16, deltaX * 1.2); gsap.to(shells[i]!, { rotation: lean, duration: 0.5, ease: "power3.out", overwrite: "auto" }); }); const dragRelease = contextSafe((i: number) => { const shell = shells[i]!; // The click that follows a drag must not open the card gsap.delayedCall(0.05, () => { justDragged = false; }); if (dragging !== i) return; dragging = -1; // The spring home is its own tween, so the layout leaves this card alone until it lands flying.add(i); gsap.to(shell, { ...seat(i, fanned ? 1 : REST, fanned ? hovered : -1), opacity: 1, duration: reduced ? 0 : 1.1, ease: "elastic.out(1, 0.6)", overwrite: "auto", onComplete: contextSafe(() => { // If the card was opened while springing, this tween was killed; still, never touch an open card if (open === i) return; flying.delete(i); gsap.set(shell, { zIndex: i + 1 }); layout(0.4); }), }); gsap.to(lifters[i]!, { scale: 1, duration: 0.4, ease: "power3.out", overwrite: "auto" }); layout(); }); const draggables = shells.map((shell, i) => { const [draggable] = Draggable.create(shell, { type: "x,y", minimumMovement: 6, zIndexBoost: false, cursor: "grab", activeCursor: "grabbing", onDragStart: () => dragStart(i), onDrag() { dragMove(i, this.deltaX); }, onRelease: () => dragRelease(i), }); return draggable; }); // Where the last finger came down. Chrome's touch adjustment can hand a tap on a thin visible // sliver of one card to the neighbour whose box overlaps it, so a tap opens the card that is // actually drawn under the finger instead const press = { x: 0, y: 0, touch: false }; const onPress = (event: PointerEvent) => { press.x = event.clientX; press.y = event.clientY; press.touch = event.pointerType !== "mouse"; }; const onClick = contextSafe((event: MouseEvent) => { if (justDragged) return; let i = shells.indexOf(event.currentTarget as HTMLButtonElement); if (press.touch && open < 0) { const drawn = shells.indexOf(doc.elementFromPoint(press.x, press.y)?.closest("button") as HTMLButtonElement); if (drawn >= 0) i = drawn; } if (i < 0) return; if (i === open) closeCard(); else if (open < 0) openCard(i); }); const onCardEnter = contextSafe((event: PointerEvent) => { if (event.pointerType !== "mouse" || dragging >= 0) return; hovered = shells.indexOf(event.currentTarget as HTMLButtonElement); if (fanned) layout(0.6); }); const onCardLeave = contextSafe((event: PointerEvent) => { if (event.pointerType !== "mouse") return; if (hovered === shells.indexOf(event.currentTarget as HTMLButtonElement)) hovered = -1; layout(0.6); }); // The hand opens while the pointer is near it: inside the cards' combined outline plus a margin const onBoxMove = contextSafe((event: PointerEvent) => { if (event.pointerType !== "mouse" || open >= 0) return; let left = Infinity; let top = Infinity; let right = -Infinity; let bottom = -Infinity; for (const shell of shells) { const rect = shell.getBoundingClientRect(); left = Math.min(left, rect.left); top = Math.min(top, rect.top); right = Math.max(right, rect.right); bottom = Math.max(bottom, rect.bottom); } const margin = 48; pointerInside = event.clientX > left - margin && event.clientX < right + margin && event.clientY > top - margin && event.clientY < bottom + margin; if (dragging < 0) setFanned(pointerInside || focusInside); }); const onBoxLeave = contextSafe(() => { pointerInside = false; hovered = -1; if (dragging < 0 && open < 0) setFanned(focusInside || (touch && visible)); }); // Keyboard: focus opens the hand and lifts the focused card; arrows walk along it const onFocusIn = contextSafe((event: FocusEvent) => { const i = shells.indexOf(event.target as HTMLButtonElement); if (i < 0) return; focusInside = true; setTabStop(i); if (open < 0) { hovered = i; fanned = true; layout(0.6); } }); const onFocusOut = contextSafe((event: FocusEvent) => { if (box.contains(event.relatedTarget as Node | null)) return; focusInside = false; hovered = -1; setFanned(pointerInside || (touch && visible)); layout(0.6); }); const onKeyDown = contextSafe((event: KeyboardEvent) => { // Enter or Space clicks the focused card itself, not whatever was last under a finger press.touch = false; const i = shells.indexOf(doc.activeElement as HTMLButtonElement); // While a card is open, Tab stays on it rather than leaving the card open behind its backdrop if (event.key === "Tab" && open >= 0 && box.contains(doc.activeElement)) { event.preventDefault(); shells[open]?.focus({ preventScroll: true }); return; } if (event.key === "Escape" && open >= 0) { event.preventDefault(); const was = open; closeCard(); shells[was]?.focus({ preventScroll: true }); return; } if (i < 0 || open >= 0) return; let next = -1; if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (i + 1) % count; else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (i - 1 + count) % count; else if (event.key === "Home") next = 0; else if (event.key === "End") next = count - 1; if (next < 0) return; event.preventDefault(); shells[next]!.focus({ preventScroll: true }); }); const onBackdropClick = contextSafe(() => closeCard()); shells.forEach((shell) => { shell.addEventListener("click", onClick); shell.addEventListener("pointerenter", onCardEnter); shell.addEventListener("pointerleave", onCardLeave); }); box.addEventListener("pointerdown", onPress, true); box.addEventListener("pointermove", onBoxMove); box.addEventListener("pointerleave", onBoxLeave); box.addEventListener("focusin", onFocusIn); box.addEventListener("focusout", onFocusOut); backdrop.addEventListener("click", onBackdropClick); // Escape works wherever focus is on the page, as long as a card is open doc.addEventListener("keydown", onKeyDown); // Touch screens have no hover, so the hand opens whenever it's on screen const watcher = new IntersectionObserver( contextSafe((entries: IntersectionObserverEntry[]) => { visible = entries[0]?.isIntersecting ?? true; if (touch && open < 0 && dragging < 0) setFanned(visible); }), ); watcher.observe(box); const resizer = new ResizeObserver( contextSafe(() => { measure(); shells.forEach((shell, i) => { if (i === open) { // A Flip in flight would still land on the centre it measured before the resize: // finish it now, then put the card on the new centre (the turn keeps going) Flip.killFlipsOf(shell, true); // Anything else still moving the card would drag it off the new centre gsap.killTweensOf(shell, "x,y,rotation,scaleX,scaleY,width,height"); flying.delete(i); gsap.set(shell, { ...openSpot(), rotation: 0, scaleX: 1, scaleY: 1 }); } else gsap.set(shell, { width: size.cardW, height: size.cardH }); }); layout(0); }), ); resizer.observe(box); return () => { shells.forEach((shell) => { shell.removeEventListener("click", onClick); shell.removeEventListener("pointerenter", onCardEnter); shell.removeEventListener("pointerleave", onCardLeave); Flip.killFlipsOf(shell); }); box.removeEventListener("pointerdown", onPress, true); box.removeEventListener("pointermove", onBoxMove); box.removeEventListener("pointerleave", onBoxLeave); box.removeEventListener("focusin", onFocusIn); box.removeEventListener("focusout", onFocusOut); backdrop.removeEventListener("click", onBackdropClick); doc.removeEventListener("keydown", onKeyDown); draggables.forEach((draggable) => draggable?.kill()); watcher.disconnect(); resizer.disconnect(); setTurned(-1); }; }, { scope: boxRef, dependencies: [cards.length, spread, radius, lift, flipDuration, cardWidth], revertOnUpdate: true }, ); return (

{cards.map((card, index) => ( ))}

); } 4d:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@gsap/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/card-fan/card-fan.tsx","content":"$50","type":"registry:component","target":"components/dimaac/card-fan.tsx"}],"className":"h-[70svh] min-h-80"}]]}]