4f: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"] 50: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"] 51:T38b3,"use client"; import { useEffect, useRef, useState } from "react"; import { gsap } from "gsap"; // Service folders stacked along the bottom of the page. Point at one and its tab lifts, the others // fade back, and three photos slide out from behind the front and fan open above the tab. // Mouse: hover. Keyboard: Tab onto a folder (Escape closes it). Touch: tap a folder, tap it again to close. export type FolderItem = { /** The name on the tab, e.g. "Branding". */ title: string; /** The small number or word above the title, e.g. "01". */ label?: string; /** The photos inside, left to right. The first three are used. */ images: string[]; /** Alt text for each photo, in the same order. */ alts?: string[]; /** This folder's colour. Used unless the `color` prop paints every folder the same. */ color?: string; }; export type FolderHoverProps = { /** The folders, in reading order. Five fill two rows nicely (2 then 3). */ folders: FolderItem[]; /** The widest tilt of the photos when a folder opens, in degrees. The left photo leans left, the right one leans right. */ fan?: number; /** How far the open folder's front and tab rise, in pixels. */ lift?: number; /** How long the folder takes to open, in seconds. */ duration?: number; /** The GSAP ease of the photos sliding out, e.g. "back.out(1.4)" or "power3.out". */ ease?: string; /** The colour used when `colorMode` is "single". */ color?: string; /** "own" gives each folder its own colour, "single" paints them all with `color`. */ colorMode?: "own" | "single"; /** The colour of the page behind the folders. The folders you are not pointing at fade toward it. Any CSS colour or var(). */ paper?: string; /** The colour of text on the page. The faded folders print their titles in a soft mix of it. Any CSS colour or var(). */ ink?: string; /** The most folders in one row. Narrow boxes use fewer, so the folders never get too thin. */ perRow?: number; /** The height of one folder in pixels (the tab sits on top of it). Narrow boxes shrink it a quarter. */ folderHeight?: number; /** The index of a folder that starts open, or null for none. It closes as soon as the pointer leaves it. */ defaultOpen?: number | null; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; }; // Used when a folder has no colour of its own const FALLBACK_COLOURS = ["#f5e04a", "#d4d4d4", "#e8e4dc", "#9c9c9c", "#ffcc4d"]; // The text printed on a folder. The folders are always light-ish paper, so this stays dark in both themes. const FOLDER_INK = "#1a1a1a"; // A folder never gets thinner than this, so titles keep fitting const MIN_FOLDER_WIDTH = 170; // Where the three photos sit (-1 left, 0 middle, 1 right of the centre of the photo box) and how far // each may tilt, as a share of `fan`. The middle photo is the only one that can lean either way. const SLOTS = [ { side: -1, tilt: [-1, -0.5] }, { side: 0, tilt: [-0.5, 0.5] }, { side: 1, tilt: [0.5, 1] }, ] as const; /** Splits the folders into rows, filling the bottom row first: 5 folders at 3 per row become 2 + 3. */ function toRows(count: number, perRow: number): number[][] { const rows: number[][] = []; for (let end = count; end > 0; end -= perRow) { const start = Math.max(0, end - perRow); rows.unshift(Array.from({ length: end - start }, (_, i) => start + i)); } return rows; } export function FolderHover({ folders, fan = 18, lift = 24, duration = 0.6, ease = "back.out(1.4)", color = "#f5e04a", colorMode = "own", paper = "#ece8e1", ink = "#1a1a1a", perRow = 3, folderHeight = 200, defaultOpen = null, className = "", }: FolderHoverProps) { const rootRef = useRef(null); const pointerType = useRef("mouse"); // The folder that is open right now. React state, so the colours and aria-expanded follow it. const [open, setOpen] = useState(defaultOpen); // The folder that has keyboard focus (it gets a ring on its front, because the button itself stays put while the front lifts) const [focused, setFocused] = useState(null); // How many folders fit in a row at the current width (measured below) const [columns, setColumns] = useState(perRow); useEffect(() => { const root = rootRef.current; if (!root) return; const measure = () => { const fit = Math.floor(root.clientWidth / MIN_FOLDER_WIDTH); setColumns(Math.max(1, Math.min(perRow, fit))); }; measure(); const observer = new ResizeObserver(measure); observer.observe(root); return () => observer.disconnect(); }, [perRow]); // Everything is sized from the folder height, so a narrow box just uses a smaller one const height = columns >= 3 ? folderHeight : Math.round(folderHeight * 0.75); const tabHeight = Math.round(height * 0.24); const photoWidth = Math.round(height * 0.6); const photoHeight = Math.round(height * 0.88); const restTop = Math.round(height * 0.06); // Open: the photos end up with about 60% of their height above the lifted tab const openTop = -(tabHeight + lift) - photoHeight * 0.62; const travel = openTop - restTop; // Opens the folder that is `open` and closes the rest. It runs again whenever the open folder or a // setting changes, and every folder gets fresh tweens each time (`overwrite: true` removes the old // ones, even those still waiting out their delay), so quick hovering from folder to folder never // leaves a photo stranded. A plain effect instead of useGSAP: useGSAP would either revert the // photos to the start on every change or keep every old tween around. useEffect(() => { const root = rootRef.current; if (!root) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // With reduced motion the folder still opens, it just does it in one step const time = reduced ? 0 : duration; // Found by data attributes, so a folder that moved to another row is still found const panels = Array.from(root.querySelectorAll("[data-panel]")); const photos = Array.from(root.querySelectorAll("[data-photo]")); root.querySelectorAll("[data-folder]").forEach((folderElement) => { const isOpen = Number(folderElement.dataset.folder) === open; const panel = folderElement.querySelector("[data-panel]"); if (panel) { gsap.to(panel, { y: isOpen ? -lift : 0, duration: time * (isOpen ? 0.7 : 0.6), ease: "power3.out", overwrite: true }); } folderElement.querySelectorAll("[data-photo]").forEach((photo, slot) => { const [low, high] = SLOTS[slot]!.tilt; gsap.to(photo, { y: isOpen ? travel : 0, rotation: isOpen ? gsap.utils.random(low * fan, high * fan) : 0, duration: isOpen ? time : time * 0.7, // Slide out with a little overshoot, tuck back without one ease: isOpen ? ease : "power2.inOut", // The photos leave in order and return in order delay: time * (isOpen ? 0.06 : 0.04) * slot, overwrite: true, }); // Closed photos are hidden outright. Their shadows would otherwise leak out of a narrow folder // onto its neighbour. Fading is quick and shares the photo's delay, so it never shows mid-rise. gsap.to(photo, { autoAlpha: isOpen ? 1 : 0, duration: time === 0 ? 0 : 0.12, delay: isOpen ? time * 0.06 * slot : time * (0.04 * slot + 0.6), ease: "none", overwrite: "auto", }); }); }); return () => { gsap.killTweensOf([...panels, ...photos]); }; }, [open, fan, lift, duration, ease, travel, folders.length, columns]); const openFolder = (index: number) => setOpen(index); const closeFolder = (index: number) => setOpen((current) => (current === index ? null : current)); const rows = toRows(folders.length, columns); return (

