Animations & Motion
Fracture Assembler
Grid fragments assemble from random 3D positions into a complete image.
scrollrevealfracture3dgrid
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 |