About
A grid where two columns scroll in oposite directions, giving a parallax effect.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Parallax Grid Scroll to your project and fits it to your theme.
Code
How Parallax Grid Scroll is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"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",
];
Dependencies
More by Manu Arora
View all
Container Scroll Animation
10.2K
Glowing Effect
4.4K
Aurora Background
4.4K
Timeline
4.3K
Sparkles
4.1K
Lamp
3.7K
Sidebar
3.6K
Bento Grid
2.7K
More in Galleries
View all
Thumbnail image viewer
39
Animated Gallery
1.4K
Editorial Collage Hero
422
Hero Section 6
876
Elastic Gallery
896
Layout Grid
820
Tilted Grid Hero
1.4K
3D Carousel
2.5K
