Scroll Trigger

Horizontal infinite rows powered by motion. Base speed plus page-scroll velocity. Pauses when offscreen, hidden, or when the user prefers reduced motion. Wrap rows in ScrollTriggerContainer so they share one scroll signal.

Default

Three review rows: scroll the page to speed them up. Opposite direction values cross traffic.

Loading…

Installation

CLI

npx @sonojs/ui@latest add scroll-trigger

Also needsnpm i motion

Usage

page.tsx

"use client"

import {
  ScrollTriggerContainer,
  ScrollTriggerRow,
} from "@/components/3d/scroll-trigger"

export default function Page() {
  return (
    <ScrollTriggerContainer className="w-full">
      <ScrollTriggerRow baseVelocity={5} direction={1}>
        <div className="mx-4 rounded-lg bg-primary px-4 py-2 text-primary-foreground">
          Item 1
        </div>
        <div className="mx-4 rounded-lg bg-muted px-4 py-2">Item 2</div>
        <div className="mx-4 rounded-lg bg-muted px-4 py-2">Item 3</div>
      </ScrollTriggerRow>
    </ScrollTriggerContainer>
  )
}

Props

ScrollTriggerContainer

Prop	Type	Default	Description
children	ReactNode	-	Usually one or more `ScrollTriggerRow` elements.
className	string	-	Classes on the outer wrapper.

ScrollTriggerRow

Prop	Type	Default	Description
children	ReactNode	-	Items in the row. Duplicated automatically for a seamless loop.
baseVelocity	number	5	Base speed as a percent of one content block width per second.
direction	1 · -1	1	Travel direction along the row.
scrollReactivity	boolean	true	When false, ignore page-scroll speed boost.
className	string	-	Classes on the row overflow wrapper.