Night harbourPilot boat returns
Chroma grid
A grid of cards that stay grey until the pointer brings the colour back.
Ridge lightAutomated station
Hedgerow lineAfter the first frost
Last office lightsRain on the avenue
Low waterWreck timbers
Market rowCrates before the sale
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 type CSSProperties,9 type PointerEvent as ReactPointerEvent,10} from "react";11 12export type ChromaScene =13 "harbour" | "ridge" | "field" | "skyline" | "shore" | "market";14 15export type ChromaItem = {16 /** Title shown under the artwork. */17 title: string;18 /** Secondary line under the title. */19 subtitle?: string;20 /** Accent colour used for the glow and the rule under the title. */21 accent?: string;22 /** Original artwork drawn by the component; an unknown name falls back to the harbour scene. */23 scene?: ChromaScene | (string & {});24 /** An image URL, for consumers that bring their own photography. */25 image?: string;26 /** Alternative text for the artwork. */27 alt?: string;28};