Fracture Assembler
Grid fragments assemble from random 3D positions into a complete image.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?q=80&w=1000&auto=format&fit=crop | Image URL |
| rows | number | 5 | Number of rows in the grid |
| cols | number | 5 | Number of columns in the grid |
| backgroundColor | string | bg-neutral-900 | Background color of the component |
| containerHeight | string | h-[200vh] | Height of the container |
| gridWidth | string | w-[800px] | Width of the grid |
| gridHeight | string | h-[600px] | Height of the grid |
| perspective | string | perspective-[1000px] | CSS perspective value |
| gap | string | gap-0.5 | Gap between grid cells |
| offsetRange | number | 1500 | Range of random offset |
| zOffsetRange | number | 1000 | Range of Z offset |
| scrollProgressRange | [number, number] | [0, 0.8] | Scroll progress range |
| opacityRange | [number, number] | [0, 1] | Opacity range |
| opacityProgressRange | [number, number] | [0, 0.5] | Opacity progress range |
| text | string | ASSEMBLE | Text displayed |
| textColor | string | text-white | Color of the text |
| textSize | string | text-7xl | Size of the text |
| textProgressRange | [number, number] | [0.7, 1] | Text progress range |
| scrollOffset | [string, string] | ["start end", "end end"] | Scroll offset configuration |
| className | string | Additional CSS classes |
When to Use
Excellent for tech brands, data dashboards, and Next.js applications that want to emphasize construction or data assembly. This customizable UI component is perfect for intro sections where you want to reveal a 'big picture' piece by piece.
Best Practices
Optimize for performance in large-scale applications by keeping the `rows` and `cols` at a reasonable level (e.g., 5x5 or 6x6). Follow React best practices by using the `offsetRange` to create enough chaos before the assembly. Maintain scalable component architecture by using responsive grid width and height props.
Why This Component Matters
3D grid assembly is a powerful visual metaphor for modern frontend development. This animated UI component allows you to transition from abstract chaos to a sharp, meaningful image, adding semantic authority to your project's storytelling.
FAQ
QCan the pieces rotate as they assemble?
Yes, the component includes 3D rotation logic that can be enabled to make the fragments spin into place for extra energy.
QWhat image aspect ratio works best?
The component is flexible, but it works best with high-resolution images that match the `gridWidth` and `gridHeight` aspect ratio.
QHow fast do the pieces assemble?
The assembly speed is tied to the scroll position, giving the user full control over the 'magical' construction moment.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.