Animations & Motion
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout.
parallaxexplosiongalleryscroll
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
positions | Array<{x: number, y: number, r: number}> | [] | Array of position configurations |
backgroundColor | string | bg-neutral-900 | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
cardWidth | string | w-64 | Width of each card |
cardHeight | string | h-80 | Height of each card |
text | string | Disintegrate | Text displayed |
textColor | string | text-white | Color of the text |
textSize | string | text-6xl | Size of the text |
textFadeRange | [number, number] | [0, 0.2] | Text fade progress range |
textScaleRange | [number, number] | [1, 3] | Text scale range |
scaleRange | [number, number, number] | [1, 0.8, 1.2] | Card scale range |
className | string | Additional CSS classes |