Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout.
Main Features of Broken Shard Gallery
How to Use Broken Shard Gallery in Next.js
Installation Guide for Broken Shard Gallery
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 |
Related Components
When to Use
Perfect for high-energy product reveals, 'breaking news' sections, and experimental Next.js landing pages. Use this React component when you want to create a chaotic yet organized explosion of imagery that settles as the user scrolls.
Best Practices
Follow React best practices by setting a `textFadeRange` that allows the central message to be read clearly. Maintain scalable component architecture by using a balanced `images` array that populates the layout without overlapping too much. Optimize for performance by using optimized image formats.
Why This Component Matters in Modern UI Development
Explosions and shard layouts add a dynamic, energetic quality to web galleries. This customizable UI component gives you a production-level implementation of complex fragment-based motion, adding semantic authority to your real-world application architecture.
Frequently Asked Questions
QCan I customize the shard positions?
Yes, the `positions` prop allows you to define exactly where each image starts and ends its 'shattering' journey.
QHow many images works best?
The component is designed for 6-12 shards for a truly 'broken' look, but it can work with fewer for a cleaner layout.
QIs the explosion speed adjustable?
The motion is mapped to scroll progress, so the 'explosion' happens as fast or as slow as the user scrolls.