Pixel pedometer

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useMemo,  useRef,  useState,  type CSSProperties,  type PointerEvent as ReactPointerEvent,} from 'react';import {  BLOCK,  CAT,  HEADING,  HEART,  HEART_OUTLINE,  LOCK,  MEDIUM,  MONO,  SHOE,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The pedometer's type and art, drawn on pixel grids: each glyph or sprite is a list of rows, '#' * for a lit pixel. `toPath` turns rows into one SVG path (a rectangle per run of lit pixels), so * a whole line of text is a single path in a single SVG, scaled to any size by its viewBox. * * - Block: the step count's face, 6 by 10 with strokes two pixels thick and corners cut by one. * - Medium: the goal and the percentage, 8 by 13, lighter, with a narrow one. * - Heading: the day's title, 7 by 10. * - Mono: the small print, a monospaced 5 by 7 with one-pixel strokes. */export type PixelFont = {  /** Rows above the baseline; glyphs may hang below it (a comma's tail). */  height: number;  /** Pixels between two glyphs (fractions allowed). */  gap: number;  /** Each glyph's width in pixels, when the font is monospaced. */  mono?: number;  glyphs: Record<string, string[]>;};/** One SVG path for a grid of rows, offset by `x`, `y` pixels. */

// 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. `visible` and `reduced` are there for what * runs on its own whoever is in charge. */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);

/* Pixel pedometer (pixel-pedometer.tsx): a graphite phone on a quiet stage, its screen an   off-white page of black pixel type with a lime bar and a lime button; at night the page is   near-black and the type light, the lime the same. The phone is drawn in points, as a phone's   screen is designed: --pt is one point in px (0.82 at most, less on a stage too narrow for it),   so the 390 by 844 screen scales as one picture. Every word is an SVG path (pixel-font.ts),   sized in points here or inline.   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 phone is one layout boundary of a fixed size. What moves moves by transforms: the   cat's head (a group in its SVG, a pixel up or down), the bar's fill (scaleX), the button (its   press), the hearts that rise and the demo's finger. The numbers redraw as paths. */.root {  /* The stage and its edge. */  --surface: #ebeae6;  --line: rgb(0 0 0 / 6%);  /* The phone: its frame (two stops of its sheen and its edge), the buttons, its drop shadow. */  --frame-light: #4a4a4e;  --frame-dark: #1f1f22;  --frame-edge: rgb(255 255 255 / 14%);  --frame-button: #333336;