{ pointerType.current = event.pointerType; }} onClick={(event) => { // A tap on the empty page closes the open folder on touch screens if (event.target === event.currentTarget && pointerType.current === "touch") setOpen(null); }} > {rows.map((row, rowIndex) => (

{row.map((index) => { const folder = folders[index]!; const base = colorMode === "single" ? color : (folder.color ?? FALLBACK_COLOURS[index % FALLBACK_COLOURS.length]!); const isOpen = open === index; // While another folder is open this one fades toward the page colour const faded = open !== null && !isOpen; const fill = faded ? `color-mix(in srgb, ${base} 18%, ${paper})` : base; const textColor = faded ? `color-mix(in srgb, ${ink} 38%, color-mix(in srgb, ${base} 18%, ${paper}))` : FOLDER_INK; const slide = `background-color ${Math.max(duration * 0.5, 0.15)}s ease, color ${Math.max(duration * 0.5, 0.15)}s ease`; const alts = folder.alts ?? []; return (

{/* The photos sit behind the front of the folder until it opens. `isolate` keeps their z-index inside this box, so the front always covers them. */}

{SLOTS.map((slot, photoIndex) => { const src = folder.images[photoIndex]; if (!src) return null; return (

); })}

{/* The front of the folder and its tab (the tab overlaps the front by a pixel so no seam shows the photos). It reaches `lift` pixels below the folder so nothing shows underneath when it rises. */} {/* The real control: it covers the tab and the front, so pointing at the tab counts too */}

); })}

))}

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