World status

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, useState, type CSSProperties } from 'react';import {  FOLD,  createBuilder,  progressAt,  statusAt,  type Builder,  type Phase,  type Status,} from './builder';import { Composer } from './composer';import { CheckIcon, ChevronIcon } from './icons';import { ORB } from './orb';import { useAutoplay } from './use-autoplay';import { FIRST_IDEA, IDEAS, LEVELS, STEPS, worldOf, type World } from './worlds';import styles from './world-status.module.css';/* * World status: the progress widget of a tool that builds 3D worlds from a sentence. Open, it is a * card that lists the build's steps beside a live terrain, rising out of the sea as the build

/* World status (world-status.tsx): a light stage with the widget in its middle, a card over the   composer that folds into a compact card. Every size and place is a custom property on the   frame, set for the narrow layout and again from 600px (a container query on the widget's own   width), so the layout and the fold between its two states are plain CSS transitions.   Colours are the tokens below, light-dark(light, dark): the widget 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). By day the card and the composer are white, edged with a hairline; at   night they are dark. The stage is the same on both, and so is the terrain, a model in its own   colours. The orb's rim, the inside of its small circle and the map behind it are tokens that   its shader reads (orb.ts). */.root {  --stage: #fcfcfc;  /* The card and the composer, their edge (a hairline by day), and what is raised on them: the     percentage, Add images, a button under the pointer. */  --card: #fff;  --card-edge: rgb(0 0 0 / 0.1);  --raised: #f1f1f3;  /* The words: titles and values, then labels, then the next steps, captions and placeholder. */  --ink: #18181b;  --muted: #52525b;  --faint: #71717a;  /* The title's passing sheen while a world builds, and the composer's rule and divider. */

import { useId } from 'react';import { ArrowUpIcon, ChevronIcon, MicIcon, PlusIcon } from './icons';import { LEVELS, type Level } from './worlds';import styles from './world-status.module.css';/* * The chat composer under the status: a field for the idea, images to add (in this demo they are * counted, never read), the level of detail, a voice toggle (its pressed state only) and the send * button. Sending (the button, or Enter in the field) builds a world. * * The level picker is a native <select>, laid invisibly over its label: it opens the system's own * list, on every device, and the label shows what it holds. */export function Composer({  value,  onChange,  onSend,  level,  onLevel,  images,  onImages,  listening,  onListen,

import { createOrb, type Orb } from './orb';import { createTerrain, type Terrain } from './terrain';/* * The build behind the widget: a clock that turns time into progress, and the one animation frame * loop that draws the terrain and the orb from it. * * - A build thinks for a moment (the last world sinks back into the sea), then builds: its progress *   runs through the steps, each quick at first and slower as it ends, while the land rises and *   colour flows up the mountain. Then it is ready, and the flow settles to a stop. * - The loop runs only while the widget is near the screen (and the tab visible), and only while *   something moves: a build, the flow settling, or the card folding into the orb or opening out *   of it. At rest it does nothing. * - The canvases give their pixels back (they are sized to 0 × 0) when the widget leaves the *   screen, and get them back, redrawn, as it returns. On screen they keep them, so a fold costs *   no new buffers: the canvas that is not shown is simply not drawn. * - Under reduced motion the build still progresses, but the canvases are drawn as still frames, *   when a step changes, the card folds or they are resized. */export type Phase = 'thinking' | 'building' | 'ready';/** What the widget shows: the phase, the percentage, and the current step (-1 before the first). */export type Status = { phase: Phase; percent: number; step: number };

import { COLOURS, NOISE, createProgram, getContext, pixelRatio, uniformsOf } from './gl';import { random } from './worlds';/* * The terrain: a flat grid of triangles that a vertex shader lifts into a mountain and two hills, * drawn by a fragment shader as a topographic model. * * - The height of a point is a sum of soft cones (the mountain and the hills, placed by the world's *   seed) roughened by ridged noise. Below sea level the fragment shader discards the land, so the *   peaks stand as islands on the card, and as the build progresses the land rises out of the sea. * - Dark contour lines run at fixed heights, a pixel and a half wide whatever the slope (their *   width is measured with screen-space derivatives). * - On the mountain, colour flows up the slopes: bands of blue, cream and orange whose index is the *   height minus time, stirred by noise across the land and around the peak (the streaks). The *   colour fills the slopes up to a front that climbs with the build; above it and on the hills, *   the land stays grey. */export type TerrainFrame = {  /** The world's seed: where its mountain and hills stand. */  seed: number;  /** How far the land has risen out of the sea: 0 (under it) to 1. */  rise: number;  /** How high colour has flowed up the mountain: 0 (not at all) to 1 (over the summit). */

import { COLOURS, NOISE, createProgram, getContext, pixelRatio, uniformsOf } from './gl';import { random } from './worlds';/* * The orb: the folded status, drawn by one fragment shader over the whole compact card. * * - The shape is two circles melted together: the distance to each is blended with a smooth *   minimum, which grows a neck between them where they are close (a metaball). The big circle *   holds the percentage, the small one the step counter. * - Inside, a liquid: noise whose coordinates are pushed around by more noise (domain warping), *   twice, then mapped to the world's colours, so it marbles and swirls as time flows. * - A pale rim runs along the outline; the small circle is a ring, dark inside for its counter *   (light, by day). * - Behind the orb, faint contour lines: a map of a world. * - `split` slides the small circle out of the big one as the card folds, the neck stretching *   between them. * - The rim, the inside of the small circle and the map's lines follow the colour scheme: they are *   CSS tokens, read from the computed style through a hidden probe inside the canvas, at first *   and whenever `recolour` is called. The liquid's colours are the world's own, on both. *//** The two circles, in CSS px from the compact card's top left corner. */export const ORB = {  big: { x: 50, y: 66, radius: 35 },

/* * What the terrain and the orb share: a WebGL context with standard derivatives (for crisp contour * lines at any zoom), a program from two shaders, the GLSL noise both are made of, and the world's * colours. *//** Pixels per CSS pixel: the screen's, capped at 2 (sharp enough, for half the memory of 3×). */export const pixelRatio = () => Math.min(2, window.devicePixelRatio || 1);/** A WebGL context, or null where WebGL or the derivatives extension is missing. */export function getContext(canvas: HTMLCanvasElement, options: WebGLContextAttributes) {  const gl = canvas.getContext('webgl', {    alpha: true,    premultipliedAlpha: true,    powerPreference: 'low-power',    ...options,  });  if (!gl || !gl.getExtension('OES_standard_derivatives')) return null;  return gl;}function compile(gl: WebGLRenderingContext, type: number, source: string) {  const shader = gl.createShader(type);  if (!shader) return null;

/* * The demo's content: the steps of a build, the ideas it types in turn, and the levels of detail * the composer offers. A world is a prompt and a seed: the seed, a hash of the prompt, decides where * its mountain and hills stand, so the same idea always builds the same world. */export type World = { prompt: string; seed: number };/** The steps a build goes through, in order. */export const STEPS = ['Raising the land', 'Carving the rivers', 'Naming every peak'] as const;/** The world on screen before anything is typed, and the ideas the demo types after it. */export const FIRST_IDEA = 'Snowy peaks over a warm valley';export const IDEAS = [  'A canyon city at dusk',  'Glass islands on a quiet sea',  'Terraced hills after the rain',  'A volcano wrapped in fog',];export type Level = { id: string; label: string; pace: number; lines: number };/** How much detail a world gets: how long it takes, and how many contour lines it has. */export const LEVELS: readonly Level[] = [

import type { SVGProps } from 'react';/* * The widget's icons, drawn on a 16 × 16 grid with 1.5px strokes in `currentColor`, so they take * the colour of the text around them. */type IconProps = SVGProps<SVGSVGElement>;function Icon({ children, ...props }: IconProps) {  return (    <svg      viewBox="0 0 16 16"      width="16"      height="16"      fill="none"      stroke="currentColor"      strokeWidth="1.5"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"      {...props}    >      {children}

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