4e: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"] 4f: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"] 50:T30c6,"use client"; import { useRef, type CSSProperties } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A full-screen intro loader. A big counter climbs from 0 to 100 while photos clip open one on top // of the other in a tilted stack. When the counter reaches 100 the last photo opens as a window, // grows to fill the whole box and a headline slides up over it. // // The whole thing is one GSAP timeline. Read it from top to bottom: every line says when something // happens (the last number is the time in seconds, or a label like "reveal"). export type ImageLoaderProps = { /** The photos. All but the last one open in the stack, the last one grows into the full-screen hero. Two or more look best. */ images: string[]; /** How long the counter takes to climb from 0 to 100, in seconds. The reveal after it adds about two more. */ duration?: number; /** Show the rolling counter (and the label above it). Turn it off for a counter-free photo intro. */ counterDigits?: boolean; /** Where each photo starts opening from: "center" splits open from the middle line, "bottom" wipes up from its bottom edge. */ clipFrom?: "bottom" | "center"; /** The headline that slides up over the hero photo. */ heroTitle?: string; /** Describes the hero photo for screen readers. Empty means the photo is decoration. */ heroAlt?: string; /** The small word in the top corner while it loads. Empty hides it. */ label?: string; /** Called once the headline has landed (or straight away when the visitor prefers reduced motion). */ onComplete?: () => void; /** Extra classes for the outer box. Give it a size (it fills its parent). Add `bg-...!` to change the paper colour. */ className?: string; }; // How far each photo in the stack leans, in degrees. Used in turn, so any number of photos works. const tilts = [-6, 4.5, -3.5, 5.5, -4.5, 2.5]; // Digits for the rolling columns. Each column is a tall strip of numbers that slides up behind a // one-digit window. The ones column rolls through 20 digits, the tens through 10, the hundreds once. const hundreds = [0, 1]; const tens = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; const ones = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; // The photo frame is 34 by 44 (portrait). On a narrow box it shrinks so it never touches the sides. const FRAME_RATIO = 44 / 34; const frameWidth = (width: number, height: number) => Math.min(height * 0.34, width * 0.72); // A clip path that shows the rectangle between two corners. We use polygon() rather than inset() // because a polygon always has eight distinct numbers to tween, and the browser never rewrites it // into a shorter form (it does that for inset(), which breaks the tween halfway). const rect = (left: number, top: number, right: number, bottom: number, unit: "px" | "%") => `polygon(${left}${unit} ${top}${unit}, ${right}${unit} ${top}${unit}, ${right}${unit} ${bottom}${unit}, ${left}${unit} ${bottom}${unit})`; const photoOpen = rect(0, 0, 100, 100, "%"); export function ImageLoader({ images, duration = 3.2, counterDigits = true, clipFrom = "center", heroTitle = "Welcome in", heroAlt = "", label = "Loading", onComplete, className = "", }: ImageLoaderProps) { const rootRef = useRef(null); // Always the latest callback, so a new function from the parent doesn't restart the loader const onCompleteRef = useRef(onComplete); onCompleteRef.current = onComplete; const stack = images.slice(0, -1); const hero = images[images.length - 1]; const words = heroTitle.split(" ").filter(Boolean); // Photos start closed: a thin line across the middle, or a line along the bottom edge const photoClosed = clipFrom === "bottom" ? rect(0, 100, 100, 100, "%") : rect(0, 50, 100, 50, "%"); useGSAP( () => { const root = rootRef.current; if (!root || !hero) return; const q = gsap.utils.selector(root); const photos = q(".il-photo"); const photoImages = q(".il-photo img"); const heroBox = q(".il-hero")[0]; const heroImage = q(".il-hero img")[0]; const shade = q(".il-shade")[0]; const title = q(".il-title")[0]; const titleWords = q(".il-word"); const digits = q(".il-digit"); const labelText = q(".il-label"); if (!heroBox || !heroImage || !shade || !title) return; const mm = gsap.matchMedia(); // Reduced motion: no counter, no stack. The hero is simply there with its headline. mm.add("(prefers-reduced-motion: reduce)", () => { gsap.set(photos, { autoAlpha: 0 }); gsap.set(heroBox, { clipPath: "none" }); gsap.set([...digits, ...labelText], { autoAlpha: 0 }); gsap.set(shade, { opacity: 1 }); gsap.set(title, { visibility: "visible" }); gsap.set(titleWords, { yPercent: 0 }); onCompleteRef.current?.(); }); mm.add("(prefers-reduced-motion: no-preference)", () => { // The hero starts as a window the size of one photo frame. Clip paths only tween smoothly // between values in the same unit, so the frame is measured in pixels here. const width = root.clientWidth; const height = root.clientHeight; const frame = frameWidth(width, height); const left = (width - frame) / 2; const top = (height - frame * FRAME_RATIO) / 2; const windowOpen = rect(left, top, width - left, height - top, "px"); const windowClosed = clipFrom === "bottom" ? rect(left, height - top, width - left, height - top, "px") : rect(left, height / 2, width - left, height / 2, "px"); const fullBox = rect(0, 0, width, height, "px"); gsap.set(title, { visibility: "visible" }); gsap.set(titleWords, { yPercent: 130 }); // The photos should be ready before anything moves, or they'd pop in half way through const ready = Promise.race([ Promise.all(q("img").map((img) => (img as HTMLImageElement).decode().catch(() => undefined))), new Promise((resolve) => setTimeout(resolve, 4000)), ]); let cancelled = false; const tl = gsap.timeline({ paused: true, onComplete: () => { // Done: let the hero follow the box when it is resized gsap.set(heroBox, { clipPath: "none" }); onCompleteRef.current?.(); }, }); // The counter climbs for `duration` seconds. Everything below hangs off that one number. const climb = Math.max(duration, 0.8); // The photos open one after another, spread over two thirds of the climb const spread = { amount: climb * 0.66, ease: "power1.out" }; if (photos.length > 0) { tl.fromTo(photos, { clipPath: photoClosed }, { clipPath: photoOpen, duration: 0.8, ease: "power4.out", stagger: spread }, 0) // Each photo also settles from slightly zoomed in, as it opens .fromTo(photoImages, { scale: 1.3 }, { scale: 1, duration: 1, ease: "power3.out", stagger: spread }, 0); } // Rolling counter: ones and tens spin for the whole climb (starting slow, ending fast), // the hundreds ticks over to 1 in the last moment const rolling = digits.length > 0; if (rolling) { tl.to(q(".il-ones span"), { yPercent: -2000, duration: climb, ease: "power1.in" }, 0) .to(q(".il-tens span"), { yPercent: -1000, duration: climb, ease: "power1.in" }, 0) .to(q(".il-hundreds span"), { yPercent: -100, duration: 0.4, ease: "power2.in" }, climb - 0.4); } // Just before 100 the hero opens as a thin window in the middle of the stack tl.fromTo(heroBox, { clipPath: windowClosed }, { clipPath: windowOpen, duration: 0.8, ease: "power4.out" }, climb - 0.8); // The reveal. "reveal" is the moment the counter hits 100. tl.addLabel("reveal", climb) // The window grows to the whole box... .to(heroBox, { clipPath: fullBox, duration: 1.2, ease: "power2.inOut" }, "reveal") // ...while the photo inside it settles from a zoom .fromTo(heroImage, { scale: 1.25 }, { scale: 1, duration: 1.6, ease: "power2.out" }, "reveal"); if (rolling) { // The digits slide up and out one after another, and the label fades tl.to(digits, { yPercent: -100, duration: 0.5, ease: "power2.in", stagger: 0.04 }, "reveal+=0.2").to(labelText, { opacity: 0, duration: 0.4 }, "reveal+=0.2"); } // A soft shade under the headline so white text reads on any photo tl.to(shade, { opacity: 1, duration: 1 }, "reveal+=0.4") // The headline slides up out of its mask, one word after another .to(titleWords, { yPercent: 0, duration: 1, ease: "power4.out", stagger: 0.06 }, "reveal+=0.8"); ready.then(() => { if (!cancelled) tl.play(); }); return () => { cancelled = true; tl.kill(); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [images.join("|"), duration, counterDigits, clipFrom, heroTitle, label], revertOnUpdate: true }, ); if (!hero) return null; return (

{counterDigits && ( <> {label && (

{label}

)}

{[ { name: "il-hundreds", list: hundreds }, { name: "il-tens", list: tens }, { name: "il-ones", list: ones }, ].map(({ name, list }) => ( // One column. The extra padding and negative margin stop the digit's edges being clipped.

{list.map((digit, index) => ( {digit} ))}

))}

)} {stack.map((src, index) => ( ))} {/* The hero photo always fills the box. Its clip path is the window that opens and grows. */}

{words.map((word, index) => ( // Each word sits in its own mask (overflow hidden), so it slides up out of nothing {word} {index < words.length - 1 ? " " : null} ))}

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/image-loader/image-loader.tsx","content":"$50","type":"registry:component","target":"components/dimaac/image-loader.tsx"}],"className":"h-[70svh] min-h-80"}]]}]