52: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"] 53: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"] 54:T20d9,"use client"; import { useLayoutEffect, useRef, useState, type ReactNode } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export type ScrollStoryChapter = { id: string; eyebrow?: string; title: string; copy?: string; scene: ReactNode; }; export type ScrollStoryProps = { chapters: readonly ScrollStoryChapter[]; label: string; emptyLabel?: string; height?: number; className?: string; }; export function ScrollStory({ chapters, label, emptyLabel = "No chapters available.", height = 360, className = "" }: ScrollStoryProps) { const root = useRef(null); const scroller = useRef(null); const stage = useRef(null); const sections = useRef(new Map()); const chaptersRef = useRef(chapters); const lastActiveIndex = useRef(chapters.length > 0 ? 0 : -1); const [activeId, setActiveId] = useState(() => chapters[0]?.id ?? null); const [reduced, setReduced] = useState(null); chaptersRef.current = chapters; const matchedActiveIndex = activeId === null ? -1 : chapters.findIndex((chapter) => chapter.id === activeId); const activeIndex = matchedActiveIndex >= 0 ? matchedActiveIndex : chapters.length > 0 ? activeId === null ? 0 : Math.min(Math.max(lastActiveIndex.current, 0), chapters.length - 1) : -1; const current = chapters[activeIndex] ?? null; const effectiveActiveId = current?.id ?? null; useLayoutEffect(() => { if (chapters.length === 0) { lastActiveIndex.current = -1; if (activeId !== null) setActiveId(null); return; } if (matchedActiveIndex >= 0) { lastActiveIndex.current = matchedActiveIndex; return; } if (effectiveActiveId === null) return; lastActiveIndex.current = activeIndex; setActiveId(effectiveActiveId); }, [activeId, activeIndex, chapters.length, effectiveActiveId, matchedActiveIndex]); useLayoutEffect(() => { const shell = root.current; const scroll = scroller.current; if (!shell || !scroll || chapters.length === 0) return; const media = gsap.matchMedia(); media.add( { reduceMotion: "(prefers-reduced-motion: reduce)" }, (context) => { const reduce = Boolean(context.conditions?.reduceMotion); setReduced(reduce); const triggers = chapters.flatMap((chapter) => { const section = sections.current.get(chapter.id); if (!section) return []; return ScrollTrigger.create({ trigger: section, scroller: scroll, start: "top 58%", end: "bottom 42%", onToggle: ({ isActive }) => { if (!isActive) return; const liveIndex = chaptersRef.current.findIndex((item) => item.id === chapter.id); if (liveIndex < 0) return; lastActiveIndex.current = liveIndex; setActiveId(chapter.id); }, }); }); return () => triggers.forEach((trigger) => trigger.kill()); }, shell, ); return () => media.revert(); }, [chapters]); useLayoutEffect(() => { const node = stage.current; if (!node || reduced === null) return; if (reduced) { gsap.set(node, { clearProps: "transform,filter,opacity" }); return; } const tween = gsap.fromTo( node, { opacity: 0.42, y: 14, scale: 0.985, filter: "blur(5px)" }, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", duration: 0.26, ease: "power3.out", overwrite: true }, ); return () => { tween.kill(); }; }, [effectiveActiveId, reduced]); if (!current) { return (

{emptyLabel}

); } const scrollToChapter = (id: string) => { const scroll = scroller.current; const section = sections.current.get(id); if (!scroll || !section) return; const nextIndex = chapters.findIndex((chapter) => chapter.id === id); if (nextIndex >= 0) { lastActiveIndex.current = nextIndex; setActiveId(id); } const scrollRect = scroll.getBoundingClientRect(); const sectionRect = section.getBoundingClientRect(); const sectionTop = scroll.scrollTop + sectionRect.top - scrollRect.top; const centeredTop = sectionTop - (scroll.clientHeight - sectionRect.height) / 2; scroll.scrollTo({ top: Math.max(0, centeredTop), behavior: reduced === false ? "smooth" : "auto", }); }; return (

{chapters.map((chapter) => (

{ if (node) sections.current.set(chapter.id, node); else sections.current.delete(chapter.id); }} className="grid min-h-[72%] content-center py-6" >

))}

{current.scene}

{chapters.map((chapter) => ( ))}

{current.title}

); } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/scroll-story.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/scroll-story.tsx"}],"className":"h-[70svh] min-h-80"}]]}]