Hand desktop

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * Hand desktop: a playful desk you work with your hands. A white hand skeleton floats over a * painted sky; pinch on a folder or a window's bar to grab it and open your fingers to drop it; * pinch on the sky to hatch a pixel critter, which drops onto a folder, the clock or the dock and * wanders along it; wave an open hand and the critters wave back; touch both index fingers * together for a dance party. * * - The hand is your pointer by default: a virtual 21-point hand, the pinch under the pointer, *   that closes while you press. Two fingers on a touch screen are two hands. The autoplay demo *   and the gallery use the same hand, scripted. * - "Use camera" swaps in your real hands: only then is the hand tracker fetched (its module, *   runtime and model, from a CDN by default), and only then is the camera asked for. It runs on *   the device: no frame leaves the browser. Your feed shows mirrored and dimmed in a corner, only *   while the camera is on; "Stop camera", or leaving, ends it. * - engine.ts runs one loop while the desk is on screen: it reads every hand's gestures the same *   way (hand-model.ts), moves what is held, runs the critters and draws them and the skeletons *   on one canvas. The HTML parts only move by transforms. * - Folders are buttons (arrow keys move them, Enter opens), and the guide window and the dock have *   buttons for each gesture, so everything works without a hand at all. * - Light or dark: the colours are light-dark() tokens, so the sky turns to dusk with the page's

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The desk's engine: one loop, once a frame, while the desk is on screen. It gathers the hands * (the reader's pointer hand, the demo's scripted hands, the camera's tracked hands), reads their * gestures, moves what they hold, runs the critters, and draws the critters and the skeletons on * one canvas over the desk. The folders, the window, the clock and the dock are HTML that it only * moves, by transforms. * * Every hand, wherever it comes from, is 21 points in the desk's px, so one piece of code reads * the gestures for all of them: a pinch grabs what is under it or hatches a critter, an open hand * waving left and right greets the critters, two index tips touching start a dance. */import {  BONES,  INDEX_TIP,  OneEuro,  PINCH_OFF,  PINCH_ON,  TOGETHER_OFF,  TOGETHER_ON,  WRIST,  cursorOf,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The hand, as 21 points: the wrist, then four joints for each of the thumb, index, middle, ring * and little finger, from the knuckle to the tip. A camera tracker gives these points; without * a camera, a virtual hand makes them from three poses (open, pinching, pointing) blended * together, so the gestures below read both the same way. * * Every measure is divided by the palm's length (wrist to the middle finger's knuckle), so a hand * near the camera and one far away read the same. */export type Point = { x: number; y: number };export type Landmarks = Point[];/** Index of each point, by name. */export const WRIST = 0;export const THUMB_TIP = 4;export const INDEX_PIP = 6;export const INDEX_TIP = 8;export const MIDDLE_MCP = 9;/** The bones the skeleton draws, as pairs of points. */export const BONES: [number, number][] = [

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The camera and the hand tracker. Nothing here runs until the reader asks for the camera: * the tracker's module, its WebAssembly runtime and its model are fetched then, at runtime, from * the addresses given (a CDN by default; a site can host the three files itself), never bundled. * * Frames stay in the browser: the model runs locally, and only its 21 points per hand come out. * Nothing is recorded, kept or sent. stop() ends every camera track. */import type { Landmarks } from './hand-model';export type TrackerSources = {  /** The tracker's ES module (it exports FilesetResolver and HandLandmarker). */  module: string;  /** The folder of its WebAssembly runtime. */  wasm: string;  /** The hand landmark model file. */  model: string;};export const DEFAULT_SOURCES: TrackerSources = {  module: 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/vision_bundle.mjs',

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The critters: six pixel animals, 12 × 12, facing right, each with two walking frames (only the * feet change). A sprite is a list of rows, one letter per pixel ('.' is see-through), and a * palette for its letters. They are drawn once per pixel size into small canvases, then stamped. */export type Sprite = {  name: string;  palette: Record<string, string>;  /** Rows of the body, then the feet of each walking frame. */  body: string[];  feet: [string, string];};const INK = '#1b1b1f';export const CRITTERS: Sprite[] = [  {    name: 'chick',    palette: { k: '#4a3412', y: '#ffd84a', Y: '#efb21c', w: '#fff6c2', e: INK, o: '#ff8a2a' },    body: [      '............',

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * The desk's drawings, all decorative: the painted sky with its rolling hills (a dusk palette at * night, from the stylesheet's tokens), the folder icon, the dock's icons and a critter drawn in * SVG squares for the pets window and the dock. */import { useId, type ReactNode } from 'react';import { rows, type Sprite } from './critters';import styles from './hand-desktop.module.css';/** Soft clouds: groups of blurred ellipses, in the wallpaper's 1600 × 1000 units. */const CLOUDS: { x: number; y: number; s: number; puffs: [number, number, number, number][] }[] = [  {    x: 180,    y: 150,    s: 1,    puffs: [      [0, 0, 120, 34],      [70, -22, 70, 34],      [-60, -10, 60, 26],

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

/* Hand desktop (hand-desktop.tsx): a painted sky over rolling hills, with folders, a window,   a clock card, a frosted dock, a hint pill and the camera's status, and one canvas on top for the   critters and the hand skeletons.   Sizes follow the desk's width (cqw: a hundredth of it), clamped so text stays legible on a phone   and nothing grows past its natural size on a wide screen.   Colours are the tokens below, light-dark(day, dusk): the component takes the color-scheme it   inherits from the page, or the one its colorScheme prop sets (data-color-scheme). */.root {  /* The sky, top to horizon, and its clouds and stars. */  --sky-top: #1f5bd6;  --sky-mid: #4a8ff0;  --sky-low: #b4dafb;  --cloud: rgb(255 255 255 / 0.96);  --star: transparent;  /* The hills, far to near, top and foot of each. */  --far-top: #9fd2a2;  --far-low: #69ad68;  --mid-top: #86d447;  --mid-low: #2e7c1b;  --near-top: #4fa82c;  --near-low: #286915;