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:T3f8c,"use client"; import { useId, useRef, useState, useSyncExternalStore, type MouseEvent } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A list of projects. Hover a row and a photo grows at the cursor, follows it around and slides to // that row's picture. Tab to a row and the photo shows up beside it, so keyboard users get it too. // On touch screens there is no cursor, so each row opens like an accordion and shows its photo inline. // The look comes from `currentColor`: the list takes the text colour of whatever it sits in. export type ProjectHoverItem = { /** The big name on the left of the row. */ title: string; /** The small line on the right (a year, a discipline). */ subtitle: string; /** The photo shown for this row. */ image: string; /** Describes the photo for screen readers. Defaults to the title. */ alt?: string; /** Makes the row a link. Without it the row is a button. */ href?: string; }; export type ProjectHoverSectionProps = { /** The rows, top to bottom. Three to eight look best. */ projects: ProjectHoverItem[]; /** Width of the floating photo, in pixels. */ thumbnailWidth?: number; /** Height of the floating photo, in pixels. */ thumbnailHeight?: number; /** Corner radius of the floating photo, in pixels. */ thumbnailRadius?: number; /** How long the photo takes to catch up with the cursor, in seconds. */ followDuration?: number; /** How the photo changes between rows: "slide" scrolls the strip, "fade" cross-fades. */ transition?: "slide" | "fade"; /** How far the title and subtitle of the hovered row move apart, in pixels. */ shift?: number; /** The opacity of the hovered row, from 0 to 1. 1 leaves it alone. */ dimOpacity?: number; /** The most the photo leans into the direction of the cursor, in degrees. 0 keeps it straight. */ tilt?: number; /** Called when a row is clicked or pressed. */ onSelect?: (project: ProjectHoverItem, index: number) => void; /** Extra classes for the outer box. It is as wide as its parent and as tall as the list. */ className?: string; }; // A mouse (or a pen) that can hover. Everything else gets the tap-to-open accordion. const FINE_POINTER = "(hover: hover) and (pointer: fine)"; function subscribeToPointer(onChange: () => void) { const query = window.matchMedia(FINE_POINTER); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } // The server and the first client render say "mouse", then this settles on the real answer. // The layout itself is decided in CSS, so nothing jumps; this only drives the aria attributes. function useTouchLayout() { return useSyncExternalStore( subscribeToPointer, () => !window.matchMedia(FINE_POINTER).matches, () => false, ); } export function ProjectHoverSection({ projects, thumbnailWidth = 380, thumbnailHeight = 250, thumbnailRadius = 10, followDuration = 0.4, transition = "slide", shift = 15, dimOpacity = 0.5, tilt = 5, onSelect, className = "", }: ProjectHoverSectionProps) { const boxRef = useRef(null); const listRef = useRef(null); const thumbRef = useRef(null); const stripRef = useRef(null); const [openIndex, setOpenIndex] = useState(null); const touchLayout = useTouchLayout(); const panelId = useId(); useGSAP( () => { const box = boxRef.current; const list = listRef.current; const thumb = thumbRef.current; const strip = stripRef.current; if (!box || !list || !thumb || !strip) return; const rows = gsap.utils.toArray("[data-row]", list); const slides = gsap.utils.toArray("[data-slide]", strip); const last = rows.length - 1; if (last < 0) return; // matchMedia re-runs this block if the visitor plugs in a mouse or flips the motion setting const mm = gsap.matchMedia(); mm.add({ fine: FINE_POINTER, calm: "(prefers-reduced-motion: reduce)" }, (context, contextSafe) => { const { fine, calm } = context.conditions as { fine: boolean; calm: boolean }; if (!fine || !contextSafe) return; // contextSafe returns a plain Function, so give the handler its own type back const safe = void>(handler: Handler) => contextSafe(handler) as Handler; // The photo starts hidden, centred on its own middle so x and y are the cursor position. // With reduced motion it never scales or travels: it just appears, and fades. gsap.set(thumb, { xPercent: -50, yPercent: -50, scale: calm ? 1 : 0, autoAlpha: 0, force3D: true }); // Slide: pictures sit one below the other and the strip moves. Fade: they sit on top of each other. gsap.set(slides, { yPercent: (i: number) => (transition === "slide" ? i * 100 : 0), autoAlpha: (i: number) => (transition === "slide" || i === 0 ? 1 : 0) }); gsap.set(strip, { yPercent: 0 }); const moveX = calm ? null : gsap.quickTo(thumb, "x", { duration: followDuration, ease: "power3.out" }); const moveY = calm ? null : gsap.quickTo(thumb, "y", { duration: followDuration, ease: "power3.out" }); const lean = calm || tilt === 0 ? null : gsap.quickTo(thumb, "rotation", { duration: 0.6, ease: "power3.out" }); // When the cursor stops, the photo straightens up const straighten = lean ? gsap.delayedCall(0.08, () => lean(0)).pause() : null; let shown = false; let pointerInside = false; let activeIndex = -1; let lastClientX = 0; const markActive = (index: number) => { rows.forEach((row, i) => { if (i === index) { row.dataset.active = "true"; if (!calm) row.dataset.shift = "true"; } else { delete row.dataset.active; delete row.dataset.shift; } }); }; const showPicture = (index: number, instant: boolean) => { if (transition === "slide") { gsap.to(strip, { yPercent: -100 * index, duration: instant || calm ? 0 : 0.4, ease: "power2.out", overwrite: "auto" }); } else { gsap.to(slides, { autoAlpha: (i: number) => (i === index ? 1 : 0), duration: instant || calm ? 0 : 0.4, ease: "power2.out", overwrite: "auto" }); } }; // x and y are measured from the top left corner of the box the photo lives in const reveal = (index: number, x: number, y: number) => { const wasShown = shown; if (!wasShown) { gsap.set(thumb, { x, y }); // One call in the quickTo functions' own tween, so they start from here too moveX?.(x); moveY?.(y); } if (index !== activeIndex) showPicture(index, !wasShown); activeIndex = index; markActive(index); shown = true; gsap.to(thumb, { scale: 1, autoAlpha: 1, duration: calm ? 0.15 : 0.4, ease: "power2.out", overwrite: "auto" }); }; const hide = () => { if (!shown) return; shown = false; activeIndex = -1; markActive(-1); lean?.(0); gsap.to(thumb, { scale: calm ? 1 : 0, autoAlpha: 0, duration: calm ? 0.1 : 0.3, ease: "power2.out", overwrite: "auto" }); }; const toBox = (clientX: number, clientY: number) => { const rect = box.getBoundingClientRect(); return { x: clientX - rect.left, y: clientY - rect.top }; }; const isMouse = (event: PointerEvent) => event.pointerType === "mouse" || event.pointerType === "pen"; const onListEnter = safe((event: PointerEvent) => { if (isMouse(event)) pointerInside = true; }); const onListMove = safe((event: PointerEvent) => { if (!isMouse(event) || !shown) return; const { x, y } = toBox(event.clientX, event.clientY); if (moveX && moveY) { moveX(x); moveY(y); } else { gsap.set(thumb, { x, y }); } if (lean && straighten) { lean(gsap.utils.clamp(-tilt, tilt, (event.clientX - lastClientX) * 0.5)); straighten.restart(true); } lastClientX = event.clientX; }); const onListLeave = safe((event: PointerEvent) => { if (!isMouse(event)) return; pointerInside = false; hide(); }); const cleanups: (() => void)[] = []; list.addEventListener("pointerenter", onListEnter); list.addEventListener("pointermove", onListMove); list.addEventListener("pointerleave", onListLeave); cleanups.push(() => { list.removeEventListener("pointerenter", onListEnter); list.removeEventListener("pointermove", onListMove); list.removeEventListener("pointerleave", onListLeave); }); rows.forEach((row, index) => { const onRowEnter = safe((event: PointerEvent) => { if (!isMouse(event)) return; lastClientX = event.clientX; const { x, y } = toBox(event.clientX, event.clientY); reveal(index, x, y); }); // Keyboard focus: the photo appears beside the row. A mouse click also focuses a row, // but then :focus-visible is false and the cursor is already driving. const onRowFocus = safe(() => { if (pointerInside || !row.matches(":focus-visible")) return; const rect = row.getBoundingClientRect(); const { x, y } = toBox(rect.left + rect.width * 0.62, rect.top + rect.height / 2); reveal(index, x, y); moveX?.(x); moveY?.(y); }); const onRowBlur = safe((event: FocusEvent) => { if (pointerInside || rows.includes(event.relatedTarget as HTMLElement)) return; hide(); }); row.addEventListener("pointerenter", onRowEnter); row.addEventListener("focus", onRowFocus); row.addEventListener("blur", onRowBlur); cleanups.push(() => { row.removeEventListener("pointerenter", onRowEnter); row.removeEventListener("focus", onRowFocus); row.removeEventListener("blur", onRowBlur); }); }); return () => { cleanups.forEach((cleanup) => cleanup()); straighten?.kill(); markActive(-1); }; }); return () => mm.revert(); }, { scope: boxRef, dependencies: [projects.length, transition, followDuration, tilt], revertOnUpdate: true }, ); const handleClick = (event: MouseEvent, project: ProjectHoverItem, index: number) => { onSelect?.(project, index); if (!touchLayout) return; // On touch the row opens its picture. A linked row gets a "View project" link inside the panel. if (project.href) event.preventDefault(); setOpenIndex((current) => (current === index ? null : index)); }; return (

) => handleClick(event, project, index), "aria-expanded": touchLayout ? open : undefined, "aria-controls": touchLayout ? panelName : undefined, }; const content = ( <> {project.title} {project.subtitle} {/* Touch only: a plus that turns into a minus while the row is open */} ); return (

{project.href ? ( {content} ) : ( )} {/* Touch only: the picture opens under the row */}

{project.href ? ( View project ) : null}

); })}

{/* The floating photo. Decorative: every row already says what the picture is. */}

); } 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":[["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dimaac/project-hover-section/project-hover-section.tsx","content":"$52","type":"registry:component","target":"components/dimaac/project-hover-section.tsx"}],"className":"h-[70svh] min-h-80"}]]}]