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:T160d,"use client"; import { useRef, type CSSProperties, type ReactNode } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; // Big colour-block sections that flow into each other. As you scroll, the next section swings in // from a tilted angle (like a page being turned) while the section before it stays pinned underneath. // Two small pieces: // wraps everything and runs the animation // one coloured panel. Put any content inside it. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger); export type FlowArtProps = { /** The sections, in order. Use for each one. */ children: ReactNode; /** How far each section is tilted before it swings in, in degrees. */ angle?: number; /** Which bottom corner the section swings around: the left one or the right one. */ from?: "left" | "right"; /** Where on the screen the swing ends, as a fraction of the screen height from the top. 0.25 means a quarter of the way down. */ settle?: number; /** Keep every section pinned in place while the next one covers it. Off, they scroll away normally. */ pin?: boolean; /** How long the swing takes to catch up with the scrollbar, in seconds. 0 locks it to the scrollbar. */ smoothing?: number; /** The scrolling element. Leave it out to use the page; give it a selector or an element for an inner scroller. */ scroller?: string | HTMLElement | Window; /** Extra classes for the outer wrapper. */ className?: string; }; export function FlowArt({ children, angle = 30, from = "left", settle = 0.25, pin = true, smoothing = 0, scroller, className = "" }: FlowArtProps) { const rootRef = useRef(null); useGSAP( () => { const root = rootRef.current; if (!root) return; const mm = gsap.matchMedia(); // Reduced motion: no tilting and no pinning. The sections are just a plain coloured page. mm.add("(prefers-reduced-motion: no-preference)", () => { const sections = gsap.utils.toArray("[data-flow-section]", root); // Swinging round the right corner means turning the other way const direction = from === "right" ? -1 : 1; const origin = from === "right" ? "bottom right" : "bottom left"; sections.forEach((section, index) => { const panel = section.querySelector("[data-flow-panel]"); if (!panel) return; // The first section is simply there. Every other one swings in while it climbs the screen. // scrub ties the swing to the scrollbar, so it swings back out when you scroll up. if (index > 0) { gsap.fromTo( panel, { rotation: angle * direction, transformOrigin: origin }, { rotation: 0, ease: "none", force3D: true, scrollTrigger: { trigger: section, scroller, start: "top bottom", end: `top ${settle * 100}%`, scrub: smoothing > 0 ? smoothing : true }, }, ); } // Hold the section still, with the next one sliding over the top of it. A section taller than // the screen pins by its bottom edge, so everything in it has been scrolled past first. if (pin && index < sections.length - 1) { ScrollTrigger.create({ trigger: section, scroller, start: "bottom bottom", end: "bottom top", pin: true, pinSpacing: false }); } }); // Fonts and pictures arriving late change the heights, so measure the pins again. // A short delay turns a burst of changes into one measurement. let measure: gsap.core.Tween | undefined; const measureSoon = () => { measure?.kill(); measure = gsap.delayedCall(0.2, () => ScrollTrigger.refresh()); }; const observer = new ResizeObserver(measureSoon); // Only the wrapper: a pinned section changes its own box while it sticks, which must not re-trigger this observer.observe(root); let cancelled = false; document.fonts?.ready.then(() => { if (!cancelled) measureSoon(); }); return () => { cancelled = true; measure?.kill(); observer.disconnect(); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [angle, from, settle, pin, smoothing, scroller], revertOnUpdate: true }, ); return (

{children}

); } export type FlowSectionProps = { /** What the section shows. */ children: ReactNode; /** Extra classes for the coloured panel: the background, text colour and padding go here. */ className?: string; /** Inline styles for the panel, e.g. a background colour. */ style?: CSSProperties; }; /** One coloured panel. It is the panel (not the section around it) that swings in, so the corners cut into the section below. */ export function FlowSection({ children, className = "", style }: FlowSectionProps) { return (

{children}

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