Scroll Velocity

Galleries 458

About

A dynamic scrolling component that creates an infinite horizontal scroll effect, responding to vertical scroll velocity. The component can display both images and text in a continuous loop. Features - Smooth infinite horizontal scrolling - Scroll velocity-based animation - Support for both images and text content - Customizable scroll direction and speed - Responsive design - Dark mode compatible

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Velocity to your project and fits it to your theme.

Code

How Scroll Velocity is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { ScrollVelocity } from "@/components/ui/scroll-velocity"
import Image from "next/image"

const images = [
  {
    title: "Moonbeam",
    thumbnail: "https://cdn.21st.dev/assets/mirror/b4/b493a13f9145ec00ad856a1e4f957fb43cc9cc96b77d4083897dc61d53bc823e.jpg",
  },
  {
    title: "Cursor",
    thumbnail: "https://cdn.21st.dev/assets/mirror/11/11f69b7de2dc6933e8b291bbd959534c500a993c41c2a52bde7d1ca50c20d659.jpg",
  },
  {
    title: "Rogue",
    thumbnail: "https://cdn.21st.dev/assets/mirror/71/71299170ad9fee3c654ef7a73edc7e827a1688ee578545ad0b8096b5652750ce.jpg",
  },
  {
    title: "Editorially",
    thumbnail: "https://cdn.21st.dev/assets/mirror/5f/5fe0d32ab00ecf0bb8ac509cb9aafa2cc55fa7c54b8c905dcdfc946ff30936f7.jpg",
  },
  {
    title: "Editrix AI",
    thumbnail: "https://cdn.21st.dev/assets/mirror/55/55a9d54cba84561cab160b55f06311fcdab76cd5803ec6361bce19113596dd13.jpg",
  },
  {
    title: "Moonbeam 2",
    thumbnail: "https://cdn.21st.dev/assets/mirror/b4/b493a13f9145ec00ad856a1e4f957fb43cc9cc96b77d4083897dc61d53bc823e.jpg",
  },
  {
    title: "Cursor 2",
    thumbnail: "https://cdn.21st.dev/assets/mirror/11/11f69b7de2dc6933e8b291bbd959534c500a993c41c2a52bde7d1ca50c20d659.jpg",
  },
  {
    title: "Rogue 2",
    thumbnail: "https://cdn.21st.dev/assets/mirror/71/71299170ad9fee3c654ef7a73edc7e827a1688ee578545ad0b8096b5652750ce.jpg",
  },
  {
    title: "Editorially 2",
    thumbnail: "https://cdn.21st.dev/assets/mirror/5f/5fe0d32ab00ecf0bb8ac509cb9aafa2cc55fa7c54b8c905dcdfc946ff30936f7.jpg",
  },
  {
    title: "Editrix AI 2",
    thumbnail: "https://cdn.21st.dev/assets/mirror/55/55a9d54cba84561cab160b55f06311fcdab76cd5803ec6361bce19113596dd13.jpg",
  },
]

const velocity = [3, -3]

function ScrollVelocityDemo() {
  return (
    <div className="w-full">
      <div className="flex flex-col space-y-5 py-10">
        {velocity.map((v, index) => (
          <ScrollVelocity key={index} velocity={v}>
            {images.map(({ title, thumbnail }) => (
              <div
                key={title}
                className="relative h-[6rem] w-[9rem] md:h-[8rem] md:w-[12rem] xl:h-[12rem] xl:w-[18rem]"
              >
                <Image
                  src={thumbnail}
                  alt={title}
                  fill
                  className="h-full w-full object-cover object-center"
                />
              </div>
            ))}
          </ScrollVelocity>
        ))}
        <ScrollVelocity velocity={5}>You can also use a text!</ScrollVelocity>
      </div>
    </div>
  )
}

export { ScrollVelocityDemo }