52: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"] 53: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"] 54:T1889,"use client"; import { useGSAP } from "@gsap/react"; import { cn } from "@/lib/utils"; import gsap from "gsap"; import { InertiaPlugin } from "gsap/InertiaPlugin"; import Image from "next/image"; import { type ComponentPropsWithoutRef, useMemo, useRef } from "react"; import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion"; gsap.registerPlugin(InertiaPlugin); export interface MagneticCardsItem { alt?: string; src: string; } export interface MagneticCardsLayout { rotation: number; x: number; y: number; } export interface MagneticCardsProps extends Omit, "children"> { /** Extra classes applied to each card wrapper. */ cardClassName?: string; /** Cards to render, in left-to-right stacking order. */ items: MagneticCardsItem[]; /** Rest position/rotation per card. Defaults to an auto-generated symmetric fan matching `items.length`. */ layout?: MagneticCardsLayout[]; /** How much a card spins on release, scaled from horizontal cursor speed while hovering it. @default 1.5 */ rotationVelocityMultiplier?: number; /** How far a card flies on release, scaled from cursor speed while hovering it. @default 20 */ velocityMultiplier?: number; } const REMOTE_IMAGE_SRC = /^https?:\/\//; function isRemoteImageSrc(src: string): boolean { return REMOTE_IMAGE_SRC.test(src); } const DEFAULTS = { rotationVelocityMultiplier: 1.5, velocityMultiplier: 20, } as const; const LAYOUT_SPACING = 130; const LAYOUT_ROTATION_STEP = 5; function createDefaultLayout(count: number): MagneticCardsLayout[] { const mid = (count - 1) / 2; return Array.from({ length: count }, (_, index) => { const offset = index - mid; const sign = index % 2 === 0 ? 1 : -1; return { rotation: offset * LAYOUT_ROTATION_STEP + sign * 2.5, x: offset * LAYOUT_SPACING, y: sign * 10, }; }); } function staticCardStyle(rest: MagneticCardsLayout, index: number) { return { transform: `translate(-50%, -50%) translate(${rest.x}px, ${rest.y}px) rotate(${rest.rotation}deg)`, zIndex: index, }; } /** Tracks cursor speed while over a single card and flings it back to rest with GSAP's InertiaPlugin on release — same per-card model as Truus.co's MotionCards. */ function attachCardInertia( el: HTMLDivElement, rest: MagneticCardsLayout, velocityMultiplier: number, rotationVelocityMultiplier: number ): () => void { let lastX = 0; let lastY = 0; let speedX = 0; let speedY = 0; const onMove = (event: MouseEvent) => { speedX = event.clientX - lastX; speedY = event.clientY - lastY; lastX = event.clientX; lastY = event.clientY; }; const onEnter = (event: MouseEvent) => { speedX = 0; speedY = 0; lastX = event.clientX; lastY = event.clientY; }; const onLeave = () => { gsap.to(el, { inertia: { rotation: { end: rest.rotation, velocity: speedX * rotationVelocityMultiplier, }, x: { end: rest.x, velocity: speedX * velocityMultiplier }, y: { end: rest.y, velocity: speedY * velocityMultiplier }, }, }); }; el.addEventListener("mousemove", onMove); el.addEventListener("mouseenter", onEnter); el.addEventListener("mouseleave", onLeave); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseenter", onEnter); el.removeEventListener("mouseleave", onLeave); }; } function MagneticCards({ cardClassName, className, items, layout, rotationVelocityMultiplier = DEFAULTS.rotationVelocityMultiplier, velocityMultiplier = DEFAULTS.velocityMultiplier, ...props }: MagneticCardsProps) { const rootRef = useRef(null); const containerRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); const prefersReducedMotion = usePrefersReducedMotion(); const resolvedLayout = useMemo( () => layout ?? createDefaultLayout(items.length), [layout, items.length] ); useGSAP( () => { const root = rootRef.current; if (!root || prefersReducedMotion) { return; } const cleanups = resolvedLayout.flatMap((rest, index) => { const el = cardRefs.current[index]; if (!el) { return []; } gsap.set(el, { rotation: rest.rotation, x: rest.x, xPercent: -50, y: rest.y, yPercent: -50, zIndex: index, }); return [ attachCardInertia( el, rest, velocityMultiplier, rotationVelocityMultiplier ), ]; }); return () => { for (const cleanup of cleanups) { cleanup(); } }; }, { dependencies: [ items, resolvedLayout, prefersReducedMotion, velocityMultiplier, rotationVelocityMultiplier, ], scope: rootRef, } ); return (

{items.map((item, index) => { const rest = resolvedLayout[index] ?? { rotation: 0, x: 0, y: 0 }; return (

{ cardRefs.current[index] = el; }} style={ prefersReducedMotion ? staticCardStyle(rest, index) : undefined } > {item.alt

); })}

); } export { MagneticCards }; 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@soralabs","registryDependencies":["@soralabs/hooks-use-prefers-reduced-motion"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/primitives/effects/magnetic-cards/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/effects/magnetic-cards.tsx"}],"className":"h-[70svh] min-h-80"}]]}]