62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T28b3,'use client'; import { useRef, useState, type ComponentPropsWithRef, type CSSProperties } from 'react'; import { useGSAP } from '@gsap/react'; import gsap from 'gsap'; import { CustomEase } from 'gsap/CustomEase'; import { cn } from '@/lib/utils'; gsap.registerPlugin(useGSAP, CustomEase); const CELL = 8; const SPREAD = 0.42; const DRAIN = 0.28; const SCATTER = 0.08; const STEP = 0.09; const EDGE = 0.07; const TEAL = '#045f64'; const LIME = '#c6f56f'; const prefersReducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const isFocusVisible = (el: Element) => { try { return el.matches(':focus-visible'); } catch { return true; } }; const Arrow = () => ( ); export interface PixelFillButtonProps extends ComponentPropsWithRef<'button'> { children: string; } const PixelFillButton = ({ children, className, type = 'button', ref, ...props }: PixelFillButtonProps) => { const btnRef = useRef(null); const [grid, setGrid] = useState({ cols: 0, rows: 0 }); const setRef = (node: HTMLButtonElement | null) => { btnRef.current = node; if (typeof ref === 'function') ref(node); else if (ref) ref.current = node; }; useGSAP( () => { const btn = btnRef.current; if (!btn) return; const measure = () => { const cols = Math.ceil(btn.offsetWidth / CELL); const rows = Math.ceil(btn.offsetHeight / CELL); setGrid((prev) => (prev.cols === cols && prev.rows === rows ? prev : { cols, rows })); }; measure(); const observer = new ResizeObserver(measure); observer.observe(btn); return () => observer.disconnect(); }, { scope: btnRef } ); useGSAP( () => { CustomEase.create('pixel-roll', '0.625, 0.05, 0, 1'); const btn = btnRef.current; if (!btn) return; const cells = gsap.utils.toArray('[data-pixel]', btn); const rolls = gsap.utils.toArray('[data-roll]', btn); const slides = gsap.utils.toArray('[data-slide]', btn); const label = btn.querySelector('[data-label]'); const roll = { duration: 0.48, ease: 'pixel-roll', overwrite: true }; const pending: (gsap.core.Tween | null)[] = cells.map(() => null); // The wave is timed by each cell's distance from a point: where the // pointer came in when filling, where it went out when draining. Filling // runs nearest first, so the teal blooms out of the cursor; draining runs // farthest first, so the last pixels leave through the exit. Every cell // lights lime for a beat before it settles, which gives the wave its edge. const wave = (x: number, y: number, filling: boolean) => { const width = btn.offsetWidth; const height = btn.offsetHeight; const far = Math.max(Math.hypot(Math.max(x, width - x), Math.max(y, height - y)), 1); const reachOf = (px: number, py: number) => Math.hypot(px - x, py - y) / far; const order = (reach: number) => (filling ? reach : 1 - reach); const reaches = cells.map((_, index) => reachOf(((index % grid.cols) + 0.5) * CELL, (Math.floor(index / grid.cols) + 0.5) * CELL) ); const lits = cells.map((cell) => Number(gsap.getProperty(cell, 'opacity')) > 0); // The drain is timed across the lit cells only, starting from the first // of them, so it begins the moment the pointer leaves. A quick pass // lights a few cells right by the exit; timed across the whole button // they'd sit out most of the sweep before clearing. const start = filling ? 0 : Math.min(1, ...reaches.filter((_, i) => lits[i]).map(order)); const timing = (reach: number) => Math.max(0, order(reach) - start) * (filling ? SPREAD : DRAIN); const hold = filling ? EDGE : EDGE / 2; cells.forEach((cell, index) => { const delay = timing(reaches[index]) + Math.random() * SCATTER; const lit = lits[index]; // Overwriting doesn't stop a keyframe tween, so each cell's last // tween is killed by hand. Without it, a fast exit leaves fills still // waiting on their delay, and they switch on after the pointer is gone. pending[index]?.kill(); pending[index] = null; if (filling && lit) { pending[index] = gsap.to(cell, { opacity: 1, backgroundColor: TEAL, duration: STEP, ease: 'steps(2)', delay, }); } else if (filling) { pending[index] = gsap.to(cell, { keyframes: [ { backgroundColor: LIME, duration: 0 }, { opacity: 1, duration: STEP, ease: 'steps(2)' }, { backgroundColor: TEAL, duration: 0, delay: EDGE }, ], delay, }); } else if (lit) { pending[index] = gsap.to(cell, { keyframes: [ { backgroundColor: LIME, duration: 0 }, { opacity: 0, duration: STEP, ease: 'steps(2)', delay: hold }, ], delay, }); } else { gsap.set(cell, { opacity: 0, backgroundColor: TEAL }); } }); // The label flips colour once the wave is over its middle, so the // text never reads lime on white or teal on teal for long. const middle = label ? reachOf(label.offsetLeft + label.offsetWidth / 2, height / 2) : 0.5; gsap.to(btn, { color: filling ? LIME : TEAL, duration: 0.16, delay: timing(middle) + STEP, overwrite: true, }); }; const enter = (x: number, y: number) => { btn.dataset.active = 'true'; if (prefersReducedMotion()) return; wave(x, y, true); gsap.to(rolls, { yPercent: -100, ...roll }); gsap.to(slides, { xPercent: 100, ...roll }); }; const leave = (x: number, y: number) => { btn.dataset.active = 'false'; if (prefersReducedMotion()) return; wave(x, y, false); gsap.to(rolls, { yPercent: 0, ...roll }); gsap.to(slides, { xPercent: 0, ...roll }); }; const pointOf = (event: PointerEvent) => { const box = btn.getBoundingClientRect(); return [event.clientX - box.left, event.clientY - box.top] as const; }; const onPointerEnter = (event: PointerEvent) => { if (event.pointerType !== 'touch') enter(...pointOf(event)); }; const onPointerLeave = (event: PointerEvent) => { if (event.pointerType !== 'touch' && document.activeElement !== btn) { leave(...pointOf(event)); } }; const onFocus = () => { if (isFocusVisible(btn)) enter(0, btn.offsetHeight / 2); }; const onBlur = () => { if (!btn.matches(':hover')) leave(0, btn.offsetHeight / 2); }; if (cells.length) gsap.set(cells, { opacity: 0 }); if (btn.dataset.active === 'true' && !prefersReducedMotion()) { gsap.set(cells, { opacity: 1, backgroundColor: TEAL }); gsap.set(btn, { color: LIME }); gsap.set(rolls, { yPercent: -100 }); gsap.set(slides, { xPercent: 100 }); } btn.addEventListener('pointerenter', onPointerEnter); btn.addEventListener('pointerleave', onPointerLeave); btn.addEventListener('focus', onFocus); btn.addEventListener('blur', onBlur); return () => { btn.removeEventListener('pointerenter', onPointerEnter); btn.removeEventListener('pointerleave', onPointerLeave); btn.removeEventListener('focus', onFocus); btn.removeEventListener('blur', onBlur); }; }, { scope: btnRef, dependencies: [grid.cols, grid.rows], revertOnUpdate: true } ); return ( ); }; export default PixelFillButton; 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@tween-ui","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/tweenui/pixel-fill-button.tsx","content":"$64","type":"registry:component","target":"components/tweenui/pixel-fill-button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]