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:T3250,"use client"; import { useRef, useSyncExternalStore, type CSSProperties, type ReactNode } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; // A deck of cards in a pinned section. As you scroll, the cards rise into a stack where each one // peeks out under the one in front, then the front card flies off the top, the rest move up a // place, and so on until only the last card is left. One scrubbed timeline does all of it, so // scrolling back plays it in reverse. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger); export type StackFlyCard = { /** The card's photo. */ src: string; /** Describes the photo for screen readers. Empty means it's decoration. */ alt?: string; /** The big serif title. */ title: string; /** A short line under the title. */ lede?: string; /** The paragraph near the bottom of the card. */ body: string; /** Where the card's button goes. No href, no button. */ href?: string; /** The button's label. */ cta?: string; /** The card's colour. Defaults to a palette of five soft tones. */ background?: string; /** The card's text colour. */ foreground?: string; }; export type StackFlyCardsProps = { /** The cards, front card first. Three to six read best. */ cards: StackFlyCard[]; /** How far each card in the stack peeks out under the one in front, in pixels. */ peek?: number; /** How much smaller each card in the stack is than the one in front (0.05 is 5%). */ scaleStep?: number; /** How far a card turns as it flies off, in degrees. */ flyRotate?: number; /** How long the pinned section lasts: screens of scrolling per card. */ scrollLength?: number; /** How long the cards take to catch up with the scrollbar, in seconds. 0 follows it exactly. */ smoothing?: number; /** The scrolling element (an element or a selector). Leave it out to use the page. */ scroller?: HTMLElement | string | null; /** The section's background. The cards' shadows look best on a dark one. */ background?: string; /** The colour of the square behind each button's arrow. */ accent?: string; /** The font of the card titles and numbers. Load it yourself (the demo loads Instrument Serif). */ titleFont?: string; /** Content above the deck, like a heading. It sits over the cards as they fly past. */ children?: ReactNode; /** Extra classes for the heading's box, e.g. "mix-blend-difference" so it inverts over the cards. */ headerClassName?: string; /** Extra classes for the section. It's one screen tall and pins while the cards move. */ className?: string; }; // The five tones from the original video, used in turn when a card has no background of its own const tones = ["#d6ef4a", "#f4f4f2", "#6db5a8", "#e8d5c4", "#c8b8e8"]; // prefers-reduced-motion, live function subscribeToMotion(onChange: () => void) { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; function resolveScroller(scroller: StackFlyCardsProps["scroller"]): HTMLElement | null { if (!scroller) return null; if (typeof scroller === "string") { const element = document.querySelector(scroller); // Pinning against the page when a scroller was asked for looks broken in a confusing way, so say so if (!element && typeof process !== "undefined" && process.env.NODE_ENV !== "production") console.warn("StackFlyCards: scroller not found", scroller); return element; } return scroller; } export function StackFlyCards({ cards, peek = 42, scaleStep = 0.045, flyRotate = 25, scrollLength = 1, smoothing = 0.6, scroller = null, background = "#121212", accent = "#d6ef4a", titleFont = '"Instrument Serif", "Times New Roman", Times, serif', children, headerClassName = "", className = "", }: StackFlyCardsProps) { const sectionRef = useRef(null); const cardRefs = useRef<(HTMLElement | null)[]>([]); // Where the scroller was, so rebuilding the timeline (a control changed) doesn't jump the page const lastScroll = useRef(0); const reducedMotion = useSyncExternalStore(subscribeToMotion, prefersReducedMotion, () => false); useGSAP( () => { const section = sectionRef.current; const deck = cardRefs.current.slice(0, cards.length).filter((card): card is HTMLElement => card !== null); if (!section || deck.length === 0 || reducedMotion) return; const scrollerElement = resolveScroller(scroller); const viewportHeight = () => (scrollerElement ? scrollerElement.clientHeight : window.innerHeight); // Where card i sits in the stack: lower down and a little smaller for every card in front of it const pose = (i: number) => ({ y: i * peek, scale: 1 - i * scaleStep }); // In a scrolling element the section is as tall as that element, not the window const fitHeight = () => { if (scrollerElement) section.style.minHeight = `${scrollerElement.clientHeight}px`; }; fitHeight(); ScrollTrigger.addEventListener("refreshInit", fitHeight); // Scaling from the top edge keeps each card's top where the peek puts it gsap.set(deck, { zIndex: (i: number) => deck.length - i, transformOrigin: "50% 0%", force3D: true }); const timeline = gsap.timeline({ scrollTrigger: { trigger: section, scroller: scrollerElement ?? undefined, start: "top top", end: () => `+=${deck.length * viewportHeight() * scrollLength}`, pin: true, scrub: smoothing > 0 ? smoothing : true, invalidateOnRefresh: true, }, }); // 1. The cards rise from below the fold into the stack, one a moment after another deck.forEach((card, i) => { timeline.fromTo( card, { y: () => viewportHeight() * 0.72 + i * peek, scale: pose(i).scale * 0.9, rotation: 0 }, { ...pose(i), ease: "power3.out", duration: 1.35 }, i * 0.06, ); }); // A short rest with the whole stack in view timeline.to({}, { duration: 0.35 }); const flyAt = timeline.duration(); // 2. The front card flies off the top and everything behind it moves up a place. // The last card stays: it's where the section ends. deck.slice(0, -1).forEach((card, i) => { const behind = deck.slice(i + 1); timeline.to(card, { y: () => -viewportHeight() * 1.15, rotation: -flyRotate, scale: 0.94, ease: "none", duration: 1 }, flyAt + i); timeline.to(behind, { y: (index: number) => pose(index).y, scale: (index: number) => pose(index).scale, ease: "none", duration: 1 }, flyAt + i); }); // A short rest on the last card before the section scrolls away timeline.to({}, { duration: 0.4 }); const trigger = timeline.scrollTrigger; if (!trigger) return; // On a rebuild (a prop changed), taking the old pin out made the page shorter for a moment // and the browser pulled the scroll back. Measure the new pin now and put the scroll back. if (lastScroll.current > 0) { trigger.refresh(); if (Math.abs(trigger.scroll() - lastScroll.current) > 1) trigger.scroll(lastScroll.current); } const scrollTarget: HTMLElement | Window = scrollerElement ?? window; const onScroll = () => { lastScroll.current = trigger.scroll(); }; scrollTarget.addEventListener("scroll", onScroll, { passive: true }); // Tabbing to a button on a card that's behind (or already gone) scrolls to where it's in front const onFocusIn = (event: FocusEvent) => { const index = deck.findIndex((card) => card.contains(event.target as Node)); if (index < 0) return; const progress = Math.min(1, (flyAt + index) / timeline.duration()); trigger.scroll(trigger.start + (trigger.end - trigger.start) * progress); }; section.addEventListener("focusin", onFocusIn); return () => { ScrollTrigger.removeEventListener("refreshInit", fitHeight); scrollTarget.removeEventListener("scroll", onScroll); section.removeEventListener("focusin", onFocusIn); section.style.minHeight = ""; }; }, { scope: sectionRef, dependencies: [cards.length, peek, scaleStep, flyRotate, scrollLength, smoothing, scroller, reducedMotion], revertOnUpdate: true }, ); return (

