Scroll Based Velocity

PreviewCode

Velocity Scroll

Velocity Scroll

@/demos/ScrollBasedVelocityDemo.tsx

import {
  ScrollVelocityContainer,
  ScrollVelocityRow,
} from '@/registry/magicui/scroll-based-velocity'

export function ScrollBasedVelocityDemo() {
  return (
    <div class="
      relative flex w-full flex-col items-center justify-center overflow-hidden
    "
    >
      <ScrollVelocityContainer class="
        text-4xl font-bold tracking-[-0.02em]
        md:text-7xl/20
      "
      >
        <ScrollVelocityRow baseVelocity={20} direction={1}>
          Velocity Scroll
        </ScrollVelocityRow>
        <ScrollVelocityRow baseVelocity={20} direction={-1}>
          Velocity Scroll
        </ScrollVelocityRow>
      </ScrollVelocityContainer>
      <div class="
        pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-linear-to-r
        from-background
      "
      />
      <div class="
        pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-linear-to-l
        from-background
      "
      />
    </div>
  )
}

PreviewCode

@/demos/ScrollBasedVelocityImagesDemo.tsx

import { For } from 'solid-js'
import {
  ScrollVelocityContainer,
  ScrollVelocityRow,
} from '@/registry/magicui/scroll-based-velocity'

const IMAGES_ROW_A = [
  'https://images.unsplash.com/photo-1749738456487-2af715ab65ea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://plus.unsplash.com/premium_photo-1720139288219-e20aa9c8895b?q=80&w=1810&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
]

const IMAGES_ROW_B = [
  'https://images.unsplash.com/photo-1749738456487-2af715ab65ea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://plus.unsplash.com/premium_photo-1720139288219-e20aa9c8895b?q=80&w=1810&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
]

export function ScrollBasedVelocityImagesDemo() {
  return (
    <div class="
      relative flex w-full flex-col items-center justify-center overflow-hidden
      py-8
    "
    >
      <ScrollVelocityContainer class="w-full">
        <ScrollVelocityRow baseVelocity={6} direction={1} class="py-4">
          <For each={IMAGES_ROW_A}>
            {src => (
              <img
                src={`${src}&ixlib=rb-4.0.3`}
                alt="Unsplash sample"
                width={240}
                height={160}
                loading="lazy"
                decoding="async"
                class="
                  mx-4 inline-block h-40 w-60 rounded-lg object-cover shadow-sm
                "
              />
            )}
          </For>
        </ScrollVelocityRow>
        <ScrollVelocityRow baseVelocity={6} direction={-1} class="py-4">
          <For each={IMAGES_ROW_B}>
            {src => (
              <img
                src={`${src}&ixlib=rb-4.0.3`}
                alt="Unsplash sample"
                width={240}
                height={160}
                loading="lazy"
                decoding="async"
                class="
                  mx-4 inline-block h-40 w-60 rounded-lg object-cover shadow-sm
                "
              />
            )}
          </For>
        </ScrollVelocityRow>
      </ScrollVelocityContainer>

      <div class="
        pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-linear-to-r
        from-background
      "
      />
      <div class="
        pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-linear-to-l
        from-background
      "
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/scroll-based-velocity

bun

bunx shadcn@latest add @magicui-solid/scroll-based-velocity

yarn

yarn dlx shadcn@latest add @magicui-solid/scroll-based-velocity

npm

npx shadcn@latest add @magicui-solid/scroll-based-velocity

Import

import {
  ScrollVelocityContainer,
  ScrollVelocityRow,
} from '@/components/magicui/scroll-based-velocity'

Usage

<ScrollVelocityContainer class="text-4xl font-bold md:text-7xl">
  <ScrollVelocityRow baseVelocity={20} direction={1}>
    Velocity Scroll
  </ScrollVelocityRow>
  <ScrollVelocityRow baseVelocity={20} direction={-1}>
    Velocity Scroll
  </ScrollVelocityRow>
</ScrollVelocityContainer>

Props

ScrollVelocityContainer

Prop	Type	Default	Description
class	string	-	The class name to be applied to the component
children	JSX.Element	-	Content to be animated

ScrollVelocityRow

Prop	Type	Default	Description
class	string	-	The class name to be applied to the row container
children	JSX.Element	-	Content to be duplicated and scrolled
baseVelocity	number	5	Base scroll velocity percentage of content width
direction	1 or -1	1	Scroll direction (1 = left-to-right, -1 = reverse)
scrollReactivity	boolean	true	Toggles scroll interactivity

Performance

• Pauses updates when offscreen and when the tab is hidden.
• Respects user preference for reduced motion.

Original:

magicui.design/docs/components/scroll-based-velocity