Parquet

A two-dimensional, read-only view of a weighted color distribution — the proportional-area counterpart to a distribution bar. The largest weight always holds the first slot, so changing the palette morphs the biggest tile to the new biggest tile.

#93766CSoft Brown

#6C9376Muted Green

#6C8093Muted Blue

#5980A6Muted Blue

#997300Mid Yellow

#866913Mid Yellow

#808080Mid Gray

#9CB3C9Soft Blue

#93896CSoft Taupe

Install

npm install @patternmode/parquet

import { Parquet } from "@patternmode/parquet";
import "@patternmode/parquet/styles.css";

const palette = [
  { color: "#c2703e", value: 0.42, label: "Terracotta" },
  { color: "#2d5a27", value: 0.28, label: "Forest" },
  { color: "#1b2a4a", value: 0.18, label: "Navy" },
  { color: "#e8b4b8", value: 0.12, label: "Blush" },
];

export function Palette() {
  // Re-tiles and morphs whenever `colors` changes.
  return <Parquet colors={palette} showLabels />;
}

Core API

`Parquet`

A controlled, proportional color mosaic. Each tile's area encodes its weight.

colors: ParquetTile[]Weighted colors to pack. Each tile extends WeightedColorSegment ({ color, value, label? }). The mosaic re-tiles and morphs whenever this changes.
aspectRatio: number4 / 3Aspect ratio (width / height) of the mosaic.
gap: number10Gap between tiles, in the mosaic's internal layout units.
slotCount: numbercolors.lengthFixed number of tile slots. Render a stable count so morphs between palettes of different lengths stay smooth; extra slots collapse to nothing.
showLabels: booleanfalseShow the built-in label (color name + derived percentage) on hover, with a contrast-aware foreground.
renderTile: (tile, meta) => ReactNodeReplace the built-in label with custom content. Receives the tile and its derived { percent, isLight, slot }.
disableMotion: booleanfalseDisable enter and morph animation. prefers-reduced-motion also disables it.