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:T2235,"use client"; import { useRef } from "react"; import { gsap } from "gsap"; import { SplitText } from "gsap/SplitText"; import { useGSAP } from "@gsap/react"; if (typeof window !== "undefined") gsap.registerPlugin(SplitText, useGSAP); // A full-box loading curtain. Tilted photo cards open up one after another, the brand name rises // letter by letter with a counter beside it, then the cards shrink away and the curtain lifts to // show whatever sits underneath. Put it inside a `relative` box that is as big as the page you reveal. export type FashionPreloaderProps = { /** The photos, one per card (they stack in this order). Four to eight look best. */ images: string[]; /** The big word in the middle. */ brand?: string; /** How long the counter takes to run from 0 to 100, in seconds. The whole intro lasts about 3 seconds longer. */ duration?: number; /** How far the cards lean, in degrees. 8 is the original look. 0 stacks them straight. */ tilt?: number; /** Show the 000 to 100 counter next to the brand. */ counter?: boolean; /** The curtain colour. */ background?: string; /** The colour of the brand name and counter. */ color?: string; /** Called when the curtain starts to lift. Use it to start the entrance of the page underneath. */ onReveal?: () => void; /** Called when the curtain has gone. */ onComplete?: () => void; /** Extra classes for the curtain, e.g. the font. Give the brand a font here, it inherits it. */ className?: string; }; // Each card leans by this share of `tilt`, so the pile fans out in both directions. // At tilt 8 these are the angles 8, -3, -10, 10, -7, 5. const LEAN = [1, -0.375, -1.25, 1.25, -0.875, 0.625]; // Cards start as a small square in the middle of the photo and open up to the full card const CLOSED = "polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%)"; const OPEN = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"; // The curtain lifts by pulling its bottom edge up to the top const CURTAIN_UP = "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)"; const RISE = { yPercent: 100, rotation: 10, transformOrigin: "0% 100%" }; export function FashionPreloader({ images, brand = "DiMaac", duration = 3, tilt = 8, counter = true, background = "#14161c", color = "#e8e2d6", onReveal, onComplete, className = "", }: FashionPreloaderProps) { const rootRef = useRef(null); const brandRef = useRef(null); const titleRef = useRef(null); const countRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // The callbacks are read when they fire, so passing a new function never restarts the intro const onRevealRef = useRef(onReveal); onRevealRef.current = onReveal; const onCompleteRef = useRef(onComplete); onCompleteRef.current = onComplete; useGSAP( () => { const root = rootRef.current; const brandBox = brandRef.current; const title = titleRef.current; const count = countRef.current; const cards = cardRefs.current.slice(0, images.length).filter((card): card is HTMLDivElement => card !== null); if (!root || !brandBox || !title) return; const angle = (i: number) => (LEAN[i % LEAN.length] ?? 0) * tilt; const finish = () => { root.setAttribute("aria-hidden", "true"); gsap.set(root, { display: "none" }); onCompleteRef.current?.(); }; const mm = gsap.matchMedia(); // Reduced motion: no flying cards. The loader shows its finished frame for a moment, // fades out, and the page underneath takes over. mm.add("(prefers-reduced-motion: reduce)", () => { gsap.set(cards, { visibility: "visible", rotation: angle, xPercent: -50, yPercent: -50, clipPath: OPEN }); gsap.set(brandBox, { visibility: "visible" }); if (count) count.textContent = "100"; const hold = gsap.timeline({ delay: Math.min(duration, 1.2) }); hold.to(root, { opacity: 0, duration: 0.4, ease: "power1.out" }); hold.call(() => onRevealRef.current?.(), [], 0); hold.call(finish); }); mm.add("(prefers-reduced-motion: no-preference)", () => { // The letters sit in masks, so each one rises out of a clip and nothing shows below const split = SplitText.create(title, { type: "chars", mask: "chars" }); // The tight letter spacing makes glyphs overhang their box, so pad the masks to keep the edges gsap.set(split.masks, { paddingInline: "0.08em", marginInline: "-0.08em" }); gsap.set(cards, { xPercent: -50, yPercent: -50, scale: 0, rotation: angle, clipPath: CLOSED, visibility: "visible" }); gsap.set(split.chars, RISE); if (count) gsap.set(count, { yPercent: 100 }); // When every moment happens, in seconds. Cards open first, the counter starts a little later, // and the exit begins just after the counter reaches 100. const cardsOpenEnd = 1 + (cards.length - 1) * 0.2; const counterStart = 0.85; const exitAt = Math.max(counterStart + duration + 0.4, cardsOpenEnd + 0.25); const curtainAt = exitAt + 1.1; const tl = gsap.timeline({ paused: true, delay: 0.3 }); tl.to(cards, { scale: 1, clipPath: OPEN, duration: 1, ease: "power3.inOut", stagger: 0.2 }, 0); tl.set(brandBox, { visibility: "visible" }, 0.35); tl.to(split.chars, { yPercent: 0, rotation: 0, duration: 1, ease: "power3.out", stagger: 0.04 }, 0.35); if (count) { tl.to(count, { yPercent: 0, duration: 1, ease: "power3.out" }, 0.35); const progress = { value: 0 }; tl.to( progress, { value: 100, duration, ease: "power2.inOut", onUpdate: () => { count.textContent = String(Math.round(progress.value)).padStart(3, "0"); }, }, counterStart, ); tl.to(count, { yPercent: -100, duration: 0.75, ease: "power3.in" }, exitAt); } tl.to(split.chars, { yPercent: -100, rotation: -10, duration: 0.75, ease: "power3.in", stagger: 0.04 }, exitAt); tl.to(cards, { scale: 0, clipPath: CLOSED, duration: 1, ease: "power3.inOut", stagger: -0.075 }, exitAt + 0.25); tl.to(root, { clipPath: CURTAIN_UP, duration: 1, ease: "power3.inOut" }, curtainAt); tl.call(() => onRevealRef.current?.(), [], curtainAt + 0.3); tl.call(finish, [], curtainAt + 1); // Start once the photos have decoded (or after a moment), so a card never opens empty let cancelled = false; const photos = Array.from(root.querySelectorAll("img")); const ready = Promise.all(photos.map((image) => image.decode().catch(() => undefined))); const timeout = new Promise((resolve) => window.setTimeout(resolve, 1500)); void Promise.race([ready, timeout]).then(() => { if (!cancelled) tl.play(); }); return () => { cancelled = true; tl.kill(); split.revert(); root.removeAttribute("aria-hidden"); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [images.join("|"), brand, duration, tilt, counter], revertOnUpdate: true }, ); return (

{images.map((src, index) => (

{ cardRefs.current[index] = card; }} aria-hidden="true" className="absolute top-1/2 left-1/2 aspect-[5/6] w-[clamp(160px,17vw,300px)]" style={{ visibility: "hidden", willChange: "transform, clip-path" }} >

))}

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