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:T25fa,"use client"; import { useCallback, useId, useRef, type CSSProperties } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // An image that opens like a drop of liquid. A circle grows from a point and the image shows // through it. The edge of the circle is pushed around by an SVG noise filter, so it wobbles like // a puddle instead of a clean circle. Click it and the puddle closes, then opens again from // wherever you clicked. export type LiquidImageRevealProps = { /** The image address. */ src: string; /** What the image shows. It becomes the accessible name of the whole piece. */ alt: string; /** Width of the box: a number in pixels or any CSS length. It fills its parent by default. */ width?: number | string; /** Height of the box: a number in pixels or any CSS length. It fills its parent by default. */ height?: number | string; /** How long the reveal takes, in seconds. */ duration?: number; /** Seconds to wait before the reveal starts. */ delay?: number; /** The GSAP ease of the reveal, e.g. "power2.out" or "expo.out". */ ease?: string; /** When the first reveal plays: "visible" waits until the image is scrolled into view, "mount" plays straight away. */ trigger?: "visible" | "mount"; /** Clicking (or pressing Enter on) the image closes the puddle and opens it again from that spot. */ replayOnClick?: boolean; /** Where the puddle starts, across the box: 0 is the left edge, 0.5 the middle, 1 the right edge. */ centerX?: number; /** Where the puddle starts, down the box: 0 is the top edge, 0.5 the middle, 1 the bottom edge. */ centerY?: number; /** How big the circle gets, in pixels. Leave empty to grow just enough to cover the whole image. */ maxRadius?: number; /** How fine the wobble is. Small numbers give big slow waves, large numbers give small ripples. */ turbulenceFrequency?: number; /** Layers of detail in the wobble. More looks richer but costs more on phones. 2 to 4 is plenty. */ turbulenceOctaves?: number; /** How far the noise pushes the edge, in pixels. 0 is a clean circle. */ displacementScale?: number; /** Called every time a reveal finishes. */ onComplete?: () => void; /** Extra classes for the outer box, e.g. a radius. */ className?: string; }; const toCss = (value: number | string) => (typeof value === "number" ? `${value}px` : value); export function LiquidImageReveal({ src, alt, width = "100%", height = "100%", duration = 2.2, delay = 0, ease = "power2.out", trigger = "visible", replayOnClick = true, centerX = 0.5, centerY = 0.5, maxRadius, turbulenceFrequency = 0.02, turbulenceOctaves = 3, displacementScale = 80, onComplete, className = "", }: LiquidImageRevealProps) { const boxRef = useRef(null); const setBox = useCallback((node: HTMLElement | null) => { boxRef.current = node; }, []); const maskRef = useRef(null); const filterRef = useRef(null); const circleRef = useRef(null); // SVG ids can't hold the colons React puts in useId, and two copies on a page need different ids const uid = useId().replace(/[^a-zA-Z0-9_-]/g, ""); const maskId = `liquid-mask-${uid}`; const filterId = `liquid-filter-${uid}`; // Values the animation reads while it runs. Only the callback is live; the look props restart the reveal // (see the dependencies below), so a new wobble is always shown by playing it, never hidden behind a finished mask. const live = useRef({ displacementScale, maxRadius, onComplete }); live.current = { displacementScale, maxRadius, onComplete }; useGSAP( (_context, contextSafe) => { const box = boxRef.current; const mask = maskRef.current; const filter = filterRef.current; const circle = circleRef.current; if (!box || !mask || !filter || !circle || !contextSafe) return; // progress: 0 is closed, 1 is fully open. The radius is worked out from it on every draw, // so a resize in the middle of a reveal still ends up covering the whole image. const state = { progress: 0 }; const origin = { x: centerX, y: centerY }; const draw = () => { const w = box.clientWidth; const h = box.clientHeight; const { displacementScale: scale, maxRadius: fixedRadius } = live.current; // The noise pulls pixels in from outside the box, so the filter and mask regions are a // little bigger than the box. Otherwise the edges would get transparent holes. const pad = Math.ceil(scale) + 2; for (const el of [mask, filter]) { el.setAttribute("x", String(-pad)); el.setAttribute("y", String(-pad)); el.setAttribute("width", String(w + pad * 2)); el.setAttribute("height", String(h + pad * 2)); } const cx = origin.x * w; const cy = origin.y * h; // The farthest corner, plus the most the noise can pull the edge back const farthest = Math.hypot(Math.max(cx, w - cx), Math.max(cy, h - cy)) + scale * 0.6; circle.setAttribute("cx", String(cx)); circle.setAttribute("cy", String(cy)); circle.setAttribute("r", String(state.progress * (fixedRadius ?? farthest))); }; draw(); const resizeObserver = new ResizeObserver(draw); resizeObserver.observe(box); // Reduced motion: no growing circle. The image is simply there. const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) { state.progress = 1; draw(); return () => resizeObserver.disconnect(); } const open = (wait: number) => { gsap.to(state, { progress: 1, duration, delay: wait, ease, onUpdate: draw, onComplete: () => live.current.onComplete?.(), }); }; // Close quickly toward the old spot, then open again from the new one const reopenFrom = (x: number, y: number) => { gsap.killTweensOf(state); gsap.to(state, { progress: 0, duration: Math.min(0.6, duration * 0.3), ease: "power2.in", onUpdate: draw, onComplete: () => { origin.x = x; origin.y = y; open(0.05); }, }); }; const onClick = contextSafe((event: MouseEvent) => { if (!replayOnClick) return; const rect = box.getBoundingClientRect(); // A keyboard press has no position (detail is 0), so it reopens from the usual spot const fromKeyboard = event.detail === 0; const x = fromKeyboard ? centerX : (event.clientX - rect.left) / rect.width; const y = fromKeyboard ? centerY : (event.clientY - rect.top) / rect.height; reopenFrom(Math.min(1, Math.max(0, x)), Math.min(1, Math.max(0, y))); }); box.addEventListener("click", onClick); // Wait until the image is on screen, so the reveal isn't spent while nobody is looking let visibility: IntersectionObserver | null = null; if (trigger === "visible" && typeof IntersectionObserver !== "undefined") { visibility = new IntersectionObserver( ([entry]) => { if (!entry?.isIntersecting) return; visibility?.disconnect(); open(delay); }, { threshold: 0.35 }, ); visibility.observe(box); } else { open(delay); } return () => { visibility?.disconnect(); resizeObserver.disconnect(); box.removeEventListener("click", onClick); gsap.killTweensOf(state); }; }, { scope: boxRef, dependencies: [duration, delay, ease, trigger, replayOnClick, centerX, centerY, displacementScale, turbulenceFrequency, turbulenceOctaves, maxRadius], revertOnUpdate: true }, ); const boxStyle: CSSProperties = { width: toCss(width), height: toCss(height) }; const picture = ( ); const shared = `relative block overflow-hidden ${className}`; if (replayOnClick) { return ( ); } return (

{picture}

); } 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/liquid-image-reveal/liquid-image-reveal.tsx","content":"$52","type":"registry:component","target":"components/dimaac/liquid-image-reveal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]