Loading wipe

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useEffectEvent, useId, useRef, useState, type CSSProperties } from 'react';import {  DirectionPicker,  PresetPicker,  RibbonRow,  ScrubRow,  Section,  SliderRow,  snap,} from './controls';import { DemoPointer, runDemo, type Demo, type Point } from './demo-pointer';import { SweepIcon } from './icons';import {  DEFAULTS,  SECTIONS,  SLIDERS,  presetOf,  type PresetId,  type Settings,  type SliderKey,

/* Loading wipe (loading-wipe.tsx): a stage with one card in its middle, the preview on the left   (the page, the loader over it, the canvas while the wipe runs) and the panel of controls on the   right, which scrolls. In a narrow container the panel goes under the preview.   Colours. The interface's are the tokens below, each light-dark(light, dark): 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 ribbon's colours (presets.ts) are the   effect: the same in both. The canvas paints the loader in the colour .canvas carries, and its   words in theirs, both read from the computed style (sweep.ts), so they follow the scheme too.   Memory. A phone keeps a page's pixels in tiles the width of the screen, about 7 MB each, and a   tile that is painted again gets a second buffer. So what changes while the wipe plays stays   off the page's tiles: the panel, the loader's stand-in, the button and the lines for screen   readers each paint on a small layer of their own (will-change: opacity), and the card is a   layout boundary, so a change inside it lays out the card alone. There must be only one: a   browser lays out one boundary at a time, and two in the same frame (say the panel and the   preview) make it lay out the whole page instead, which paints its tiles again. The pointer   over the card needs no layout while the demo plays (demo-pointer.tsx). */.root {  /* The stage; the card on it, which is also the page under the loader, and the unpicked     buttons; the band of a section's title. */  --surface: #f2f1f4;  --surface-2: #fff;

'use client';import {  useId,  useSyncExternalStore,  type CSSProperties,  type KeyboardEvent,  type ReactNode,} from 'react';import { ArrowIcon } from './icons';import {  DIRECTIONS,  PRESETS,  SLIDERS,  type Preset,  type PresetId,  type SliderSpec,} from './presets';import type { Progress } from './sweep';import styles from './loading-wipe.module.css';/* * The panel's controls. The presets and the directions are radio groups (one tab stop each; the * arrow keys move and pick), the settings are native range inputs, whose fill is a CSS gradient

import { createWipe, pixelRatio, type Box, type Wipe, type WipeFrame } from './wipe';/* * The sweep: the wipe's progress, from 0 (the loader whole) to 1 (the page clear), the one * animation frame loop that plays it, and what shows it in the preview. * * - At first the loader is a CSS stand-in. Once the progress leaves 0, the canvas takes over: *   sized to the preview, it draws the loader, its words and the ribbon, and the stand-in hides *   under it. It keeps showing the last frame at rest (the page clear, or the loader back after a *   reset, which fades in), and gives its pixels back after a few seconds unused, when the *   stand-in returns. A sweep soon after reuses the pixels rather than asking for new ones: on *   iOS, pixels given back linger in a pool for a while, so trading them often costs memory. * - A sweep plays the progress to 1 on an ease-in-out curve; a scrub sets it by hand. The loop *   runs only while a sweep or a fade plays: a scrub, a new setting or a resize draws one frame. * - Off screen, the canvas gives its pixels back at once, and a sweep in progress keeps its *   clock, so the wipe is where it should be when it comes back. * - Under reduced motion, or without WebGL, the canvas is never used: the stand-in fades out as *   the progress grows, so a sweep is a short cross-fade. * - The canvas paints in the stylesheet's colours, read from the computed style each time it *   draws: the loader's (the colour .canvas carries) and its words'. A change of colour scheme *   runs a short transition on the canvas's colour, and its end draws the wipe again. *//** Covered: the loader is whole. Paused: part swept, at rest. Clear: the page shows. */

/* * The wipe, drawn by WebGL over the whole preview: the loader ahead of the front, the ribbon of * colour on it, and nothing behind it, so the page underneath shows through. Two passes: * * - The field. Every point knows how far along the sweep it lies: 0 where the wipe comes in, 1 *   where it leaves; the front travels from before 0 to past 1 as the progress goes from 0 to 1. *   Fractal value noise, on a domain bent by more noise (swirl), pushes the front back and forth *   (turbulence), and near the trailing edge a finer noise holds some points back (bleed), so *   colour lingers there in blotches. The result, v, is each point's distance behind the front in *   ribbon widths. It is computed on a coarse grid, one value every few CSS pixels, into a small *   texture: the expensive noise runs a few thousand times a frame, not a million. * - The picture. At full resolution, v is read back from the texture with bilinear filtering, so *   the field is smooth, and its contours turn faintly blocky when the turbulence is high. v picks *   the colour (the ribbon's palest first, its deepest last) and the edges: the loader ahead, the *   ribbon, then its dissolve into the page. The loader is drawn too, with its words (a texture *   of the real text, placed where it is) and a fine grain, so the canvas stands in for it *   seamlessly while the wipe runs. *//** * Pixels per CSS pixel: the screen's, times the scale of the box the wipe sits in (a gallery may * draw it shrunk), capped at 2 (sharp enough, for half the memory of 3×). */export const pixelRatio = (scale = 1) => Math.min(2, (window.devicePixelRatio || 1) * scale);

/* * What the panel tunes: the ribbon's colour presets, the eight sweep directions, and every * setting with its range, its default and how it reads (on screen and to a screen reader). */export type PresetId = 'sky' | 'ember' | 'dusk' | 'moss' | 'mono';export type Preset = {  id: PresetId;  name: string;  /** The ribbon's four colours, from its trailing edge (the deepest) to its leading one. */  ribbon: readonly [string, string, string, string];  /** The same four, as a screen reader says them. */  names: readonly [string, string, string, string];};export const PRESETS: readonly Preset[] = [  {    id: 'sky',    name: 'Sky',    ribbon: ['#5a5cf2', '#22bbf8', '#4ee6fc', '#dff1fe'],    names: ['indigo', 'sky blue', 'cyan', 'ice'],  },  {

'use client';import { useEffect, type RefObject } from 'react';/* * Scrolls the panel by hand. The panel is overflow: hidden, and this moves its scrollTop: the * wheel, a vertical touch drag (which coasts a little when let go), and the browser itself when a * control inside takes the focus. Why not a native scroll area: Safari on iOS gives each one a * layer of its own at full device resolution, which here cost more GPU memory than the whole wipe; * a hidden-overflow box is repainted in place instead. * * At the panel's ends the gesture is left to the page, which scrolls on. While the panel moves, a * thin bar over its right edge shows where it is, then fades. *//** How long the bar stays after the panel stops, in ms. */const LINGER = 700;/** How far a touch moves before it counts as a drag, in px. */const SLOP = 6;type Touch = { x: number; y: number; at: number; vertical: boolean | null; speed: number };export function usePanelScroll(  panel: RefObject<HTMLElement | null>,

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, * glide the pointer onto a control and press it, or grab a slider's thumb and drag it, calling * the component's own handlers as a hand would. Stopping the demo (the reader takes over, or it * scrolls away) ends the step in progress at once: its promise rejects, which ends the script * right there, and the pointer fades out. * * Nothing the pointer does while the demo plays needs a layout, because one here in the same * frame as one in the card would make the browser lay out the whole page (see the note at the top * of the stylesheet). So it moves by animations the compositor plays (a drag too: the dragged * value follows that animation's clock); the press scales a box that keeps a transform at rest, * since a box that gains or loses one is laid out again; and the arrow and the hand are HTML boxes * that swap by their visibility (a change of style inside an SVG lays the SVG out again). */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;

/* The icons: drawn on a 16 px grid in the current colour, decorative (their buttons are named). *//** * The sweep button's icon: a play mark (Sweep), or two arrows chasing each other round a circle * (Sweeping and Reset). Both are drawn in one SVG and the stylesheet shows one of them: putting a * new SVG into the card would make Safari lay out the whole page (see .sweepIcon). */export function SweepIcon({ className }: { className?: string }) {  return (    <svg className={className} viewBox="0 0 16 16" aria-hidden="true">      <path        data-icon="play"        d="M4.9 3.5c0-.7.75-1.1 1.33-.73l6.6 4.5c.5.34.5 1.1 0 1.45l-6.6 4.5c-.58.38-1.33-.03-1.33-.73z"        fill="currentColor"      />      <g        data-icon="loop"        fill="none"        stroke="currentColor"        strokeWidth="1.4"        strokeLinecap="round"        strokeLinejoin="round"      >        <path d="M2.2 8a5.8 5.8 0 0 1 10.39-3.55" />

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