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.

Component

Install

npx shadcn@latest add @compronents/mosaic-flip

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

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.

Customize

tilesX / tilesYtext

Grid resolution; finer grids ripple, coarser ones plate.

tileSizetext

Cube edge length in px (also sets the 3D depth).

edgeColorcolor

Color of the cube top and bottom faces.

imagesasset-url

Idle + project images, hosted through https://ui.aryank.space/assets/mosaic-flip/default.jpg and the numbered set.

Dependencies

gsap