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:T38c4,"use client"; import { useEffect, useRef, type CSSProperties } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; // An intro title, then a pinned "tunnel" where photos explode out of the middle of the screen toward // the camera as you scroll, then an outro title. The flow section pins to the screen and the // scrollbar drives every photo: scroll down and they fly out, scroll up and they fly back in. // The last image in the list is different: it is the full-screen backdrop that grows in behind the rest. // // Fonts: the demo uses Raleway for the titles and Instrument Serif for the flow text. Load them, or set // the CSS variables --images-flow-title-font and --images-flow-flow-font to use your own. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger); export type ImagesFlowImage = { /** Where the picture lives. */ src: string; /** What it shows. Leave it empty for a purely decorative picture (the default). */ alt?: string; }; export type ImagesFlowProps = { /** The pictures. The last one is the full-screen backdrop, the others fly past. Twelve to thirty look best. */ images: (string | ImagesFlowImage)[]; /** The big word before the flow starts. */ introTitle: string; /** A line under the intro title. */ introSubtitle?: string; /** The text that stays in the middle of the screen while the pictures fly. Use a line break for two lines. */ flowText?: string; /** The big word after the flow ends. */ outroTitle: string; /** A line under the outro title. */ outroSubtitle?: string; /** How far the pictures spread sideways on a wide screen. 0.7 puts the outermost ones at 70% of the screen away from the middle. */ spread?: number; /** The same, on a screen narrower than 800px, where the pictures need to travel further to leave the frame. */ mobileSpread?: number; /** How long the flow takes, in screens of scrolling. */ scrollLength?: number; /** How much of the scroll the start times of the pictures are spread over, from 0 (all leave together) to 0.9. */ stagger?: number; /** How fast a picture flies, as a multiple of the whole scroll. 4 means one picture needs a quarter of the scroll. */ flightSpeed?: number; /** Depth of the 3D scene in pixels. Pictures vanish as they pass this distance. Smaller is more dramatic. */ perspective?: number; /** Width of each flying picture, in pixels. On a narrow screen it never goes wider than 90% of it. */ cardWidth?: number; /** Height of each flying picture, in pixels. */ cardHeight?: number; /** How dark the full-screen backdrop is, from 0 (not at all) to 1 (black). */ dim?: number; /** Background of the intro and the outro. */ pageColor?: string; /** Colour of the intro and outro text. */ inkColor?: string; /** Background of the flow section, behind the pictures. */ stageColor?: string; /** The tag of the two big titles: use "h1" if this is the main heading of your page. */ titleAs?: "h1" | "h2" | "h3"; /** 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 wrapper. */ className?: string; }; // Where each picture ends up, as a fraction of the screen (-1 left/top to 1 right/bottom). // A hand-picked scatter, so no two neighbours fly the same way. const SCATTER = [ [-0.8, -0.6], [0.7, 0.4], [-0.5, 0.7], [0.6, -0.5], [-0.8, 0.2], [0.8, -0.3], [-0.6, -0.8], [0.4, 0.6], [-0.7, 0.5], [0.5, -0.7], [-0.4, -0.4], [0.3, 0.8], [-0.8, 0.3], [0.6, 0.2], [-0.2, -0.7], [0.7, -0.6], [-0.5, 0.4], [0.4, -0.4], [-0.6, 0.6], [0.8, 0.5], [-0.3, -0.5], [0.5, 0.3], [-0.7, -0.2], [0.2, 0.7], [-0.4, 0.8], [0.6, -0.8], [-0.8, 0.1], ] as const; /** The target for picture number `index`. Past the hand-picked list it follows a fixed spiral, never random. */ function scatterAt(index: number): { x: number; y: number } { const picked = SCATTER[index]; if (picked) return { x: picked[0], y: picked[1] }; const angle = index * 2.399963; // the golden angle, so neighbours never line up const radius = 0.35 + 0.5 * ((index * 0.618) % 1); return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }; } export function ImagesFlow({ images, introTitle, introSubtitle, flowText = "Twenty-eight photos,\none scroll", outroTitle, outroSubtitle, spread = 0.7, mobileSpread = 1.5, scrollLength = 10, stagger = 0.81, flightSpeed = 4, perspective = 2000, cardWidth = 500, cardHeight = 350, dim = 0.4, pageColor = "#e9e9e9", inkColor = "#1c1c1c", stageColor = "#1c1c1c", titleAs: Heading = "h2", scroller, className = "", }: ImagesFlowProps) { const rootRef = useRef(null); const flowRef = useRef(null); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // These change how the pictures are placed, not how the scroll is wired up. The animation reads // them on every frame, so moving a slider doesn't rebuild the pin. const live = useRef({ spread, mobileSpread, stagger, flightSpeed, perspective }); live.current = { spread, mobileSpread, stagger, flightSpeed, perspective }; // Draws the pictures for the current scroll position. Set by the effect below. const redraw = useRef<(() => void) | null>(null); useEffect(() => { redraw.current?.(); }, [spread, mobileSpread, stagger, flightSpeed, perspective]); const items = images.map((image) => (typeof image === "string" ? { src: image, alt: "" } : { src: image.src, alt: image.alt ?? "" })); const lastIndex = items.length - 1; useGSAP( () => { const root = rootRef.current; const flow = flowRef.current; const cards = cardRefs.current.slice(0, items.length).filter((card): card is HTMLDivElement => card !== null); if (!root || !flow || cards.length === 0) return; const scrollEl = typeof scroller === "string" ? document.querySelector(scroller) : scroller; if (typeof scroller === "string" && !scrollEl) return; // Pictures start in the middle, tiny, and are placed by x / y / z / scale from here on gsap.set(cards, { xPercent: -50, yPercent: -50, x: 0, y: 0, z: 0, scale: 0, force3D: true }); const place = cards.map((card) => ({ x: gsap.quickSetter(card, "x", "px"), y: gsap.quickSetter(card, "y", "px"), z: gsap.quickSetter(card, "z", "px"), scaleX: gsap.quickSetter(card, "scaleX"), scaleY: gsap.quickSetter(card, "scaleY"), })); let width = flow.clientWidth; let height = flow.clientHeight; let progress = 0; // Draws every picture for a scroll position between 0 and 1 const draw = () => { const { spread, mobileSpread, stagger, flightSpeed, perspective } = live.current; const reach = width < 800 ? mobileSpread : spread; const last = cards.length - 1; cards.forEach((card, index) => { // Each picture starts a little after the one before it, and flies for a fixed slice of the scroll. // Clamped to 0..1: a picture that has arrived stays arrived instead of flying on forever. const delay = last > 0 ? (index / last) * stagger : 0; const t = gsap.utils.clamp(0, 1, (progress - delay) * flightSpeed); const isBackdrop = index === last && last > 0; const target = scatterAt(index); let x = target.x * width * reach * t; let y = target.y * height * reach * t; let z = gsap.utils.interpolate(-perspective / 2, perspective, t); if (isBackdrop) { // The backdrop stays in the middle and only grows, at 40% of the speed x = 0; y = 0; z *= 0.4; } place[index]!.x(x); place[index]!.y(y); place[index]!.z(z); place[index]!.scaleX(t); place[index]!.scaleY(t); // A picture that has reached the camera is gone: hide it so it can't flash at the edges card.style.visibility = t <= 0 || (!isBackdrop && z >= perspective - 1) ? "hidden" : "visible"; }); }; redraw.current = draw; const measure = () => { width = flow.clientWidth; height = flow.clientHeight; }; const mm = gsap.matchMedia(); // Reduced motion: no pin and no flying. The flow section is one still frame of the tunnel. mm.add("(prefers-reduced-motion: reduce)", () => { progress = 0.38; measure(); draw(); const onResize = () => { measure(); draw(); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }); mm.add("(prefers-reduced-motion: no-preference)", () => { // Sections are one screen tall. For an inner scroller that is the scroller's height, which CSS can't know. const sizeSections = () => { if (scrollEl) root.style.setProperty("--images-flow-height", `${scrollEl.clientHeight}px`); }; sizeSections(); const trigger = ScrollTrigger.create({ trigger: flow, scroller: scrollEl ?? undefined, start: "top top", end: () => `+=${Math.round(flow.clientHeight * scrollLength)}`, pin: true, pinSpacing: true, scrub: 1, // Measure again whenever ScrollTrigger refreshes (window resize, fonts, pictures), not on every resize event invalidateOnRefresh: true, onRefresh: (self) => { measure(); progress = self.progress; draw(); }, onUpdate: (self) => { progress = self.progress; draw(); }, }); // An inner scroller can change size without the window knowing. Wait for the resizing to settle, then measure once. let settle: gsap.core.Tween | undefined; const observer = scrollEl ? new ResizeObserver(() => { settle?.kill(); settle = gsap.delayedCall(0.2, () => { sizeSections(); ScrollTrigger.refresh(); }); }) : null; if (scrollEl) observer?.observe(scrollEl); return () => { settle?.kill(); observer?.disconnect(); trigger.kill(); }; }); return () => { redraw.current = null; mm.revert(); }; }, { scope: rootRef, dependencies: [items.length, scrollLength, scroller], revertOnUpdate: true }, ); const titleStyle: CSSProperties = { fontFamily: "var(--images-flow-title-font, Raleway, ui-sans-serif, system-ui, sans-serif)", fontSize: "clamp(2rem, 8vw, 6rem)", fontWeight: 200, letterSpacing: "0.3em", // The letter spacing also trails the last letter, so push the word back to the middle textIndent: "0.3em", textTransform: "uppercase", lineHeight: 1.1, marginBottom: "1rem", // A soft fade from the ink to a lighter ink across the word backgroundImage: `linear-gradient(135deg, ${inkColor} 0%, color-mix(in srgb, ${inkColor} 78%, ${pageColor}) 100%)`, WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent", }; const subtitleStyle: CSSProperties = { fontFamily: "var(--images-flow-title-font, Raleway, ui-sans-serif, system-ui, sans-serif)", fontSize: "clamp(0.75rem, 2vw, 1.2rem)", fontWeight: 300, letterSpacing: "0.15em", textIndent: "0.15em", opacity: 0.7, }; const sectionStyle: CSSProperties = { height: "var(--images-flow-height, 100svh)" }; return (

{/* Intro */}

{introTitle} {introSubtitle ?

{introSubtitle}

: null}

{/* Flow: this is the part that pins */}

{flowText}

{items.map((item, index) => { const backdrop = index === lastIndex && lastIndex > 0; return (

{ cardRefs.current[index] = card; }} className={backdrop ? "absolute top-1/2 left-1/2 h-full w-full" : "absolute top-1/2 left-1/2 max-w-[90vw]"} // Before the script runs the pictures sit invisible in the middle, so nothing flashes on load style={{ ...(backdrop ? null : { width: cardWidth, height: cardHeight }), transform: "translate(-50%, -50%) scale(0)", visibility: "hidden", transformStyle: "preserve-3d", willChange: "transform" }} >

{backdrop ?

); })}

{/* Outro */}

{outroTitle} {outroSubtitle ?

{outroSubtitle}

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