50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 53:T1a90,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; export type ScrollMediaExpansionSlide = { id: string; eyebrow: string; title: string; description: string; image: string; imageAlt: string; accent?: string; }; export type ScrollMediaExpansionProps = { slides: readonly ScrollMediaExpansionSlide[]; label?: string; initialIndex?: number; className?: string; onChange?: (slide: ScrollMediaExpansionSlide, index: number) => void; }; const clamp = (value: number, max: number) => Math.max(0, Math.min(value, Math.max(0, max))); export function ScrollMediaExpansion({ slides, label = "Scroll media expansion", initialIndex = 0, className = "", onChange, }: ScrollMediaExpansionProps) { const reduced = useReducedMotion() === true; const titleId = useId(); const scrollerRef = useRef(null); const itemRefs = useRef>([]); const frameRef = useRef(null); const [activeIndex, setActiveIndex] = useState(() => clamp(initialIndex, slides.length)); const active = slides[activeIndex]; useEffect(() => { setActiveIndex((index) => clamp(index, slides.length)); }, [slides.length]); useEffect(() => () => { if (frameRef.current !== null) cancelAnimationFrame(frameRef.current); }, []); const select = (index: number, focus = false) => { const nextIndex = clamp(index, slides.length); const next = slides[nextIndex]; if (!next) return; setActiveIndex(nextIndex); onChange?.(next, nextIndex); const target = itemRefs.current[nextIndex]; target?.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "center" }); if (focus) target?.focus({ preventScroll: true }); }; const onScroll = () => { if (frameRef.current !== null) return; frameRef.current = requestAnimationFrame(() => { frameRef.current = null; const scroller = scrollerRef.current; if (!scroller || slides.length === 0) return; const center = scroller.getBoundingClientRect().top + scroller.clientHeight / 2; let closest = activeIndex; let distance = Number.POSITIVE_INFINITY; itemRefs.current.forEach((item, index) => { if (!item) return; const rect = item.getBoundingClientRect(); const nextDistance = Math.abs(rect.top + rect.height / 2 - center); if (nextDistance < distance) { closest = index; distance = nextDistance; } }); if (closest !== activeIndex && slides[closest]) { setActiveIndex(closest); onChange?.(slides[closest], closest); } }); }; if (!active) { return

No media available.

; } return (

{active.eyebrow}

{active.title}

{active.description}

{String(activeIndex + 1).padStart(2, "0")} / {String(slides.length).padStart(2, "0")}

{ if (event.key === "ArrowDown" || event.key === "ArrowRight") { event.preventDefault(); select(activeIndex + 1, true); } if (event.key === "ArrowUp" || event.key === "ArrowLeft") { event.preventDefault(); select(activeIndex - 1, true); } if (event.key === "Home") { event.preventDefault(); select(0, true); } if (event.key === "End") { event.preventDefault(); select(slides.length - 1, true); } }} tabIndex={0} aria-label={`${label} chapters`} className="flex overflow-x-auto overscroll-contain border-t border-white/10 bg-[#1d211f] p-2 outline-none [scrollbar-width:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#c3ff69] md:block md:overflow-y-auto md:border-l md:border-t-0 md:p-3" > {slides.map((slide, index) => { const selected = index === activeIndex; return ( ); })}

); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/scroll-media-expansion.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/scroll-media-expansion","itemId":"@motion-lexicon/scroll-media-expansion"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"src/registry/components/scroll-media-expansion.tsx","content":"$53","type":"registry:ui","target":"components/motion-lexicon/scroll-media-expansion.tsx"}]}]]}],"$L54"]}]

Scroll Media Expansion

Installation

Files

components

Styles