Animations & Motion
Gallery Walk
Curved path animation with cards following a smooth trajectory.
scrollrevealgallerycurvedpath
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 |