Mosaic Flip
A wall of 3D cubes that idles with a slow random breathing, then flips over in a center-out stagger to swap project images — each picture sliced across the grid and turned tile-by-tile. A queue absorbs rapid hovers. Built with GSAP.
npx shadcn@latest add https://ui.aryank.space/r/mosaic-flip.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | default + img1…6 (Compronents assets) | Image URLs; index 0 is the idle image, 1…N map to the projects. |
| projects | { label: string }[] | NX-09 / Deep Space / … | Project names; project i (1-based) reveals images[i]. |
| tilesX | number | 12 | Number of cube columns. |
| tilesY | number | 9 | Number of cube rows. |
| tileSize | number | 60 | Cube edge length in px; the 3D depth is half of this. |
| edgeColor | string | "#222222" | Color of the cube top/bottom faces. |
| background | string | "#171717" | Frame background color. |
| perspective | number | 800 | CSS perspective applied to the 3D scene, in px. |
tilesX / tilesYtextGrid resolution; finer grids ripple, coarser ones plate.
tileSizetextCube edge length in px (also sets the 3D depth).
edgeColorcolorColor of the cube top and bottom faces.
imagesasset-urlIdle + project images, hosted through https://ui.aryank.space/assets/mosaic-flip/default.jpg and the numbered set.
gsap