Animations & Motion
Parallax Slits
Vertical columns that move in alternating directions creating a shredder effect.
parallaxcolumnsverticalfragmentation
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
columns | number | 12 | Number of columns |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[250vh] | Height of the container |
scrollDistance | number | 400 | Scroll distance for parallax |
borderColor | string | border-black/50 | Border color between columns |
section1Bg | string | bg-zinc-800 | Background color of first section |
section2Bg | string | bg-zinc-900 | Background color of second section |
section2BorderColor | string | border-red-500 | Border color of second section |
imageOpacity | number | 0.6 | Opacity of images |
text | string | Fragmentation | Text displayed |
textColor | string | text-4xl | Color class of the text |
textSize | string | text-4xl | Size of the text |
textBgColor | string | bg-white | Background color of text container |
className | string | Additional CSS classes |