Infinite Scroll

Continuous horizontal or vertical scrolling content with seamless looping.

scrollinfiniteloopmarquee

Installation

Terminalbash
npx motioncraft add infinite-scroll

Usage

infinite-scroll.tsxtsx
import { InfiniteScroll } from "@/components/scroll/infinite-scroll";

<InfiniteScroll direction="left" speed={1.5}>
  <span>Scrolling text</span>
</InfiniteScroll>

Props

PropTypeDefaultDescription
children*ReactNode—Content to scroll
direction'left' | 'right''left'Scroll direction
speednumber1Scroll speed

Related Components

Scroll Video

New

Video that advances frame-by-frame as the user scrolls. Apple-style product reveal effect with sticky positioning.

Parallax Scroll

Parallax scrolling effect with configurable speed and direction.

Infinite Grid

New

Perspective grid that scrolls infinitely with direction-aware coloring and edge fading.

Stack Cards

New

Cards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.