Animations & Motion
Kaleidoscope Grid
Four quadrants moving in different directions creating a kaleidoscope effect.
parallaxquadrantsmulti-directionalgrid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs (minimum 4) |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
gridGap | string | gap-4 | Gap between grid items |
gridPadding | string | p-4 | Padding of the grid |
borderRadius | string | rounded-3xl | Border radius of grid items |
borderWidth | string | border-2 | Border width of grid items |
borderColor | string | border-white/10 | Border color of grid items |
imageScale | string | w-[150%] h-[150%] | Scale of images |
imageTransform | string | translate(-20%, -20%) | Transform of images |
imageOpacity | number | 0.8 | Opacity of images |
parallaxDistance | number | 300 | Parallax movement distance |
cornerLabels | string[] | ["NORTH-WEST", "", "", "SOUTH-EAST"] | Labels for corners |
cornerLabelColor | string | text-white | Color of corner labels |
cornerLabelSize | string | text-4xl | Size of corner labels |
centerCircleSize | string | w-20 h-20 | Size of center circle |
centerCircleColor | string | bg-white | Color of center circle |
className | string | Additional CSS classes |