Fracture Assembler
Grid fragments assemble from random 3D positions into a complete image.
Main Features of Fracture Assembler
How to Use Fracture Assembler in Next.js
Installation Guide for Fracture Assembler
Props
Customize the component with these 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 |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.