A grid where two columns scroll in oposite directions, giving a parallax effect.
"use client";
import { ParallaxScrollSecond } from "@/components/ui/parallax-scroll";
export function ParallaxScrollSecondDemo() {
return <ParallaxScrollSecond images={images} />;
}
const images = [
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/62/623fd1531de4b4116b5ccb9e26eaa9ffc27395a79c0d280ca6db8a692ce6720c.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/62/623fd1531de4b4116b5ccb9e26eaa9ffc27395a79c0d280ca6db8a692ce6720c.jpg",
"https://cdn.21st.dev/assets/mirror/c6/c6e571a103f505fd959c7828bbc50452b0571806a9ae6b1d6c7b2200966eb165.jpg",
"https://cdn.21st.dev/assets/mirror/ba/baf57bef7738ac27ff3fb5715e536e40f9b9b04cc5fbb83713df1ad31a2578ef.jpg",
"https://cdn.21st.dev/assets/mirror/69/69513e8df47a4a11cd4522e21a473f4f568454df87e2ca28f17e403ce281e76e.jpg",
"https://cdn.21st.dev/assets/mirror/c3/c30cc786bc1b22c2e4c4f12e4ab819c61d8e8e80269e3df4596c7b684ffe865d.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/62/623fd1531de4b4116b5ccb9e26eaa9ffc27395a79c0d280ca6db8a692ce6720c.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/62/623fd1531de4b4116b5ccb9e26eaa9ffc27395a79c0d280ca6db8a692ce6720c.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
"https://cdn.21st.dev/assets/mirror/62/623fd1531de4b4116b5ccb9e26eaa9ffc27395a79c0d280ca6db8a692ce6720c.jpg",
"https://cdn.21st.dev/assets/mirror/38/3824fce0f86b8c7b341a2a8541dd58e4bfe54ce40608dc3ff8716fe152740d68.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0a753d1d2c89c21c1936a906b7570a6ace0bb6e98e703d4b6e7a8ba6ca60ea9e.jpg",
];
Part of Aceternity UI — browse the full library on 21st.dev.