Bot avatars

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';import { BotAvatar, type BotAvatarProps } from './bot-avatar';import type { State } from './brain';import type { Glasses, Hat, Shading } from './render';import { SHAPE_NAMES, type ShapeName } from './shapes';import { useAutoplay } from './use-autoplay';import styles from './bot-avatars.module.css';/* * Bot avatars: plush, furry 3D faces for AI agents, drawn on a plain 2D canvas (no WebGL). This * file is the showcase around the avatar itself (bot-avatar.tsx): * * - A row of four, living on their own: looking around, blinking, hopping and spinning now and *   then, and following the pointer while it moves. Poke one and it leaps. * - Two scenes from an agent app: a list of bots, one idle, one at work, one asleep; and a chat, *   where the bot works while it thinks, then settles as its answer streams in word by word. * - A playground with every option (eighteen bodies, three states, three sizes, five finishes, *   hats, glasses, fur, colour, ink and light), and the code for what it shows. * * Colours are light-dark() tokens on the root, so the showcase follows the page's color-scheme or

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, type CSSProperties } from 'react';import { Brain, type State } from './brain';import { Renderer, type Glasses, type Hat, type Look, type Shading } from './render';import type { ShapeName } from './shapes';import styles from './bot-avatars.module.css';/* * One avatar: a canvas half as large again as the avatar's box (more of it above, so a hop or a hat * has room), with the body drawn in the box by the renderer (render.ts) in the pose its brain (brain.ts) gives * it each frame. * * All avatars on a page share one animation frame loop, and each only draws while it is on * screen, the tab is visible and it isn't paused. Under reduced motion it draws its resting pose * once (and again when a prop changes). The pointer is read once per move for all of them; each * looks at it while it moves, then goes back to looking around on its own. */export type BotAvatarProps = {  /** The body. */  type?: ShapeName;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { Pose } from './render';/* * What an avatar does, frame by frame: it breathes, looks around (or at the pointer when one * moves nearby), blinks now and then, and from time to time does a trick: a hop, a hop with a * full turn, a flip, a wiggle. At work it hops on a beat, now and then spinning and squinting * happily as it lands. Asleep it bows a little, eyes shut in two arcs, breathing slowly. * Poking it makes it crouch, leap with a turn and land beaming. * * Every motion is either a spring (the gaze, the eyes) or a short timeline (a trick), added * together into one pose; a trick's squash and stretch keep the body's volume about the same. */export type State = 'idle' | 'working' | 'sleeping';type Trick = {  kind: 'hop' | 'spin' | 'flip' | 'wiggle' | 'squash' | 'poke';  start: number;  height: number;  turns: number;  roll: number;  happy: boolean;

// Copyright (c) 2026 Bruno Delorence. MIT License.import { getMesh, getRoots, ROOT_STRIDE, type Mesh } from './mesh';import { SHAPES, type ShapeName } from './shapes';/* * A small software renderer on a 2D canvas: no WebGL. * * 1. The body's two sheets are turned and squashed into place, and their triangles filled into a *    depth buffer pixel by pixel; each pixel keeps the nearest surface's normal and its spot on *    the face. Hats, glasses and antennas are solids (spheres, cones, tubes) found by casting a *    ray through each pixel of their box, into the same buffer. * 2. Every pixel the body covers is lit once: a soft key light from the upper left, a fill, a *    back light round the rim and a sheen, over the body's colour broken up by fine noise that *    sticks to the surface. The eyes are painted on the face from the same spot, so they turn *    with it. * 3. Fur: thousands of short strands grow out along the surface's normal from fixed roots. Those *    on the visible side are drawn as fading lines over the lit body, and along the outline they *    stand out against the background, which gives the soft fuzzy edge. * * Smooth finishes (plastic, smooth, flat) skip the fur and are drawn at twice the size, then * scaled down, for clean edges. */

// Copyright (c) 2026 Bruno Delorence. MIT License.import { SHAPES, type ShapeName } from './shapes';/* * From a flat outline to a plush body. A square grid is laid over the outline; grid points just * outside it are pulled onto it, so the edge is smooth. Each point is lifted to a height that * grows from nothing at the outline, round like a cushion's seam, to the body's full thickness * a little way in, plus a gentle dome over the whole face. The front is that surface and the back * its mirror, joined at the outline: two triangle sheets, each with a normal at every point. * * Built once per body, thickness and grid size, and shared by every avatar that draws it. The * fur's roots are scattered over the same surface, as many as the size asks for. */export type Mesh = {  /** Points, then normals, 3 numbers each: the front sheet's first, then the back's. */  pos: Float32Array;  nrm: Float32Array;  /** Triangles, as point indices, already wound to face out. */  tris: Uint32Array;  /** The lowest point of the outline (the body squashes down onto it) and its top at the middle. */  bottom: number;  top: number;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The eighteen bodies. Each is a flat outline written as a signed distance function (negative * inside, in units where the body spans about -1 to 1, y up), which the renderer inflates into a * plush pillow: thick in the middle, rounding off to a thin seam at the outline. A body also says * where its eyes sit, its own colour, how thick it is, and any hard parts it wears (antennas, ear * discs), which are drawn as small glossy solids. */export type ShapeName =  | 'clover'  | 'flower'  | 'star'  | 'ghost'  | 'mech'  | 'circle'  | 'hexagon'  | 'square'  | 'triangle'  | 'blob'  | 'drop'  | 'droid'  | 'alien'

/* Bot avatars (bot-avatars.tsx and bot-avatar.tsx): near-black cards at night, pale grey ones by   day, each with its scene: a row of avatars, a list of bots, a chat, then the playground (a stage   and a panel of controls) and the code for what it shows.   Colours are the tokens below, light-dark(light, dark) where the two differ: the showcase 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 avatars are drawn the same on both.   Memory. Each avatar's canvas is its own layer, half as large again as its box, and only redraws   while on screen; the cards are fixed sizes, so a redraw never lays out the page. */.root {  /* Cards, the playground's panel, and the list's sheet. */  --card: #f3f3f4;  --panel: #ffffff;  --sheet: #ffffff;  --ring: rgb(0 0 0 / 0.07);  --lift: rgb(0 0 0 / 0.06);  /* Words: strong, captions, quiet, field labels, the list's heading, the bot's reply. */  --ink: #171717;  --caption: #8b8b8b;  --quiet: rgb(60 60 66 / 0.68);  --label: #7b7b7b;  --head: #a6a6a6;

// 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. */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(