Mosaic Image React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import MosaicImage from "./MosaicImage";

export default function Example() {
  return (
    <MosaicImage
      src={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23bg)%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22423%22%20cy%3D%22792%22%20rx%3D%22280%22%20ry%3D%2285%22%20fill%3D%22url(%23shade)%22%2F%3E%3Cpath%20fill%3D%22url(%23blue)%22%20d%3D%22m230%20290%20190-70%20180%20150-50%20350-160%2095-170-190Z%22%2F%3E%3Cpath%20fill%3D%22%23bdc9d0%22%20d%3D%22m230%20290%20190-70-30%20340-170%2065Z%22%2F%3E%3Cpath%20fill%3D%22%23718ca1%22%20d%3D%22m420%20220%20180%20150-175%20170-35%2020Z%22%2F%3E%3Cpath%20fill%3D%22%23344b61%22%20d%3D%22m425%20540%20175-170-50%20350-160%2095Z%22%2F%3E%3Cpath%20fill%3D%22%239bafbd%22%20d%3D%22m220%20625%20170-65v255Z%22%2F%3E%3C%2Fsvg%3E"}
      alt={"Folded blue sculpture on warm stone"}
      columns={4}
      rows={3}
      gap={4}
      spread={14}
      defaultActive={false}
      duration={700}
      aspectRatio={"4 / 3"}
      label={"Expand image tiles"}
    />
  );
}

Using Mosaic Image

Supply a source image with a clear crop and use columns and rows to divide it into tiles. gap changes the seams between the tiles.

Leave space around the component for spread. Use active with onActiveChange to control the pinned expansion state, or let the native button toggle it locally.

Props

Name	Type	Required	Default	Description
src	string	No	""	Image URL, including portable data URLs.
alt	string	No	""	Accessible image description.
columns	number	No	4	Tile columns, clamped to 1–10.
rows	number	No	3	Tile rows, clamped to 1–10.
gap	number	No	4	Gap between image tiles in pixels.
spread	number	No	18	Outward spacing per tile in pixels. Leave room around the component for expansion.
active	boolean	No	undefined	Optional controlled expansion state.
defaultActive	boolean	No	false	Initial pinned expansion state. Hover previews the expansion; click or Space toggles it.
onActiveChange	function	No	undefined	Called with the new pinned expansion state on activation.
duration	number	No	700	Tile transition duration in milliseconds.
aspectRatio	string	No	"4 / 3"	CSS aspect ratio of the complete image.
label	string	No	"Expand image tiles"	Accessible label for the native toggle button.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.