@patternmode/briolette

A spinnable geodesic color sphere. At rest its 80 facets span the whole color universe — hue around the equator, lightness pole to pole. Selecting a facet repaints the sphere with similar-but-distinct neighbors of that color, built directly in OKLab via @instruments/colorscope so spacing is perceptually even: hue rotates around the anchor's azimuth, lightness shifts along the pole axis into whatever headroom the anchor has, and chroma swings with distance. Grey and near-neutral anchors bloom into a wheel of tints, the far hemisphere glides toward the anchor's complement, and out-of-gamut neighbors are pulled back by reducing chroma only — so every facet stays a distinct, honest choice. Each further selection tightens the neighborhood, but never past a floor. Selecting the pinned facet again unsets the value.

Usage

import { BriolettePicker } from "@patternmode/briolette";
import "@patternmode/briolette/styles.css";

export function AccentColorField() {
  const [color, setColor] = useState<string | null>(null);

  return <BriolettePicker aria-label="Accent color" value={color} onChange={setColor} />;
}

Interaction

Drag (or arrow keys) to spin the sphere; it drifts slowly while idle.
Select a facet to choose its hex color and refine the sphere around it. The sphere glides so your selection ends up centered, facing the viewer.
Select the pinned facet again (or press Escape) to unset.
Enter selects the facet closest to the viewer.

Cut changes morph (the finer geometry grows out of the coarser one) and seam changes crossfade. Honors prefers-reduced-motion: idle drift, inertia, and morphs are disabled, leaving only direct manipulation.

API

Prop	Type	Default	Description
`value`	`string \| null`	—	Controlled hex color value.
`onChange`	`(value: string \| null) => void`	—	Selection and unset callback.
`density`	`"coarse" \| "base" \| "fine" \| "brilliant"`	`"base"`	Facet count: 20, 80, 180, or 320. Cut changes animate; seam width scales with the cut.
`maxDepth`	`number`	`BRIOLETTE_MAX_DEPTH`	Deepest refinement level reachable by clicking near the anchor. Clamped to `1..BRIOLETTE_MAX_DEPTH`; cap it low for a broader sphere.
`seamOpacity`	`number`	`1`	Seam visibility, `0` (seamless gem) to `1`. Crack-free at every opacity.
`seamColor`	`string`	white	Seam color between facets.
`label`	`string`	`"Color"`	Accessible name for the sphere stage.
`showValue`	`boolean`	`true`	Shows the hex output beneath the sphere.
`size`	`number`	`280`	Rendered sphere size in pixels.

Geometry and palette helpers (buildBrioletteFaces, projectBrioletteFaces, buildBriolettePalette, brioletteUniverseColor, brioletteNeighborColor) are exported for custom renderers.