Thinking orbs

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';import { ThinkingOrb, type OrbColor } from './orb';import { STATE_LABELS, STATES, type OrbState } from './states';import { useAutoplay } from './use-autoplay';import styles from './thinking-orbs.module.css';export { ThinkingOrb, type OrbColor, type ThinkingOrbProps } from './orb';export { STATES, type OrbState } from './states';/* * Thinking orbs: small animated dot drawings that say an assistant is busy, and how: working, * searching, solving, listening, connecting, composing, breathing, weaving, shaping or thinking. * Each is a canvas of dots (orb.tsx) that a painter (states.ts) lays out frame by frame: globes * of latitude rings that turn, squash or tumble, a wired cloud, orbits, rings and outlines. * * - This file is the showcase: a gallery of orbs in pills, as they would sit in a chat, their *   words lit by a band of light that runs through them; and a playground, where the state, the *   size, the cursor's pull, the speed, the colour, the number and size of the dots can be tried, *   with the code to match. * - A change of state morphs: the old dots glide to the new ones' places in 700 ms.

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, type CSSProperties } from 'react';import { easeInOut, Frame, PAINTERS, STATE_LABELS, type OrbState } from './states';import styles from './thinking-orbs.module.css';/* * One thinking orb: a canvas that a state's painter (states.ts) fills with dots every frame. * * - The painter gives dots in the orb's own units (radius 1); the orb maps them to pixels, sized *   by the size prop, sharp on a dense screen, in the colour of its CSS `color`, read back each *   frame so a theme or scheme change (and its CSS transition) shows at once. * - A change of state morphs: for 700 ms both painters run, and dot i of the old one glides to dot *   i of the new one, its size and alpha blending too; dots one has and the other lacks fade in or *   out from (or to) a partner. Lines cross-fade. * - The canvas is bigger than the orb's box by half its size, so dots pulled by the cursor *   (gravity) are not cut at the edge; the box still takes only `size` in the layout. * - It draws only while on screen, and holds one still frame under reduced motion or when paused. */export type OrbColor = 'mono' | 'sky' | 'amber' | 'rose' | 'mint';

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The orb's states, each a painter: given the time, it writes the frame's dots (and, for some, * lines) into a Frame. Everything is in the orb's own units: the sphere's radius is 1, the * middle is 0,0, y points down. A dot's size is in "dot units" (1 is the base dot, which the * orb scales with its size and the dotSize prop) and its alpha runs from 0 to 1. * * Painters keep no state between frames: the same time draws the same frame, so a state can be * drawn still (reduced motion) or morphed from another one (transitions) at any moment. */export const STATES = [  'working',  'searching',  'solving',  'listening',  'connecting',  'composing',  'breathing',  'weaving',  'shaping',  'thinking',] as const;

/* Thinking orbs (thinking-orbs.tsx): a gallery of orbs in pills on quiet cells, and a playground   with a stage and a panel of controls. At night the page is near-black and the cells a step   lighter; by day the cells are white on a pale grey.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets   (data-color-scheme). An orb draws its dots in its CSS `color`, read back from the canvas. */.root {  /* The page, the cells, the controls' panel. */  --page: #f6f6f6;  --cell: #fff;  --cell-edge: rgb(0 0 0 / 0.05);  --panel: #fff;  --panel-lift: rgb(0 0 0 / 0.06);  --panel-edge: rgb(0 0 0 / 0.07);  /* The pills an orb sits in, and their words with the light that runs over them. */  --pill: rgb(0 0 0 / 0.025);  --pill-edge: rgb(0 0 0 / 0.07);  --words: rgb(20 20 20 / 0.5);  --shine: #000;  /* The controls. */  --heading: #171717;  --label: #767676;

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