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:T1fa0,"use client"; import { Children, useRef, type CSSProperties, type ReactNode } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; // Full-screen sections that stack like a deck of cards. Each one pins to the top of the page, and // while the next section slides up over it, the pinned one shrinks, tilts back and fades to dark, // as if it were being pushed away. Four small pieces: // wraps everything and runs the animation // and the plain dark openers and closers // one card in the stack. The animated ones are the sections. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger); export type PinRotateSectionsProps = { /** The intro, the sections and the outro, in order. Sections are found by . */ children: ReactNode; /** How much each section shrinks while it is pushed away. 0.25 ends at 75% of its size. */ shrink?: number; /** How far each section tips back, in degrees. The direction alternates from card to card. */ tilt?: number; /** How far each section turns in the page plane, in degrees. Also alternates. */ twist?: number; /** How dark a pushed-away section gets, from 0 (not at all) to 1 (black). */ dim?: number; /** Depth of the tilt, in pixels. Smaller is more dramatic. Below about 800 the corners can glitch. */ perspective?: number; /** The colour that shows behind and around the shrinking sections. */ backdrop?: string; /** 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; }; export function PinRotateSections({ children, shrink = 0.25, tilt = 40, twist = 5, dim = 0.4, perspective = 2200, backdrop = "#1a1a1a", scroller, className = "", }: PinRotateSectionsProps) { const rootRef = useRef(null); // The effect has to start again when sections are added or removed const childCount = Children.count(children); useGSAP( () => { const root = rootRef.current; if (!root) return; const mm = gsap.matchMedia(); // Reduced motion: no pinning and no tilting. The sections are just a normal page. mm.add("(prefers-reduced-motion: no-preference)", () => { const sections = gsap.utils.toArray("[data-pin-rotate-section]", root); const last = sections[sections.length - 1]; if (!last) return; // The scroller can be a selector or an element: find the element once. A selector must be looked up // here, outside the scope, because the scope only searches inside this wrapper and the scroller is // always outside it. Using the element also lets us measure the scroller's height, not the window's. const scrollEl = (typeof scroller === "string" ? document.querySelector(scroller) : scroller) ?? undefined; // The height we measure sections against: the scroller's, or the window's const viewHeight = () => (scrollEl ? scrollEl.clientHeight : window.innerHeight); sections.forEach((section, index) => { const next = sections[index + 1]; // The last card doesn't move: it is the one everything is pushed away by if (!next) return; const direction = index % 2 === 0 ? 1 : -1; const overlay = section.querySelector("[data-pin-rotate-overlay]"); // Pin the card until the last one arrives, so the next card slides over the top of it. // A card taller than the screen (common on phones) pins by its bottom edge instead, // so its whole content gets read before it is covered. ScrollTrigger.create({ trigger: section, scroller: scrollEl, start: () => (section.offsetHeight > viewHeight() ? "bottom bottom" : "top top"), endTrigger: last, end: "top top", pin: true, pinSpacing: false, }); // While the next card climbs from the bottom edge to the top, the pinned card is pushed away. // scrub ties the animation to the scrollbar, so it runs back when you scroll up. const away = gsap.timeline({ defaults: { ease: "none" }, scrollTrigger: { trigger: next, scroller: scrollEl, start: "top bottom", end: "top top", scrub: true }, }); away.to(section, { scale: 1 - shrink, rotation: direction * twist, rotationX: direction * tilt, transformPerspective: perspective || 0, force3D: true }, 0); if (overlay) away.to(overlay, { opacity: dim }, 0); }); // Pictures arriving late change the page height, so measure the pins again. // A short delay turns a burst of loads into one measurement. let measure: gsap.core.Tween | undefined; const observer = new ResizeObserver(() => { measure?.kill(); measure = gsap.delayedCall(0.2, () => ScrollTrigger.refresh()); }); // Only the wrapper: a pinned card changes its own box while it sticks, which must not re-trigger this observer.observe(root); return () => { measure?.kill(); observer.disconnect(); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [childCount, shrink, tilt, twist, dim, perspective, scroller], revertOnUpdate: true }, ); return (

{children}

); } export type PinRotateIntroProps = { /** The opening words: usually a heading and a paragraph. */ children: ReactNode; /** Extra classes: change the colours, the height or the padding here. */ className?: string; }; /** A full-height dark opener. It scrolls normally. */ export function PinRotateIntro({ children, className = "" }: PinRotateIntroProps) { return (

{children}

); } export type PinRotateSectionProps = { /** What the card shows. */ children: ReactNode; /** Extra classes: the background, text colour and padding. Cards are paper-coloured by default. */ className?: string; /** Inline styles for the card, e.g. a background image. */ style?: CSSProperties; }; /** One card of the stack. It pins, then shrinks and darkens as the next card covers it. */ export function PinRotateSection({ children, className = "", style }: PinRotateSectionProps) { return (

{children} {/* The shadow that grows over the card as it is pushed away */}

); } export type PinRotateOutroProps = { /** The closing words. */ children: ReactNode; /** Extra classes: change the colours, the height or the padding here. */ className?: string; }; /** A full-height dark closer. The last card slides up over the stack and ends on this. */ export function PinRotateOutro({ children, className = "" }: PinRotateOutroProps) { return (

{children}

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