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:T2ae7,"use client"; import { useId, useRef } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A greyscale photo that fills with colour when you hover it. A thick brush stroke draws across // the card like wet ink, and the colour photo shows through the stroke as it widens, until the // whole card is poured in. Leaving runs the same timeline backwards, so the colour drains away // along the same line. Everything lives in one SVG, so the photo and the brush always line up. /** The three brush paths. Each one is drawn in a 800 x 1000 box and runs from outside the card to outside it. */ const PATHS = { // Soft S-bends, row after row down the card wave: "M -60 130 C 120 20 260 240 420 130 S 720 20 860 130 C 960 200 700 300 520 300 S 160 270 -60 330 C -110 350 60 480 220 480 S 560 380 860 480 C 950 520 760 650 560 650 S 200 570 -60 650 C -110 680 100 800 300 800 S 620 700 860 810 C 950 850 780 940 560 940 S 220 890 -60 950", // Hard diagonal passes, like a marker filling a page zigzag: "M -40 60 L 840 220 L -40 380 L 840 540 L -40 700 L 840 860 L 120 1060", // A loose, looping scribble scribble: "M 90 940 C -40 640 380 740 300 520 S 700 700 640 400 S 130 460 240 220 S 720 280 700 60 C 690 -40 520 -20 560 120 S 640 420 420 600 S 100 780 200 950 S 520 1010 640 880 S 860 700 760 560", } as const; export type InkHoverPath = keyof typeof PATHS; export type InkHoverProps = { /** The photo. It shows in greyscale until the ink pours in. A 4:5 portrait fits best. */ src: string; /** A different photo to pour in. Leave it empty to pour in the colour version of `src`. */ hoverSrc?: string; /** Alt text for the photo. Leave it empty if the label already says what it is. */ alt?: string; /** Title shown on the card once the colour is in. */ label?: string; /** A short line under the title. */ caption?: string; /** How thick the brush stroke is while it draws, in pixels of a 800 wide card. The stroke then widens until it floods the card. */ strokeWidth?: number; /** How long the brush takes to cross the card, in seconds. */ duration?: number; /** The shape of the brush path. */ path?: InkHoverPath; /** Show the base photo in greyscale. Turn it off to see the full colour photo under the ink. */ grayscaleBase?: boolean; /** The colour of the wet ink that leads the stroke. */ inkColor?: string; /** Extra classes for the card. It is a 4:5 box by default: give it your own size or aspect. */ className?: string; }; // How wide the stroke ends up, so the last pass floods every gap between the rows const FLOOD_WIDTH = 780; // The path is normalised to length 1 (pathLength), so the dash tricks work for any shape. // Starting a little past 1 keeps the round cap of the empty stroke out of the card. const HIDDEN_OFFSET = 1.12; export function InkHover({ src, hoverSrc, alt = "", label, caption, strokeWidth = 140, duration = 0.9, path = "wave", grayscaleBase = true, inkColor = "#111111", className = "", }: InkHoverProps) { const cardRef = useRef(null); const timelineRef = useRef(null); const pointerTypeRef = useRef("mouse"); const openRef = useRef(false); // useId gives each card its own ids, so two cards never share a mask or a filter const uid = useId().replace(/[^a-zA-Z0-9]/g, ""); const maskId = `ink-mask-${uid}`; const greyId = `ink-grey-${uid}`; const d = PATHS[path]; const revealSrc = hoverSrc || src; useGSAP( () => { const card = cardRef.current; if (!card) return; const inkLine = card.querySelector("[data-ink]"); const maskLine = card.querySelector("[data-mask]"); const reveal = card.querySelector("[data-reveal]"); const revealImage = card.querySelector("[data-reveal-image]"); const words = card.querySelector("[data-words]"); if (!inkLine || !maskLine || !reveal || !revealImage || !words) return; const mm = gsap.matchMedia(); mm.add( { calm: "(prefers-reduced-motion: reduce)", lively: "(prefers-reduced-motion: no-preference)" }, (context) => { const calm = Boolean(context.conditions?.calm); const timeline = gsap.timeline({ paused: true, defaults: { ease: "power2.out" } }); timelineRef.current = timeline; if (calm) { // Reduced motion: no brush. The mask is fully open and the colour photo simply fades in. gsap.set(maskLine, { attr: { "stroke-dashoffset": 0, "stroke-width": FLOOD_WIDTH } }); gsap.set(inkLine, { opacity: 0 }); gsap.set(reveal, { opacity: 0 }); gsap.set(words, { opacity: 0 }); timeline.to(reveal, { opacity: 1, duration: 0.3 }, 0).to(words, { opacity: 1, duration: 0.3 }, 0); return; } // The ink is a little thinner than the colour, so it only shows as a dark tip at the // front of the stroke and a thin rim along its edge, never as blobs between the passes const inkScale = 0.8; gsap.set(maskLine, { attr: { "stroke-dashoffset": HIDDEN_OFFSET, "stroke-width": strokeWidth } }); gsap.set(inkLine, { attr: { "stroke-dashoffset": HIDDEN_OFFSET, "stroke-width": strokeWidth * inkScale } }); gsap.set(revealImage, { scale: 1.12, transformOrigin: "50% 50%" }); gsap.set(words, { opacity: 0, y: 14 }); // The ink goes first, the colour photo follows a beat behind const lag = duration * 0.07; [ { line: inkLine, at: 0, width: FLOOD_WIDTH * inkScale }, { line: maskLine, at: lag, width: FLOOD_WIDTH }, ].forEach(({ line, at, width }) => { timeline.to(line, { attr: { "stroke-dashoffset": 0 }, duration, ease: "power2.out" }, at); // The stroke thickens while it is still travelling, which is what makes it feel poured timeline.to(line, { attr: { "stroke-width": width }, duration: duration * 0.8, ease: "power2.inOut" }, at + duration * 0.25); }); timeline.to(revealImage, { scale: 1, duration: duration * 1.2, ease: "power2.out" }, lag); timeline.to(words, { opacity: 1, y: 0, duration: 0.5 }, duration * 0.55); }, ); const play = () => { openRef.current = true; card.setAttribute("aria-pressed", "true"); timelineRef.current?.timeScale(1).play(); }; // Leaving is a touch faster than arriving const stop = () => { openRef.current = false; card.setAttribute("aria-pressed", "false"); timelineRef.current?.timeScale(1.3).reverse(); }; const onPointerEnter = (event: PointerEvent) => { if (event.pointerType !== "touch") play(); }; const onPointerLeave = (event: PointerEvent) => { if (event.pointerType !== "touch") stop(); }; const onPointerDown = (event: PointerEvent) => { pointerTypeRef.current = event.pointerType; }; // Touch has no hover, so a tap opens the card and the next tap closes it const onClick = () => { if (pointerTypeRef.current !== "touch") return; if (openRef.current) stop(); else play(); }; // Keyboard users get the same reveal when the card takes focus const onFocus = () => { if (card.matches(":focus-visible")) play(); }; const onBlur = () => { if (openRef.current && pointerTypeRef.current !== "touch") stop(); }; card.addEventListener("pointerenter", onPointerEnter); card.addEventListener("pointerleave", onPointerLeave); card.addEventListener("pointerdown", onPointerDown); card.addEventListener("click", onClick); card.addEventListener("focus", onFocus); card.addEventListener("blur", onBlur); return () => { card.removeEventListener("pointerenter", onPointerEnter); card.removeEventListener("pointerleave", onPointerLeave); card.removeEventListener("pointerdown", onPointerDown); card.removeEventListener("click", onClick); card.removeEventListener("focus", onFocus); card.removeEventListener("blur", onBlur); timelineRef.current?.kill(); timelineRef.current = null; openRef.current = false; card.setAttribute("aria-pressed", "false"); mm.revert(); }; }, { scope: cardRef, dependencies: [strokeWidth, duration, path, src, revealSrc], revertOnUpdate: true }, ); const accessibleName = [label, caption].filter(Boolean).join(", ") || alt || undefined; return ( ); } 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"}]]}]}],["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/dimaac/ink-hover/ink-hover.tsx","content":"$51","type":"registry:component","target":"components/dimaac/ink-hover.tsx"}],"className":"h-[70svh] min-h-80"}]]}]