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:T204f,"use client"; import { useRef, type ReactNode } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A loader that opens like a film title. Two words sit in the middle of the screen, then they // spread apart and a small tilted card pops up between them. The card straightens, grows to fill // the whole box and shows the picture, and the title rises word by word on top of it. // // Colours come from CSS variables so the host page can theme it (see className): // --film-bg the loader background --film-fg the loader words // --film-on text and header on the image export type FilmSplitLoaderProps = { /** The two loader words: one goes left of the card, one goes right. */ words?: [string, string]; /** The picture the card grows into. */ src: string; /** Alt text for the picture. Leave empty if it is only decoration. */ alt?: string; /** How much the card is tilted while it pops up, in degrees. It straightens as it grows. */ rotate?: number; /** How long the whole opening takes, in seconds (from the first word to the full-screen picture). */ duration?: number; /** How far apart the two words spread, as a percentage of the box width. On narrow boxes it grows so the card always fits. */ gap?: number; /** The big line that rises over the picture once it is full screen. */ title?: string; /** The smaller line under the title. */ subtitle?: string; /** Your own header or navigation, shown over the picture. It fades in while the card grows. */ children?: ReactNode; /** Called when the title has finished rising. */ onComplete?: () => void; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; }; // How big the card is at the start, as a share of the box width, for a few box widths function cardSize(boxWidth: number) { if (boxWidth <= 480) return { w: 0.35, h: 0.5 }; if (boxWidth <= 768) return { w: 0.3, h: 0.4 }; if (boxWidth <= 1024) return { w: 0.18, h: 0.25 }; return { w: 0.1, h: 0.15 }; } // Each word sits in its own clipped box so it can slide up from below the line function RiseWords({ text, className }: { text: string; className: string }) { return (

{text.split(" ").map((word, index, all) => ( {word} {index < all.length - 1 ? " " : ""} ))}

); } export function FilmSplitLoader({ words = ["Di", "Maac"], src, alt = "", rotate = -8, duration = 2.4, gap = 20, title, subtitle, children, onComplete, className = "", }: FilmSplitLoaderProps) { const boxRef = useRef(null); const loaderRef = useRef(null); const wordsRef = useRef(null); const cardRef = useRef(null); const imageRef = useRef(null); const contentRef = useRef(null); // Read when the timeline finishes, so a new callback doesn't replay the opening const onCompleteRef = useRef(onComplete); onCompleteRef.current = onComplete; useGSAP( () => { const box = boxRef.current; const loader = loaderRef.current; const heading = wordsRef.current; const card = cardRef.current; const image = imageRef.current; const content = contentRef.current; if (!box || !loader || !heading || !card || !image || !content) return; const riseWords = gsap.utils.toArray("[data-rise]", box); const mm = gsap.matchMedia(); // Reduced motion: no opening. The picture is already full screen and the text is in place. mm.add("(prefers-reduced-motion: reduce)", () => { gsap.set(loader, { autoAlpha: 0 }); gsap.set(card, { autoAlpha: 1, width: "100%", height: "100%" }); gsap.set(content, { opacity: 1 }); onCompleteRef.current?.(); }); mm.add("(prefers-reduced-motion: no-preference)", () => { const boxWidth = box.clientWidth; const size = cardSize(boxWidth); const cardWidth = boxWidth * size.w; // The words must spread wide enough for the card to fit between them const spread = Math.max((boxWidth * gap) / 100, cardWidth * 1.6); gsap.set(loader, { autoAlpha: 1 }); gsap.set(heading, { opacity: 0, columnGap: 8 }); gsap.set(card, { autoAlpha: 1, width: cardWidth, height: boxWidth * size.h, rotation: rotate, scale: 0 }); gsap.set(image, { scale: 1.5 }); gsap.set(content, { opacity: 0 }); // Start from a clean transform, so a replay never stacks on where the last run ended gsap.set(riseWords, { clearProps: "transform" }); gsap.set(riseWords, { yPercent: 120 }); // Part one: words appear, spread apart, the card pops up, grows and straightens. // It is built in "natural" seconds and then stretched to the duration you asked for. const opening = gsap.timeline({ defaults: { ease: "power2.inOut" } }); opening .to(heading, { opacity: 1, duration: 0.5, ease: "power2.out" }) .to(heading, { columnGap: spread, duration: 0.8 }, 0.4) .to(card, { scale: 1, duration: 0.8 }, 0.4) .to(card, { rotation: 0, width: "100%", height: "100%", duration: 1.5 }, 1.2) .to(image, { scale: 1, duration: 1.5 }, 1.5) .to(content, { opacity: 1, duration: 0.6, ease: "power2.out" }, 2.1) .set(loader, { autoAlpha: 0 }); opening.duration(Math.max(0.2, duration)); // Part two: the title rises word by word const tl = gsap.timeline({ paused: true, onComplete: () => onCompleteRef.current?.() }); tl.add(opening).to(riseWords, { yPercent: 0, duration: 0.5, stagger: 0.03, ease: "power3.out" }, "-=0.2"); // Wait for the picture so the card never grows empty (but never wait longer than 1.5 s) let cancelled = false; const ready = Promise.race([image.decode().catch(() => undefined), new Promise((resolve) => window.setTimeout(resolve, 1500))]); void ready.then(() => { if (!cancelled) tl.play(); }); return () => { cancelled = true; }; }); return () => mm.revert(); }, { scope: boxRef, dependencies: [rotate, duration, gap, words[0], words[1], title, subtitle], revertOnUpdate: true }, ); return (

{/* The loader: the two words, centred, with the background */} {/* The card that grows into the picture */}

{/* What sits on the picture: your header, then the title */}

{children}

{title || subtitle ? (

{title ? : null} {subtitle ? : null}

) : null}

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