Icon morphs

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, useState } from 'react';import { LINE, PAIRS, type Icon, type Pair, type Shape } from './icons';import { useAutoplay } from './use-autoplay';import styles from './icon-morphs.module.css';/* * Icon morphs: four pairs of line icons on grey cards, each icon a small, playful animation — * a house that builds itself and one that unfolds, an arrow that drops into a tray and one that * springs off an arch, a screen that turns into a phone, a battery that charges and drains. * * - Every icon is a pure function of time (icons.ts): given a frame, it returns the SVG paths to *   draw. One requestAnimationFrame loop asks each moving icon for its frame and writes the *   paths straight into its <path> elements, so React renders the cards once and never again. * - Each pair keeps its own clock. While the demo is on screen and untouched, every pair loops. *   Any real input hands the cards to the reader: a pair that is moving finishes its loop and *   rests, and hovering, focusing or pressing a card plays its pair once more. * - At rest an icon shows its finished pose (the house built, the battery charged), which is also *   what the server renders and what reduced motion keeps. * - Light or dark: every colour is a light-dark() token in the CSS, so the scheme is the page's *   color-scheme, or the one the colorScheme prop sets.

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The eight drawings of the icon morphs, and how each one moves. * * Every icon is a pure function of time: `draw(t)` returns the shapes to paint at frame `t` (the * clock counts in sixtieths of a second, so a 2.2 s loop is 132 frames). The shapes are plain * SVG path strings, stroked with the line weight or filled, so one generic painter can draw any * frame without React. * * Everything is drawn on a 290-unit tile with lines 21 units thick (7 px on the 97 px tile). * Motion comes from keyed curves: values at given frames, joined by a monotone cubic so a curve * never overshoots its own keys; anticipation, squash, overshoot and settle are all in the keys. *//** The line weight, in tile units. */export const LINE = 21;const HALF = LINE / 2;export type Shape = {  /** 's' strokes the path with the line weight, 'f' fills it. */  kind: 's' | 'f';  d: string;  opacity?: number;

// Copyright (c) 2026 Bruno Delorence. MIT License.'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(

/* Icon morphs (icon-morphs.tsx): four grey cards on a white stage, two white tiles on each with   an animated line icon, and the pair's name under them. Two cards a row, or one on a narrow   stage (a container query).   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).   Memory. The drawings are SVG paths repainted in place by one animation loop, and only while a   pair moves; each tile clips its own drawing, so a repaint stays inside its 97 px square. */.root {  /* The stage, the cards, and the tiles on them. */  --surface: #fdfdfd;  --card: #f2f2f2;  --tile: #fefefe;  /* The icons and the names. */  --ink: #2b2b2b;  /* The stage's edge. */  --line: rgb(0 0 0 / 0.06);  /* The same on both schemes: the focus ring. */  --focus: #387bff;  container-type: inline-size;  box-sizing: border-box;