4f: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"] 50: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"] 51: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"] 52:T357c,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode, } from "react"; import { useReducedMotion } from "motion/react"; export type MediaCarouselItem = { id: string; title: string; eyebrow?: string; description?: string; meta?: string; art: ReactNode; }; export type MediaCarouselProps = { items: readonly MediaCarouselItem[]; label?: string; copy?: Partial; initialIndex?: number; className?: string; onSelect?: (item: MediaCarouselItem, index: number) => void; }; export type MediaCarouselCopy = { collection: string; emptyCollection: string; previousSlide: string; nextSlide: string; carouselRole: string; slideRole: string; position: (index: number, total: number) => string; instructions: string; }; const DEFAULT_COPY: MediaCarouselCopy = { collection: "Collection", emptyCollection: "No slides available.", previousSlide: "Previous slide", nextSlide: "Next slide", carouselRole: "carousel", slideRole: "slide", position: (index, total) => `${index} of ${total}`, instructions: "Swipe or scroll through the slides. Use Left and Right Arrow, Home, or End from the carousel to move between slides.", }; const clampIndex = (value: number, length: number) => Math.min(Math.max(value, 0), Math.max(0, length - 1)); const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; const PREVIOUS_ICON = ( ); const NEXT_ICON = ( ); export function MediaCarousel({ items, label = "Featured stories", copy: copyOverrides, initialIndex = 0, className = "", onSelect, }: MediaCarouselProps) { const copy = { ...DEFAULT_COPY, ...copyOverrides }; const reduced = useReducedMotion() === true; const titleId = useId(); const viewportRef = useRef(null); const slideRefs = useRef>([]); const scrollFrameRef = useRef(null); const initialPositionedRef = useRef(false); const itemIdSequence = JSON.stringify(items.map((item) => item.id)); const positionedItemIdSequenceRef = useRef(itemIdSequence); const initialActiveIndex = items.length > 0 ? clampIndex(initialIndex, items.length) : -1; const [activeId, setActiveId] = useState( () => items[initialActiveIndex]?.id ?? null, ); const activeIdRef = useRef(activeId); const activeIndexRef = useRef(initialActiveIndex); const matchedActiveIndex = activeId === null ? -1 : items.findIndex((item) => item.id === activeId); const activeIndex = matchedActiveIndex >= 0 ? matchedActiveIndex : items.length > 0 ? activeId === null ? initialActiveIndex : clampIndex(activeIndexRef.current, items.length) : -1; const activeItemId = items[activeIndex]?.id ?? null; useIsomorphicLayoutEffect(() => { if (items.length === 0) { initialPositionedRef.current = false; positionedItemIdSequenceRef.current = itemIdSequence; slideRefs.current = []; activeIdRef.current = null; activeIndexRef.current = -1; if (activeId !== null) setActiveId(null); return; } if (activeIndex < 0 || activeItemId === null) return; const previousActiveIndex = activeIndexRef.current; const itemOrderChanged = positionedItemIdSequenceRef.current !== itemIdSequence; const retainedActiveItemMoved = activeId === activeItemId && itemOrderChanged && previousActiveIndex !== activeIndex; positionedItemIdSequenceRef.current = itemIdSequence; if (activeId === null) { activeIdRef.current = activeItemId; activeIndexRef.current = activeIndex; setActiveId(activeItemId); } else if (activeId === activeItemId) { activeIndexRef.current = activeIndex; } if (initialPositionedRef.current && !retainedActiveItemMoved) return; const viewport = viewportRef.current; const slide = slideRefs.current[activeIndex]; if (!viewport || !slide) return; viewport.scrollLeft = slide.offsetLeft - viewport.offsetLeft; initialPositionedRef.current = true; }, [activeId, activeIndex, activeItemId, itemIdSequence, items.length]); useEffect(() => { if (activeId === null || matchedActiveIndex >= 0 || items.length === 0) return; const index = clampIndex(activeIndexRef.current, items.length); const item = items[index]; activeIdRef.current = item.id; activeIndexRef.current = index; setActiveId(item.id); onSelect?.(item, index); }, [activeId, items, matchedActiveIndex, onSelect]); useEffect( () => () => { if (scrollFrameRef.current !== null) { cancelAnimationFrame(scrollFrameRef.current); } }, [], ); const selectIndex = useCallback( (nextIndex: number) => { if (items.length === 0) return; const index = clampIndex(nextIndex, items.length); const item = items[index]; if (activeIdRef.current === item.id) { activeIndexRef.current = index; return; } activeIdRef.current = item.id; activeIndexRef.current = index; setActiveId(item.id); onSelect?.(item, index); }, [items, onSelect], ); const goTo = useCallback( (nextIndex: number, animate: boolean, focus = false) => { if (items.length === 0) return; const index = clampIndex(nextIndex, items.length); const viewport = viewportRef.current; const slide = slideRefs.current[index]; if (!viewport || !slide) return; viewport.scrollTo({ left: slide.offsetLeft - viewport.offsetLeft, behavior: animate && !reduced ? "smooth" : "auto", }); selectIndex(index); if (focus) slide.focus({ preventScroll: true }); }, [items.length, reduced, selectIndex], ); const updateFromScroll = () => { if (scrollFrameRef.current !== null) return; scrollFrameRef.current = requestAnimationFrame(() => { scrollFrameRef.current = null; const viewport = viewportRef.current; if (!viewport || items.length === 0) return; const center = viewport.scrollLeft + viewport.clientWidth / 2; let nearest = 0; let distance = Number.POSITIVE_INFINITY; slideRefs.current.forEach((slide, index) => { if (!slide) return; const nextDistance = Math.abs(slide.offsetLeft + slide.offsetWidth / 2 - center); if (nextDistance < distance) { distance = nextDistance; nearest = index; } }); selectIndex(nearest); }); }; const onKeyDown = (event: React.KeyboardEvent) => { const keyTargets: Record = { ArrowLeft: activeIndex - 1, ArrowRight: activeIndex + 1, Home: 0, End: items.length - 1, }; const next = keyTargets[event.key]; if (next === undefined) return; event.preventDefault(); goTo(next, false, true); }; const hasPrevious = activeIndex > 0; const hasNext = activeIndex < items.length - 1; const arrowMotionClass = reduced ? "transition-[background-color,color] duration-150" : "transition-[background-color,color,transform] duration-150 active:scale-[0.96] disabled:active:scale-100"; return (

{copy.collection}

{label}

{items.length === 0 ? "00 / 00" : `${String(activeIndex + 1).padStart(2, "0")} / ${String(items.length).padStart(2, "0")}`}

{items.length === 0 ? (

{copy.emptyCollection}

) : null} {items.map((item, index) => { const active = index === activeIndex; return (

); })}

{copy.instructions}

); } 4b:["$","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"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/media-carousel.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/media-carousel","itemId":"@motion-lexicon/media-carousel"}],["$","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"}],["$","$L51",null,{"files":[{"path":"src/registry/components/media-carousel.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/media-carousel.tsx"}]}]]}],"$L53"]}]

Media Carousel

Installation

Files

components

Styles