Kaleidoscope Grid
Four quadrants moving in different directions creating a kaleidoscope effect.
Main Features of Kaleidoscope Grid
How to Use Kaleidoscope Grid in Next.js
Installation Guide for Kaleidoscope Grid
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 |
Related Components
When to Use
Perfect for high-end digital agencies, creative studios, and Next.js applications that want to emphasize multi-faceted visions. Use this React component for an interactive grid that moves in four different directions simultaneously.
Best Practices
Follow React best practices by using at least four distinct images for the quadrants. Maintain scalable component architecture by using high-contrast `cornerLabels` to anchor the design. Optimize for performance in large-scale applications by using clean quadrant-based transforms.
Why This Component Matters in Modern UI Development
Symmetrical, multi-directional motion is visually arresting and feels highly engineered. This production-ready component provide a robust implementation of complex coordinated movement, adding a layer of 'kaleidoscopic' polish to your real-world application architecture.
Frequently Asked Questions
QCan I use more than four images?
The component is optimized for four quadrants, but you can layer multiple Kaleidoscope Grids to create more complex patterns.
QWhat do the corner labels do?
They provide a way to add navigational cues or thematic titles to each quadrant's direction of movement.
QCan I change the gap size?
Yes, the `gridGap` prop allows you to make the quadrants touch seamlessly or have a wide, distinct border.