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:T2ae5,"use client"; import { useRef, type CSSProperties } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; // A title with a grid of work under it. Each piece arrives as you scroll to it, and there are two // ways it can arrive: // "rise" the picture flies up from below, tipped over 50 degrees, and settles upright // "fall" the picture sits under a solid tile, and the tile tumbles away down the page // The grid is plain CSS, so it works with any number of columns. Only the arrival is animated, so // with no JavaScript, or with reduced motion, every picture is simply there. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger); export type ProofOfWorkItem = { /** Address of the picture. */ image: string; /** Alt text for the picture. Falls back to the title. */ imageAlt?: string; /** The name of the piece, shown in capitals under the picture. */ title: string; /** A short line under the title, such as the kind of work. */ subtitle?: string; }; export type ProofOfWorkProps = { /** The pieces, in reading order. */ works: ProofOfWorkItem[]; /** The big heading above the grid. */ title?: string; /** A small line under the heading. Leave it out to hide it. */ tagline?: string; /** Which tag the heading uses. Pick h1 when this is the main title of the page. */ titleAs?: "h1" | "h2" | "h3"; /** How a piece arrives: "rise" flies the picture up from below, "fall" drops a cover tile away from it. */ effect?: "rise" | "fall"; /** How many columns the grid has from tablet width up. It is always one column on a phone. */ columns?: number; /** The shape of every picture as a CSS aspect-ratio, e.g. "4 / 5", "1 / 1" or "16 / 10". */ aspectRatio?: string; /** For "rise": how far each picture is tipped over before it settles, in degrees. The direction alternates. */ rotation?: number; /** For "rise": how far below its place each picture starts, in pixels (a little less on phones). */ distance?: number; /** How long one arrival takes, in seconds. */ duration?: number; /** Extra wait for each column after the first, in seconds, so a row arrives left to right. */ columnDelay?: number; /** The GSAP ease of the arrival. */ ease?: string; /** For "fall": the colour of the cover tile. "currentColor" follows the text colour, so it works in light and dark. */ coverColor?: string; /** Show a small running number next to each title. */ showNumbers?: boolean; /** Play the arrival again, backwards, when you scroll back up past a piece. Off means it plays once. */ replay?: boolean; /** When a piece arrives, as a ScrollTrigger start such as "top 85%". Leave it out for a good default per effect. */ start?: string; /** The scrolling element. Leave it out to use the page; give it a selector or an element for an inner scroller. */ scroller?: string | HTMLElement; /** Extra classes for the outer box. Set a background and a text colour here. */ className?: string; /** Extra classes for the heading, e.g. a font family. */ titleClassName?: string; /** Extra classes for each picture box, e.g. a radius. */ imageClassName?: string; }; // The grid switches from one column to many at the same width as Tailwind's md: breakpoint const WIDE_SCREEN = "(min-width: 768px)"; export function ProofOfWork({ works, title = "Proof of Work", tagline, titleAs: Heading = "h2", effect = "rise", columns = 2, aspectRatio = "4 / 5", rotation = 50, distance = 500, duration = 1, columnDelay = 0.25, ease = "power2.inOut", coverColor = "currentColor", showNumbers = true, replay = false, start, scroller, className = "", titleClassName = "", imageClassName = "", }: ProofOfWorkProps) { const rootRef = useRef(null); useGSAP( () => { const root = rootRef.current; if (!root) return; const mm = gsap.matchMedia(); // Reduced motion adds nothing here: every picture stays where the page put it mm.add({ motion: "(prefers-reduced-motion: no-preference)", wide: WIDE_SCREEN }, (context) => { const { motion, wide } = context.conditions ?? {}; if (!motion) return; const items = gsap.utils.toArray("[data-pow-item]", root); const columnCount = wide ? Math.max(1, Math.round(columns)) : 1; const trigger = start ?? (effect === "fall" ? "top 80%" : "top 88%"); const scrollerBox = typeof scroller === "string" ? document.querySelector(scroller) : scroller; const viewHeight = () => scrollerBox?.clientHeight ?? window.innerHeight; // Phones are short, so the pictures start a little closer const rise = wide ? distance : distance * 0.7; items.forEach((item, index) => { const media = item.querySelector("[data-pow-media]"); const cover = item.querySelector("[data-pow-cover]"); const caption = item.querySelector("[data-pow-caption]"); if (!media) return; // Each piece has its own timeline, started by its own ScrollTrigger. It plays once by default. const arrival = gsap.timeline({ scrollTrigger: { trigger: item, scroller, start: trigger, once: !replay, toggleActions: "play none none reverse", }, }); // Pieces further along the row arrive a beat later const wait = (index % columnCount) * columnDelay; if (effect === "rise") { arrival.fromTo( media, { rotation: index % 2 === 0 ? -rotation : rotation, y: rise, opacity: 0, transformOrigin: "50% 50%" }, { rotation: 0, y: 0, opacity: 1, duration, ease }, wait, ); } else if (cover) { // The tile is hidden by default so the page works without JavaScript. Show it now. gsap.set(cover, { autoAlpha: 1 }); arrival.to( cover, { x: () => gsap.utils.random(-100, 100), // Far enough to leave the screen, but never past the bottom of this component y: () => { const room = root.getBoundingClientRect().bottom - item.getBoundingClientRect().top; return Math.min(viewHeight() * 2 + gsap.utils.random(0, 400), room + 80); }, rotation: () => gsap.utils.random(-180, 180), // Near the bottom of the component the tile fades out, so it never gets cut off in view opacity: () => (root.getBoundingClientRect().bottom - item.getBoundingClientRect().top < viewHeight() * 2 ? 0 : 1), duration: duration * 1.35, ease: "power3.in", }, wait, ); arrival.set(cover, { autoAlpha: 0 }); } if (caption) { arrival.fromTo(caption, { opacity: 0, y: 14 }, { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, wait + duration * 0.45); } }); // Fonts and pictures change the page height after the first measure, so measure again. // A short delay turns a burst of changes into one measure. let measure: gsap.core.Tween | undefined; const observer = new ResizeObserver(() => { measure?.kill(); measure = gsap.delayedCall(0.2, () => ScrollTrigger.refresh()); }); observer.observe(root); return () => { measure?.kill(); observer.disconnect(); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [works.length, effect, columns, rotation, distance, duration, columnDelay, ease, replay, start, scroller], revertOnUpdate: true }, ); return (

{title} {tagline ?

{tagline}

: null}

{/* The cover sits outside the clipped picture box, so it can tumble out of it */} {effect === "fall" ?
{work.title} {work.subtitle ? {work.subtitle} : null} {showNumbers ? ( ) : null}

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