Loading cats

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useState, type CSSProperties } from 'react';import { Cat, Letter, type Eyes } from './cat';import { useAutoplay } from './use-autoplay';import styles from './loading-cats.module.css';/* * Loading cats: four game-like loading loops in grey tiles, every one of them plain CSS * animation. * * - Bounce: a cat drops onto a pad that gives like a trampoline (it widens, sags and turns *   see-through over the cat), springs off it in a puff of dust and sails out of the top. * - Word: the O of LOAD stretches into a pill and a shine sweeps it three times; it shrinks back, *   drops out of the word (L AD, LAD) and falls back in from above. * - Pile: a heap of cats sits on a two-leaf trapdoor; the leaves swing down, the cats fall through, *   the leaves swing shut, and the cats drop back in one by one, squashing as they land. * - Progress: a bar fills in four steps, each with its caption; at each step a cat swings in from *   another corner, and at the last one, from all four. * * Every tile is drawn on a 400 × 298 grid: --u is one unit, a 400th of the tile's width (a * container query), so a tile looks the same at any size. The loops are keyframes timed frame

/* Loading cats (loading-cats.tsx): four grey tiles in a 2 × 2 grid on a near-white stage, or at   night light cats on charcoal tiles.   Every tile is drawn on a 400 × 298 grid. A tile is a size container, and --u is a 400th of its   width, so everything inside it (positions, strokes, type, the keyframes' distances) scales with   the tile. Positions and boxes are set inline in units by the component; this file holds the   looks and the motion.   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).   Motion. The keyframes at the end are timed frame by frame (30 fps) and written as dense   linear steps with eased spans in between. They only run under prefers-reduced-motion:   no-preference, and only while the grid's data-run is play (or pause, which freezes them where   they are, off screen or in a hidden tab). With data-run still, every element falls back to its   base style here, which is the tile's still.   Memory. Each tile clips and contains its own layout and paint, so the pad's and the pill's   width changes never lay out the page; the cats, puffs and leaves move by transforms. */.root {  /* The stage, and the tiles on it. */  --page: #fdfdfd;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { CSSProperties } from 'react';/* * The drawings: the cat, and the three letters the word tile spells around its O. * * The cat is a mochi of a body on a 150 × 104 grid (the body itself 120 wide, from x 4 to 124 and * y 18 to 102), two pointed ears, a hooked tail and a face. Ears and tail are drawn first, so the * body covers their roots. Its colour is the current colour; the eyes and the inside of the ears * take --cat-eye. It stretches to whatever box it is given (preserveAspectRatio none), so a pile * can hold flatter, loafing cats. */export type Eyes = 'open' | 'sleep' | 'star';/** A four-point sparkle with concave sides, centred on (x, y). */const star = (x: number, y: number, r: number) =>  `M${x} ${y - r}Q${x} ${y} ${x + r} ${y}Q${x} ${y} ${x} ${y + r}Q${x} ${y} ${x - r} ${y}Q${x} ${y} ${x} ${y - r}Z`;export function Cat({  eyes = 'open',  round = false,  className,

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