Spirit dragon

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type RefObject,} from 'react';import { drawDragon, HEAD_DETAIL, HEAD_EYE, HEAD_SHAPE, type Frame } from './dragon';import { BackScene, FrontScene, MOTES } from './scene';import { useAutoplay } from './use-autoplay';import styles from './spirit-dragon.module.css';/* * Spirit dragon: a painted teal forest at dusk, where a translucent white dragon swims between the * trees above a child holding up a lantern, and a small fox. * * - The picture is four stacked layers in the same 2000 × 1500 frame, cropped to the stage: the *   painting behind the dragon (sky, trees, hills), the dragon, the painting in front of it, and a

// Copyright (c) 2026 Bruno Delorence. MIT License.import { smooth, Track, type P } from './geometry';/* * The spirit dragon, drawn fresh for every frame. It holds the painting's pose and swims in place. * * - The pose is a smooth line through hand-placed points, from the tip of the tail to the back of *   the head (plus a little past each end). The spine is SEGMENTS + 1 points spread along it *   behind the head; each frame the whole spine slides a few units back and forth along the line, *   a wave runs down it from neck to tail, and the dragon drifts a little as a whole. So the body *   undulates through the same curves without ever leaving them. * - Everything hangs off the spine. The body is a ribbon around it, its width set at each control *   point; the scales are staggered rows of small arcs fixed to spine points, so they ride the *   wave; the mane is long, fine strands that start on the back of the neck and lie back along it, *   each strand following the spine further down, flaring away from it and waving on its own *   clock; the tail ends in a fan: a pale membrane spread between bright ribs. * - The head is one drawing in its own units (the neck joint at 0,0, the neck running to +x), *   moved and turned to the first spine point; its crest of soft spikes and its whiskers wave. *//** The pose, from just past the tip of the tail to just past the head; [x, y, body width]. The *  first and last two points only extend the line, so the spine can slide along it. */const POSE: [number, number, number][] = [

// Copyright (c) 2026 Bruno Delorence. MIT License.import {  brushStrokes,  knotHoles,  limb,  limbBand,  seeded,  smooth,  twig,  type P,  type W,} from './geometry';import styles from './spirit-dragon.module.css';/* * The painting the dragon swims through, in the scene's units (2000 × 1500), as still SVG drawn * once: the sky, the far trees and hills, the trees the dragon weaves between, the near hills, * and in front of it all the big dark trunk, the reeds, the child with the lantern and the fox. * * Every trunk and branch is a limb (a middle line with a width at each point), so its brush * streaks can follow it. Fills are classes, so the colours are the stylesheet's light-dark() * tokens. The few parts that move (hair, hood, lantern, fox's tail, reeds, motes) are their own * elements, animated by CSS transforms in the stylesheet.

// Copyright (c) 2026 Bruno Delorence. MIT License./* * Drawing helpers for the spirit dragon's forest, all in the scene's own units (a 2000 × 1500 * painting): * * - smooth() turns a list of points into a soft curve through them (Catmull-Rom as cubic Béziers), *   so a hand-placed outline reads as painted rather than cut. * - limb() draws a trunk or a branch from its middle line and its width at each point, tapering to *   a round tip, and brushStrokes() lays the painterly streaks along it, so no clip path is needed *   to keep them inside. * - Track is the dragon's closed swimming loop: a centripetal Catmull-Rom spline through its *   control points, resampled every few units so a point at any distance along it costs two *   look-ups. */export type P = readonly [number, number];/** A middle-line point of a limb, and the limb's width there. */export type W = readonly [number, number, number];const r1 = (value: number) => Math.round(value * 10) / 10;/** A smooth path through `points`: closed, or open from the first to the last. */export function smooth(points: readonly P[], closed = true): string {

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

/* Spirit dragon (spirit-dragon.tsx): a painted forest at dusk, 4:3, cropped to the stage. By day a   misty grey-pink sky over teal trees and hills; at night a violet dusk, the trees deeper, the   dragon and the lantern brighter against them.   Colours are the tokens below, light-dark(light, dark): 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). The painting's paths take them through classes.   Memory. The stage is one layout boundary sized from its width. The painting behind the dragon,   the one in front and the grain are still layers of their own, so the dragon's layer is the only   one painted again on each frame; the mist moves by transforms on small layers. */.root {  /* The sky, top to bottom, and the pink haze low in it. */  --sky-top: #acbfc2;  --sky-mid: #b3bfc2;  --sky-low: #c5b6bb;  --haze: #d5bec1;  /* The far trees, pale with distance. */  --far-1: #47827d;  --far-2: #327973;  --far-2-shade: #2a6e68;  --far-3: #376180;  /* The trees the dragon weaves between, and their shaded sides. */