Fluid Mosaic
An editorial bento grid whose rows and columns are sized by a gaussian lens centered on the cursor, so the tile you approach swells while its neighbours give up their space. Photographs counter-drift inside their tiles, captions lift on hover, and the area map re-cuts itself for one to twelve items and again on narrow screens. No dependencies.
npx shadcn@latest add https://ui.aryank.space/r/fluid-mosaic.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 |
|---|---|---|---|
| items | FluidMosaicItem[] | Eight editorial photographs | Up to twelve tiles, each an image plus an optional title, caption, and link. A tile with a link renders as an anchor. |
| strength | number | 2.4 | Peak track weight added at the cursor. 0 freezes the grid even. |
| radius | number | 0.24 | Standard deviation of the lens as a fraction of the axis, so how many tracks respond. |
| smoothness | number | 0.11 | Fraction of the remaining distance covered each frame. Clamped to 0.015 to 0.35. |
| parallax | number | 18 | Pixels the photographs counter-drift, and the amount each is oversized by so no edge shows. |
| imageScale | number | 1.08 | Constant zoom on every photograph. |
| gap / radiusCorners / background | number | number | string | 10, 18, #0D0D0D | Grid gutter (also used as the outer padding), tile corner radius, and the colour behind the tiles. |
| overlayColor / overlayOpacity | string | number | #000000, 46 | Scrim over each photograph, at 34% of this opacity at rest and 72% on the hovered tile. |
| showText / textColor / textGap / textPadding | boolean | string | number | number | true, #FFFFFF, 5, 22 | The caption and title block in the corner of each tile. Turning it off also removes the scrim. |
| titleFont / captionFont | CSSProperties | Inter 28/600 and Inter 11/500 uppercase | Style objects spread onto the two text lines. |
| mobileBreakpoint / mobileColumns | number | 1 | 2 | 620, 2 | Root width at or below which the compact area map takes over, and how many columns it uses. |
| animate | boolean | true | Set false for an even grid with no rAF loop, for static rendering or reduced motion. |
strengthtextHow hard the lens pulls. 0 is an even grid, 2.4 is the default swell.
radiustextLens width as a fraction of the grid. Small values move one track, large values bend everything.
None.