Gallery Walk
Curved path animation with cards following a smooth trajectory.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs |
| backgroundColor | string | bg-neutral-100 | Background color of the component |
| containerHeight | string | h-[200vh] | Height of the container |
| title | string | CURVATURE | Title text displayed |
| titleColor | string | text-neutral-300 | Color of the title |
| titleSize | string | text-4xl | Size of the title |
| cardWidth | string | w-[400px] | Width of each card |
| cardHeight | string | h-[500px] | Height of each card |
| gap | string | gap-10 | Gap between cards |
| paddingLeft | string | pl-[50vw] | Left padding |
| xRange | [string, string] | ["20%", "-100%"] | X position range |
| yRange | [number, number, number] | [100, -100, 100] | Y position range |
| rotateRange | [number, number] | [10, -10] | Rotation range in degrees |
| scrollOffset | [string, string] | ["start end", "end start"] | Scroll offset configuration |
| className | string | Additional CSS classes |
When to Use
Perfect for high-end photography sites, event galleries, and modern web applications that want to showcase images with a sense of rhythm and flow. This React component is ideal for making vertical scrolling feel horizontal and cinematic.
Best Practices
Maintain consistent spacing within your design system by adjusting the `gap` and `paddingLeft` props. Follow React best practices by ensuring the `yRange` isn't so extreme that it causes cards to leave the viewport too early. Optimize for performance in large-scale applications by lazy-loading the images in the carousel.
Why This Component Matters
Curved paths and non-linear motion are difficult to get right. This production-ready component provides a robust implementation of a 'gallery walk' that adds incredible visual interest and premium feel to your real-world application architecture.
FAQ
QCan I customize the curve shape?
Yes, by adjusting the `yRange` array, you can define the vertical arc that the cards follow as they move across the screen.
QDoes it support text-only cards?
Absolutely! While designed for images, the card containers can hold any React elements including text, icons, or custom components.
QIs the rotation mandatory?
No, you can set the `rotateRange` to [0, 0] if you prefer a perfectly horizontal, non-tilting gallery walk.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.