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
"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 }Part of Edil Ozi — browse the full library on 21st.dev.