Sticker lens

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useId,  useMemo,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { createLensRenderer, type LensParams, type LensRenderer } from './lens-renderer';import { Panel, ROWS, SlidersIcon, type Version } from './panel';import { paintScene, type ScenePiece } from './scene';import { LENS_HOME, PILE, STICKERS, toDataUrl, type Inks } from './stickers';import { useAutoplay } from './use-autoplay';import styles from './sticker-lens.module.css';/* * Sticker lens: a "coming soon" shop page with a pile of black-and-white stickers to pick up and * throw around, and a glass ball lying on the pile that magnifies and bends whatever is under it,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The lens itself: a small canvas the size of the lens that draws, for every pixel of the disc, * the part of the scene its glass would bend towards it. * * The scene is a bitmap (scene.ts paints the page's words and the stickers into a canvas), here * a WebGL texture. Each pixel of the disc reads it at * *   centre + offset / magnification + outward bend * * where the bend comes from the slope of the glass at that point. The glass is a superellipse * dome: the higher the oblateness, the flatter its middle and the steeper its rim, so the middle * reads as a clean magnifier and the edge squeezes in what lies beyond the disc. The bend grows * with the thickness, the index of refraction (1 - 1/ior, as Snell's law gives for small angles) * and the refraction displacement, and only reaches full strength past the bevel start. Red, * green and blue are read at three slightly different bends (the aberration), so edges fringe * with colour where the glass is steep. Frost averages eight reads around each one. A rim of * light, a soft specular glint and a darker fresnel edge make it read as glass in either scheme. * * Without WebGL, a 2D canvas fallback draws the magnified scene clipped to the disc with the * same rim, without the refraction. */

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The picture under the lens: the page painted into a canvas, which the lens then bends. * * Browsers cannot yet hand a canvas a picture of live HTML (the HTML-in-canvas proposal, a * canvas with `layoutsubtree` and `drawElementImage`, is still behind a flag), so the page is * painted again from what it is made of: the boxes marked data-lens-box (their background, * border and radius as computed), the words marked data-lens-text (in their computed font, * colour and spacing, on their own baseline), then the stickers, in their stacking order, as the * same SVG images the page shows. It is repainted only when something under the lens changes. */export type ScenePiece = {  image: HTMLImageElement;  /** Middle, size (px of the stage) and turn (degrees). */  x: number;  y: number;  w: number;  h: number;  r: number;  /** How far it is lifted off the page while dragged, 0 to 1. */  lift: number;};

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The sticker pile: twelve original drawings, each an SVG document written as a string, so the * same picture can be the <img> the reader drags and the bitmap the lens refracts (the lens * draws the scene into a canvas, and an <img> of an SVG draws into a canvas at any size, crisp). * * Every drawing is in four inks only, handed in per colour scheme: `ink` (the black of the * print), `paper` (the white of the sticker), `mid` (a printed grey) and `soft` (a pale grey). * At night ink and paper swap, so a black label turns white and the other way round. * * Text inside an SVG image cannot reach the page's web fonts, so the drawings name system faces * (a heavy grotesque, a monospace, a script) with generic fallbacks. */export type Inks = { ink: string; paper: string; mid: string; soft: string };export type StickerArt = {  id: string;  /** What the sticker shows, for its accessible name. */  label: string;  /** Its size at the design's scale, in px. */  w: number;  h: number;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { CSSProperties, KeyboardEvent, Ref } from 'react';import type { LensParams } from './lens-renderer';import styles from './sticker-lens.module.css';/* * The settings panel: the lens's tuning, one row per value. Each row is a scrub bar: a native * range input stretched invisibly over the whole row, so pointer, touch, keyboard and screen * readers all work as they do on any slider, while the row draws its own fill, ticks and value. * Versions are presets; the plus button keeps the current tuning as a new one, and the copy * button puts it on the clipboard as JSON. */export type Version = { name: string; params: LensParams };export const ROWS: {  key: keyof LensParams;  label: string;  min: number;  max: number;  step: 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(

/* Sticker lens (sticker-lens.tsx): a quiet shop page, pale grey by day and black at night, with   the sticker pile in its middle, the glass lens on top, a nav pill at the bottom and the   settings panel at the top right. Sizes are the design's px; the pile scales itself to the   stage from script.   Colours are the tokens below, light-dark(light, dark) where the two differ: the page takes the   color-scheme it inherits, or the one its colorScheme prop or its own header buttons set   (data-color-scheme). The sticker inks are read from script and drawn into the SVG art.   Memory. The stage is one layout boundary sized from outside; stickers and the lens move by   transforms on layers of their own, so dragging repaints nothing else. */.root {  --page: #f6f6f6;  --text: #1b1b1b;  --title: #4b4b4b;  --muted: #4f4f4f;  --chip: #fff;  --chip-line: rgb(0 0 0 / 0.05);  --chip-active: #eef0ee;  --chip-shadow: rgb(0 0 0 / 0.05);  --solid: #1b1b1b;  --solid-ink: #fff;  --sticker-ink: #121212;