{children ?

{children}

: null}

{/* Reduced motion: no pin, no flight. The cards are a plain column you scroll past. */}

{cards.map((card, index) => (

{ cardRefs.current[index] = element; }} className={`${reducedMotion ? "relative h-[min(80vh,580px)] md:h-[min(62vh,540px)]" : "absolute inset-0 will-change-transform"} flex flex-col gap-4 rounded-[3px] p-5 shadow-[0_18px_50px_rgba(0,0,0,0.28)] md:grid md:grid-cols-[1.15fr_0.85fr] md:gap-[clamp(1rem,3vw,2.5rem)] md:p-[clamp(1.25rem,3vw,2.25rem)]`} style={ { background: card.background ?? tones[index % tones.length], color: card.foreground ?? "#141414", // The button's focus ring uses the card's text colour, so it shows on light and dark cards alike "--card-fg": card.foreground ?? "#141414", zIndex: reducedMotion ? undefined : cards.length - index, } as CSSProperties & Record<"--card-fg", string> } >

{card.title}

{card.lede ?

{card.lede}

: null}

{card.body}

{card.href ? ( {card.cta ?? "Discover our approach"} ) : 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/stack-fly-cards/stack-fly-cards.tsx","content":"$52","type":"registry:component","target":"components/dimaac/stack-fly-cards.tsx"}],"className":"h-[70svh] min-h-80"}]]}]