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:T2b06,"use client"; import { useRef, type CSSProperties, type ReactNode } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A round window that follows the cursor. Through it you see a second layer (a colour and // different content) that sits exactly on top of the first one. The window is a CSS mask: // a radial gradient whose centre and radius are three CSS variables, and GSAP animates them. // The window is small while you move over empty space and grows when you are over the content. // On touch screens it follows your finger. With the keyboard, Tab to it and use the arrow keys. export type MaskRevealOnHoverProps = { /** What people see normally. */ content: ReactNode; /** What shows inside the round window. It is laid on top of `content`, so give both the same width and they line up. */ reveal: ReactNode; /** Radius of the window while it is only moving around, in pixels. */ size?: number; /** Radius of the window while it is over the content, in pixels. */ hoverSize?: number; /** How soft the edge of the window is, in pixels. 0 is a clean circle. */ feather?: number; /** How long the window takes to catch up with the cursor, in seconds. */ duration?: number; /** The GSAP ease of that catch-up, e.g. "power3.out" or "back.out(1.7)". */ ease?: string; /** Where the window grows to its big size: only over the content, or anywhere in the box. */ growOn?: "content" | "stage"; /** The colour of the layer inside the window. Any CSS colour or gradient. */ maskBackground?: string; /** Hide the normal cursor inside the box, so the window is the cursor. */ hideCursor?: boolean; /** Stop a finger from scrolling the page while it drags the window. Turn it off if the box sits in a long page. */ lockTouchScroll?: boolean; /** Describes the box for screen readers and keyboard users. */ label?: string; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; }; // The window never needs to be sharper than one pixel, which also keeps the edge smooth const HAIRLINE = 1; const KEY_STEP = 56; const hiddenStyle: CSSProperties = { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", }; export function MaskRevealOnHover({ content, reveal, size = 20, hoverSize = 100, feather = 0, duration = 0.6, ease = "back.out(1.7)", growOn = "content", maskBackground = "#DDFC3E", hideCursor = true, lockTouchScroll = true, label = "Move the cursor over the text to reveal what is underneath. With the keyboard, use the arrow keys.", className = "", }: MaskRevealOnHoverProps) { const boxRef = useRef(null); const contentRef = useRef(null); const maskRef = useRef(null); // What the window is doing, kept outside the effect so a prop change (the playground) doesn't make it vanish or jump. // x, y and size are what is painted right now; goalX and goalY are where it is heading. const lens = useRef({ x: 0, y: 0, size: 0, goalX: 0, goalY: 0, present: false, overContent: false, keyboard: false }); useGSAP( (_context, contextSafe) => { const box = boxRef.current; const inner = contentRef.current; const mask = maskRef.current; if (!box || !inner || !mask || !contextSafe) return; const state = lens.current; const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); // Write the three numbers into the CSS variables the mask reads const paint = () => { mask.style.setProperty("--mask-x", `${state.x}px`); mask.style.setProperty("--mask-y", `${state.y}px`); mask.style.setProperty("--mask-size", `${Math.max(0, state.size)}px`); }; // quickTo is made for this: cheap to call on every pointer move, always eased toward the newest value. // To make the window jump, the old ones are dropped and new ones are made. let moveX = gsap.quickTo(state, "x", { duration, ease, onUpdate: paint }); let moveY = gsap.quickTo(state, "y", { duration, ease, onUpdate: paint }); const makeFollowers = () => { gsap.killTweensOf(state, "x,y"); moveX = gsap.quickTo(state, "x", { duration, ease, onUpdate: paint }); moveY = gsap.quickTo(state, "y", { duration, ease, onUpdate: paint }); }; let sizeTween: gsap.core.Tween | null = null; const wantedSize = () => { if (!state.present) return 0; return growOn === "stage" || state.overContent || state.keyboard ? hoverSize : size; }; const updateSize = () => { const wanted = wantedSize(); sizeTween?.kill(); if (reducedMotion.matches) { state.size = wanted; paint(); return; } const growing = wanted > state.size; sizeTween = gsap.to(state, { size: wanted, duration: growing ? 0.4 : 0.3, ease: growing ? "power2.out" : "power2.in", onUpdate: paint }); }; // The first touch of a visit puts the window right under the finger, instead of sweeping in from where it was const jumpTo = (x: number, y: number) => { state.x = state.goalX = x; state.y = state.goalY = y; makeFollowers(); paint(); }; const goTo = (x: number, y: number) => { if (reducedMotion.matches) { jumpTo(x, y); return; } state.goalX = x; state.goalY = y; moveX(x); moveY(y); }; const follow = (event: PointerEvent) => { const rect = box.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const wasPresent = state.present; const wasOver = state.overContent; state.keyboard = false; state.present = true; // A finger keeps the element it first touched as the event target for the whole drag, so for touch and pen // we ask what is under the finger right now. (The mask layer ignores pointers, so it never gets in the way.) const under = event.pointerType === "mouse" ? event.target : document.elementFromPoint(event.clientX, event.clientY); state.overContent = under instanceof Node && inner.contains(under); if (!wasPresent) jumpTo(x, y); else goTo(x, y); if (!wasPresent || wasOver !== state.overContent) updateSize(); }; const leave = () => { state.present = false; state.overContent = false; state.keyboard = false; updateSize(); }; const onPointerMove = contextSafe((event: PointerEvent) => { if (!event.isPrimary) return; follow(event); }); const onPointerDown = contextSafe((event: PointerEvent) => { if (!event.isPrimary) return; follow(event); }); const onPointerLeave = contextSafe((event: PointerEvent) => { if (!event.isPrimary) return; leave(); }); // A finger that lifts is gone; a mouse button that lifts is still over the box const onPointerUp = contextSafe((event: PointerEvent) => { if (event.isPrimary && event.pointerType !== "mouse") leave(); }); // Keyboard: Tab puts the big window in the middle, the arrow keys walk it around const onFocus = contextSafe(() => { if (!box.matches(":focus-visible")) return; state.keyboard = true; state.present = true; state.overContent = true; jumpTo(box.clientWidth / 2, box.clientHeight / 2); updateSize(); }); const onBlur = contextSafe(() => { if (state.keyboard) leave(); }); const onKeyDown = contextSafe((event: KeyboardEvent) => { if (!state.keyboard) return; const step = { ArrowLeft: [-KEY_STEP, 0], ArrowRight: [KEY_STEP, 0], ArrowUp: [0, -KEY_STEP], ArrowDown: [0, KEY_STEP] }[event.key]; if (!step) return; event.preventDefault(); // Step from where the window is heading, so quick key presses add up goTo(gsap.utils.clamp(0, box.clientWidth, state.goalX + step[0]!), gsap.utils.clamp(0, box.clientHeight, state.goalY + step[1]!)); }); box.addEventListener("pointermove", onPointerMove); box.addEventListener("pointerdown", onPointerDown); box.addEventListener("pointerleave", onPointerLeave); box.addEventListener("pointerup", onPointerUp); box.addEventListener("pointercancel", onPointerUp); box.addEventListener("focus", onFocus); box.addEventListener("blur", onBlur); box.addEventListener("keydown", onKeyDown); // A prop change rebuilds this effect: carry on from where the window already is, at the new size state.size = wantedSize(); paint(); if (state.present && !reducedMotion.matches) { moveX(state.goalX); moveY(state.goalY); } return () => { box.removeEventListener("pointermove", onPointerMove); box.removeEventListener("pointerdown", onPointerDown); box.removeEventListener("pointerleave", onPointerLeave); box.removeEventListener("pointerup", onPointerUp); box.removeEventListener("pointercancel", onPointerUp); box.removeEventListener("focus", onFocus); box.removeEventListener("blur", onBlur); box.removeEventListener("keydown", onKeyDown); sizeTween?.kill(); gsap.killTweensOf(state); }; }, { scope: boxRef, dependencies: [size, hoverSize, feather, duration, ease, growOn], revertOnUpdate: true }, ); // A circle of `--mask-size` around (`--mask-x`, `--mask-y`): solid inside, clear outside // A soft edge can be at most 60% of the radius, so the small idle dot stays solid in the middle const edge = `max(${HAIRLINE}px, min(${feather}px, var(--mask-size, 0px) * 0.6))`; const circle = `radial-gradient(circle at var(--mask-x, -100px) var(--mask-y, -100px), #000 calc(var(--mask-size, 0px) - ${edge}), transparent var(--mask-size, 0px))`; return (

{content}

{/* The same words as the layer above, but for screen readers only, so nothing is said twice */}

{reveal}

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