Pixel horse composer

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useLayoutEffect,  useRef,  useState,  type FormEvent,  type KeyboardEvent as ReactKeyboardEvent,} from 'react';import { GALLOP, HORSE_HEIGHT, HORSE_WIDTH, STAND, type Frame } from './horse';import { useAutoplay } from './use-autoplay';import styles from './pixel-horse-composer.module.css';/* * Pixel horse composer: the bottom of a chat on a phone drawn in CSS. The message field sits in a * frosted card with a "+" on its left, a round voice button beside it, and under the text a strip * of fine grey dots where a little pixel horse gallops while you talk or type. * * - The strip is a canvas: a grid of rounded dots, 2.93 points apart, drawn once and kept; the *   horse is drawn over it every frame, cell by cell, in a darker grey. A cell the horse has just

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The horse: a 22 by 12 sprite on the strip's dot grid, facing right. The body, neck, head and tail * are one picture drawn as rows of characters; the legs are drawn per frame, each as two straight * segments (hip or shoulder to knee, knee to hoof) rasterised cell by cell, so a gallop is a list * of knee and hoof positions rather than eight hand-drawn pictures. * * GALLOP is the eight frames of the stride, in order: stretched out in the air, the hind hooves * landing, gathered under the body (the body a cell lower), pushing off, and stretched again. * STAND is the pose it settles into when it stops. */export const HORSE_WIDTH = 22;export const HORSE_HEIGHT = 12;/** Body, neck, head and tail; '#' is a lit cell. Row 6 is the belly the legs hang from. */const BODY = [  '.................##...',  '................####..',  '...............#######',  '...##############...##',  '####.############.....',  '#...#############.....',

// 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 horse composer (pixel-horse-composer.tsx): a silver phone on a quiet stage, its screen the   bottom of a chat in soft off-white. The message field is a frosted card with a fine rim, a   bright top edge and a soft shadow; beside it a round slate button. At night the page and the   card go near-black, the dots dark grey and the horse a pale grey.   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. The   strip's dots are drawn on a canvas, in the colours of two tokens read from it (its color and   its outline-color), so they follow the scheme with the rest.   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 and   opacity (the button's bars and arrow, the demo's touch), the card's height through one grid   row; the horse redraws on the canvas only while it runs or its trail fades. */.root {  /* The stage and its edge. */  --surface: #f2f2f2;  --line: rgb(0 0 0 / 5%);  /* The phone: its silver frame (two stops and its edge), the buttons, its drop shadow. */  --frame-light: #f4f4f5;