Chromatic goo

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,  type MouseEvent,  type PointerEvent,} from 'react';import { CARDS, CardFace } from './cards';import { SWATCHES, swatchOf, toRgb, type ColorId } from './themes';import { createWave, playWave, stillWave } from './wave';import { useAutoplay } from './use-autoplay';import styles from './chromatic-goo.module.css';/* * Chromatic goo: a theme switcher you play by hand. Grab a colour from the palette and drop it on * a card: it lands like a drop of liquid, a white blob that opens into a ring and rolls across the

/* Chromatic goo (chromatic-goo.tsx): a stage with a palette of colours and two cards. The   layout follows the component's own width (a container query): from 700px the palette stands on   the left of the cards side by side; narrower, it is a row above the cards, stacked.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme). The palette's colours and the cards' themes   (themes.ts) are the same on both. */.root {  /* The stage and its edge (none on dark), and the cards on it; the cards' edge. */  --surface: #f2f2f5;  --edge: rgb(0 0 0 / 0.05);  --surface-2: #fff;  --line: rgb(0 0 0 / 0.08);  /* The titles; the cards' text, their figures' labels, and the palette's label. */  --ink: #141416;  --ink-muted: #66666e;  --ink-faint: #6c6c74;  --label: #6c6c74;  /* The secondary button, and its label; the primary's label, on the theme's colour. */  --secondary: #f0f0f3;  --secondary-ink: #4a4a51;  --accent-ink: #fff;

/* * The wave a colour makes as it lands on a card, drawn on a <canvas> laid over the card. * * The drop is a white blob that opens into a ring and rolls out across the card. The ring is a * closed curve round the drop point: a radius that grows with time (`ringRadius`), wobbled by a * few slow sines so its edge looks liquid, and bulging wherever a bubble forms (`edgeDistances`). * It is drawn as a white crest over a fringe of the new colour, with a band of the colour behind * it; the white fades as the ring travels, so the ring takes on the colour. The bubbles pinch off * the crest as small white rings, drift on and fade. * * A frame is a function of the time since the drop alone: nothing carries over from one frame to * the next, so a slow frame costs nothing, and the card's new face can be clipped to the very same * edge (`revealClip`): the colours change exactly where the wavefront is. * * The white is the foam: a CSS token (--foam), the canvas's own colour, read as each frame is * drawn, so it follows the stylesheet and its colour scheme. */export type Rgb = readonly [red: number, green: number, blue: number];/** One of the sines that wobble the ring's edge. */type Ripple = { lobes: number; phase: number; drift: number; weight: number };type Bubble = {

import type { ReactNode, Ref } from 'react';import { themeStyle, type Theme } from './themes';import styles from './chromatic-goo.module.css';/* * The playground's two cards and what is on them. `CardFace` draws a card's content in a theme; * while a colour lands, the playground stacks two faces in the card: the old look underneath and * the new one on top, which the wave reveals. * * The card itself is a button (the place a colour drops), so a face holds phrasing content only: * spans, laid out as blocks by the CSS. */export type Card = {  id: string;  title: string;  text: string;  icon: ReactNode;  stats: readonly { value: string; label: string }[];  actions: readonly [primary: string, secondary: string];};function ChartIcon() {  return (

import type { CSSProperties } from 'react';/* * The palette's six colours, and how a theme reaches a card: as CSS custom properties on the * card's face. `--accent` colours the icon and the figures, `--accent-fill` the primary button; * the CSS mixes the icon tile's tint from `--accent`. */export type ColorId = 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'pink';export type Swatch = { id: ColorId; name: string; hex: string };export const SWATCHES: readonly Swatch[] = [  { id: 'red', name: 'Red', hex: '#e5533d' },  { id: 'orange', name: 'Orange', hex: '#ef923a' },  { id: 'green', name: 'Green', hex: '#5dbb6e' },  { id: 'blue', name: 'Blue', hex: '#5c9bf0' },  { id: 'purple', name: 'Purple', hex: '#7655ee' },  { id: 'pink', name: 'Pink', hex: '#d24fa6' },];export function swatchOf(id: ColorId): Swatch {  return SWATCHES.find((swatch) => swatch.id === id) ?? SWATCHES[0];}

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;