Video timeline

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  memo,  useEffect,  useEffectEvent,  useId,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import {  INTRO_FRAMES,  RATE,  filmState,  intro,  morph,  ring,  type Presentation,

/* Video timeline (video-timeline.tsx): a dark editor panel on a black stage — the layers column,   the top bar with timecode and transport, the ruler, sections and tracks. Sizes are px at 13 px   type: 46 px top bar, a 36 px ruler, 32 px rows, 27 px property lanes, a 282 px layers column.   Colours are the tokens below, light-dark(light, dark): the editor 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). Clip colours are the same on both.   Presenting (a frame-by-frame renderer, or the autoplay film) turns every transition off: each   frame is drawn from the state it is handed. The play button reads its effects from custom   properties (--hover, --lift, --charge, --beams, --tint, --morph, --ring-*), set inline.   For a 3D camera: --vt-lift-depth moves the lifted play button towards the viewer (translateZ),   and --vt-beams-transform stands the light beams up (e.g. rotateX(-90deg)); both do nothing flat. */.root {  --stage: #f1f2f4;  --panel: #ffffff;  --surface: #f7f8f9;  --layers: #fbfbfc;  --head: #f4f5f6;  --track-bg: #f2f3f5;  --ruler-bg: #f7f8f9;  --edge: rgb(0 0 0 / 0.1);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The timeline's motion, as numbers: when each part of the entrance plays, how the play button * lifts, charges and is pressed, and a whole short film of the editor as a function of time. * * Everything is counted in frames of a 60 fps clock, the rate the motion was measured at, and * turned into progress values (0 to 1) by pure functions. The component draws whatever state it is * handed, so a renderer that steps frame by frame gets the exact same picture every time. *//** The clock the motion is written in. */export const RATE = 60;/** How long the entrance lasts, in frames: clips, labels, keyframes, curves, markers, playhead. */export const INTRO_FRAMES = 152;/** The short film's length in seconds (see `filmState`). */export const FILM_SECONDS = 740 / RATE;/** The state a frame-by-frame renderer hands the component (its `presentation` prop). */export type Presentation = {  /** Where the playhead is, in seconds. */  time: number;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The timeline's data: tracks with their clips and animated properties, ruler markers and the * sections of the edit, and the sample project the demo opens on. *//** A clip's colour: its fill, stripes and label ink come from it. */export type ClipTone = 'pink' | 'yellow' | 'magenta' | 'green' | 'blue' | 'purple';export type TrackIcon = 'sun' | 'type' | 'chip' | 'music' | 'shape' | 'image';export type Clip = {  id: string;  /** Start and end, in seconds. */  start: number;  end: number;  /** The label on the clip; the track's name without it. */  label?: string;};/** An animated property of a track, drawn as a lane of keyframes under it. */export type Param = {  id: string;  name: string;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The editor's icons, drawn on a 16-unit grid in the text's colour (currentColor): each is a list * of shapes, filled or stroked with a round line of the given width. The stylesheet sizes them * (the lab page would otherwise force every unsized SVG to 16 px). */type Shape = { d: string; fill?: boolean; width?: number; evenodd?: boolean };const ring = (cx: number, cy: number, r: number) =>  `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0`;/** The eight rays of the sun, from radius 4.4 to 6.4. */const rays = Array.from({ length: 8 }, (_, i) => {  const a = (i * Math.PI) / 4;  const [c, s] = [Math.cos(a), Math.sin(a)];  return `M${(8 + c * 4.4).toFixed(2)} ${(8 + s * 4.4).toFixed(2)}L${(8 + c * 6.3).toFixed(2)} ${(8 + s * 6.3).toFixed(2)}`;}).join('');export const ICONS = {  pointer: [{ d: 'M3.6 2.4 12.9 7.1 8.7 8.5 7.2 12.9z', fill: true, width: 1.4 }],  razor: [    { d: ring(4.6, 11.4, 2) + ring(11.4, 11.4, 2), width: 1.5 },

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