Gallery Walk
Curved path animation with cards following a smooth trajectory.
Main Features of Gallery Walk
How to Use Gallery Walk in Next.js
Installation Guide for Gallery Walk
Props
Customize the component with these 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 |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.