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.