Mosaic poster

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, useState, type CSSProperties, type PointerEvent } from 'react';import { createMosaic, type Mosaic, type Point } from './mosaic';import { useAutoplay } from './use-autoplay';import styles from './mosaic-poster.module.css';/* * Mosaic poster: a portrait poster whose picture is a fine grid of small square cells, each the * colour of the picture under it. Blotches of cells dissolve into the poster and come back as a * slow noise field drifts over the grid, with a few sparkles; a headline sits under the picture. * * - The picture is an <img>: it shows, behind a CSS mask of square holes, before JavaScript runs, *   and gives screen readers its alt text. Once its colours are read, a <canvas> laid over it *   takes over (mosaic.ts) and the <img> steps back. * - The pointer is a soft brush: the picture comes back where it passes, then dissolves again *   once it has gone. A click or a tap sends a ripple that re-forms the whole picture from that *   point outwards; on a touch screen, dragging paints. The Restore button sends one from the *   middle. * - While on screen and untouched, a ripple goes out now and then. The canvas draws only while *   something changes, and only near the screen. * - Under reduced motion the field holds still and cells fade in and out without shrinking.

/* Mosaic poster (mosaic-poster.tsx): a ground with a portrait poster in the middle, its picture   over a headline, and under it a hint and the Restore button. The poster's type is sized in   container units, so the poster keeps its proportions at any width.   Nothing around the canvas clips (no overflow: hidden with a border-radius): on an iPhone, a   rounded clip around a canvas costs a composited layer and a mask the size of the box.   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). Light, a warm paper on a pale ground; dark, an   olive one on a dark ground. The cells keep the picture's colours on both. */.root {  /* The ground, at its edges and in its lit middle; the poster's paper, which shows between the     cells and where they dissolve. */  --surface: #ebe5d7;  --surface-lit: #f7f3ea;  --surface-2: #fcfaf4;  /* The headline, Restore's label and the focus ring; the hint. */  --ink: #2a2217;  --ink-muted: rgb(42 34 23 / 0.7);  /* Restore's edge and fill, at rest and hovered. */  --line: rgb(42 34 23 / 0.18);  --line-hover: rgb(42 34 23 / 0.32);  --fill: rgb(255 255 255 / 0.7);

import { hash, valueNoise } from './noise';/* * The mosaic: a picture drawn on a <canvas> as a grid of small square cells, each the colour of * the picture under it, that dissolves in slow, organic blotches and comes back. * * - The grid: cells of `cellSize` px, 1 px apart, centred in the canvas. Each cell takes the *   average colour of the picture under it, the picture fitted like `object-fit: cover`. * - The blotches: each frame, every cell reads a 2D value noise (noise.ts), two layers of it *   drifting in different directions, so the shapes slide and change as they go. Cells below a *   threshold dissolve; the threshold is picked each frame so that a set share of them does (it *   breathes slowly). Around the threshold, a soft band makes cells shrink and fade rather than *   pop, and a pinch of randomness per cell makes the blotches' edges ragged. * - Bringing it back lowers the threshold, locally and for a while: under the brush, and behind a *   ripple's front, which swells the cells it passes (the crest). As the threshold rises back, the *   blotches grow again from their hearts, so the noise takes over the way it left. * - Drawing: the whole cells are painted once on a canvas of their own, rounded corners and all. *   Each frame copies it in one go, clears the cells that are not whole and draws them smaller, *   then the crest and a few sparkles: all in device pixels, so the 1 px gaps stay crisp. * - The loop runs only while something changes (the drift, a trail, a ripple, a sparkle), and *   only near the screen. Away from it, both canvases give their pixels back. * - The gaps and the dissolved cells are left clear, so the poster's paper (CSS) shows through. *   The few colours the canvas paints that are not the picture's (the crest's light, the *   sparkles) are CSS tokens, read from the computed style: once, and again when the colour

/* * A small 2D value noise. Every point of a unit lattice gets a random value from an integer hash; * between them, the four corners of each square are blended with a smooth (quintic) curve. The * result is a soft, cloudy field that is cheap to sample and repeatable: the same point always * gives the same value, so the whole field can be read anew every frame, at any offset. *//** A repeatable pseudo-random value in [0, 1) for the lattice point (x, y). */export function hash(x: number, y: number, seed = 0) {  let h = Math.imul(x, 0x27d4eb2d) ^ Math.imul(y, 0x165667b1) ^ Math.imul(seed, 0x9e3779b1);  h = Math.imul(h ^ (h >>> 15), 0x85ebca6b);  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;}/** 0 to 1 with zero slope and curvature at both ends, so the squares join without creases. */const fade = (t: number) => t * t * t * (t * (t * 6 - 15) + 10);/** The noise at (x, y), in [0, 1]. One lattice square is one unit wide. */export function valueNoise(x: number, y: number, seed = 0) {  const left = Math.floor(x);  const top = Math.floor(y);  const u = fade(x - left);  const v = fade(y - top);

'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;