51: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T22d1,"use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import Image from "next/image"; import { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState, } from "react"; import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion"; export interface InfiniteScrollingImagesItem { alt?: string; src: string; } export interface InfiniteScrollingImagesProps extends Omit, "children"> { /** Enable automatic frame progression. @default false */ autoplay?: boolean; /** Seconds between auto-advance steps when autoplay is enabled. @default 3 */ autoplayIntervalSeconds?: number; /** Vertical spacing between cards in pixels. @default -30 */ frameOffset?: number; /** Number of visible cards (excluding buffered cards). @default 3 */ framesVisible?: number; /** Cards to display in an infinite loop. */ items: InfiniteScrollingImagesItem[]; /** Whether ArrowUp / ArrowDown keys should move frames. @default true */ keyboardControls?: boolean; /** Minimum ms between frame updates while scrolling. @default 75 */ minUpdateInterval?: number; /** Number of cards rendered before/after visible range. @default 8 */ renderBuffer?: number; /** Scroll delta threshold before moving to next frame. @default 40 */ scrollThreshold?: number; } const REMOTE_IMAGE_SRC = /^https?:\/\//; const REDUCED_MOTION_VISIBLE = 1; function isRemoteImageSrc(src: string): boolean { return REMOTE_IMAGE_SRC.test(src); } function clamp(value: number, min: number, max: number): number { return Math.min(Math.max(value, min), max); } function wrapIndex(index: number, length: number): number { return ((index % length) + length) % length; } function InfiniteScrollingImages({ autoplay = false, autoplayIntervalSeconds = 3, className, frameOffset = -30, framesVisible = 3, items, keyboardControls = true, minUpdateInterval = 75, renderBuffer = 8, scrollThreshold = 40, ...props }: InfiniteScrollingImagesProps) { const [currentIndex, setCurrentIndex] = useState(0); const containerRef = useRef(null); const scrollAccumulatorRef = useRef(0); // Seeded at 0, not Date.now(): reading the clock during render breaks // Next.js static prerendering. The actual value doesn't matter here — it // only needs to be far enough in the past that the first scroll flush // isn't throttled by the `elapsed < minUpdateInterval` check below. const lastUpdateTimeRef = useRef(0); const touchStartYRef = useRef(0); const prefersReducedMotion = usePrefersReducedMotion(); const updateFrame = useCallback( (delta: number) => { if (items.length === 0 || delta === 0) { return; } setCurrentIndex((previous) => previous + delta); }, [items.length] ); const flushScrollAccumulator = useCallback(() => { const now = Date.now(); const elapsed = now - lastUpdateTimeRef.current; if (Math.abs(scrollAccumulatorRef.current) < scrollThreshold) { return; } if (elapsed < minUpdateInterval) { return; } const delta = scrollAccumulatorRef.current > 0 ? 1 : -1; updateFrame(delta); scrollAccumulatorRef.current = 0; lastUpdateTimeRef.current = now; }, [minUpdateInterval, scrollThreshold, updateFrame]); useEffect(() => { if (!keyboardControls || prefersReducedMotion) { return; } const onKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowDown" || event.key === "ArrowRight") { updateFrame(1); } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") { updateFrame(-1); } }; window.addEventListener("keydown", onKeyDown); return () => { window.removeEventListener("keydown", onKeyDown); }; }, [keyboardControls, prefersReducedMotion, updateFrame]); useEffect(() => { if (!autoplay || prefersReducedMotion || items.length === 0) { return; } const intervalMs = Math.max(0.25, autoplayIntervalSeconds) * 1000; const intervalId = window.setInterval(() => { updateFrame(1); }, intervalMs); return () => { window.clearInterval(intervalId); }; }, [ autoplay, autoplayIntervalSeconds, items.length, prefersReducedMotion, updateFrame, ]); useEffect(() => { if (prefersReducedMotion) { return; } const container = containerRef.current; if (!container) { return; } const onWheel = (event: WheelEvent) => { event.preventDefault(); scrollAccumulatorRef.current += event.deltaY; flushScrollAccumulator(); }; const onTouchStart = (event: TouchEvent) => { touchStartYRef.current = event.touches[0]?.clientY ?? 0; }; const onTouchMove = (event: TouchEvent) => { event.preventDefault(); const touchY = event.touches[0]?.clientY ?? touchStartYRef.current; const deltaY = touchStartYRef.current - touchY; touchStartYRef.current = touchY; scrollAccumulatorRef.current += deltaY; flushScrollAccumulator(); }; container.addEventListener("wheel", onWheel, { passive: false }); container.addEventListener("touchstart", onTouchStart, { passive: false }); container.addEventListener("touchmove", onTouchMove, { passive: false }); return () => { container.removeEventListener("wheel", onWheel); container.removeEventListener("touchstart", onTouchStart); container.removeEventListener("touchmove", onTouchMove); }; }, [flushScrollAccumulator, prefersReducedMotion]); const safeFramesVisible = prefersReducedMotion ? REDUCED_MOTION_VISIBLE : Math.max(1, framesVisible); const start = currentIndex - renderBuffer; const end = currentIndex + safeFramesVisible + renderBuffer; const visibleCards: Array<{ imageIndex: number; index: number }> = []; for (let index = start; index <= end; index += 1) { visibleCards.push({ imageIndex: wrapIndex(index, items.length), index, }); } return (

{visibleCards.map((card) => { const item = items[card.imageIndex]; if (!item) { return null; } const offsetIndex = card.index - currentIndex; const blur = currentIndex > card.index ? 2 : 0; const opacity = currentIndex > card.index ? 0 : 1; const scale = clamp(1 - offsetIndex * 0.08, 0.08, 2); const y = clamp( offsetIndex * frameOffset, frameOffset * safeFramesVisible, Number.POSITIVE_INFINITY ); return ( {item.alt

); })}

); } export { InfiniteScrollingImages }; 4d:["$","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"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["@soralabs/hooks-use-prefers-reduced-motion"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.soralabs.io.vn/r/infinite-scrolling-images.json","proxyUrl":"https://shadcnregistry.com/r/soralabs/infinite-scrolling-images","itemId":"@soralabs/infinite-scrolling-images"}],["$","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"}],["$","$L53",null,{"files":[{"path":"registry/primitives/effects/infinite-scrolling-images/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/effects/infinite-scrolling-images.tsx"}]}]]}],"$L55"]}]

Infinite Scrolling Images

Installation

Files

components

Styles