frameyard 0.3.0 → 0.5.0

package/docs/v0.1-design.md

@@ -1,10 +1,10 @@
-# Frameyard v0.1 Design Baseline
+# Frameyard Design Baseline
 
 **Status:** Accepted
 **Initial acceptance:** 2026-10-27
-**Last design revision:** 2026-10-29
+**Last design revision:** 2026-10-30
 
-This document records the decisions confirmed during the initial design sessions. It defines the v0.1 product and architecture baseline; later changes should revise this document explicitly rather than silently broaden the scope.
+This document records the decisions confirmed during design sessions. It is the living product and architecture baseline; later changes revise this document explicitly rather than silently broaden the scope. The original v0.1 baseline has been revised through 0.4. Architecture decisions that changed the baseline are recorded in `docs/adr/`.
 
 ## 1. Product contract
 
@@ -12,10 +12,10 @@ Frameyard is a local-first, open-source framework for frontend developers and cr
 
 The initial use cases are product demos, social clips, animated diagrams, data visualizations, karaoke-style subtitles, and personalized videos. Optional local speech synthesis and transcription produce assets for these workflows. Professional long-form editing is outside the target audience.
 
-The core v0.1 success criterion is an end-to-end example in which a developer can:
+The core success criterion is an end-to-end example in which a developer can:
 
-1. Create a reusable 30-second, 1920×1080 composition.
-2. Animate it with HTML, CSS, SVG, JavaScript, and seek-safe Canvas 2D.
+1. Create a reusable 30-second, 1920×1080 HTML composition.
+2. Animate it with HTML, CSS, SVG, and, where needed, a seek-safe controller for Canvas 2D and WebGL.
 3. Supply JSON props and synchronized audio.
 4. Preview and scrub it interactively.
 5. Render it reproducibly to MP4 without dropped frames or timing drift.
@@ -24,33 +24,37 @@ The agent-enabled success criterion additionally requires an agent using the off
 
 ## 2. Project and authoring model
 
-- Projects use ordinary HTML, CSS, static assets, and native JavaScript ES modules.
-- `video.config.js` explicitly lists composition module entry points. There is no directory-scanning discovery convention.
+- Projects use ordinary HTML, CSS, static assets, and native JavaScript controllers, either inline in a composition document or in external modules.
+- `video.config.js` explicitly lists `.html` composition entry points. There is no directory-scanning discovery convention.
 - A project may contain multiple compositions, each with a unique ID.
-- Each composition has fixed `width`, `height`, `fps`, and `durationInFrames` metadata. Props cannot change this metadata in v0.1.
-- A composition follows a `mount → update({ frame, props }) → dispose` lifecycle. Mounting creates the visual structure; updating makes that structure represent the requested frame.
-- `update()` must be seek-safe and synchronous. It cannot depend on previously visited frames.
-- Props are JSON-serializable, immutable, and fixed for one render. Composition defaults may be overridden by a JSON file or CLI option.
-- The core validates metadata and JSON-serializability. An optional composition-defined `validateProps()` hook handles domain-specific validation before loading.
-- User compositions are native JavaScript. The framework itself is authored in TypeScript and ships declarations, but v0.1 does not transpile user TypeScript.
+- A composition is a full HTML document with one `<fy-composition>` root. The root declares fixed `width`, `height`, `fps`, and `duration-in-frames` metadata. Props cannot change this metadata.
+- Default props are a JSON block, `<script type="application/json" data-fy="props">`. A render's JSON props merge shallowly over the defaults, are validated as JSON, deep-frozen, and fixed for the render.
+- Props bind into the document through explicit `data-fy-*` attributes: `data-fy-text`, `data-fy-attr-*`, `data-fy-class-*`, `data-fy-if`, and `data-fy-repeat`. Primitive top-level props are also exposed as `--fy-prop-<name>` CSS custom properties. Bindings apply once per load; props are immutable.
+- CSS and the Web Animations API are the animation language. `data-fy-anim-start`, `data-fy-anim-duration`, and `data-fy-anim-easing` schedule one animation per element in composition frames.
+- An optional composition controller is declared with `<script type="text/fy-controller">`. It is either inline source or an external module referenced by `src`; a composition has exactly one controller. It may export `mount({ root, props })`, `update({ frame, props, root })`, `dispose()`, and `validateProps(props)`; at least one is required, and `mount` and `update` are optional for validation-only controllers. It has no metadata, default props, audio, or transcripts. Inline keeps small compositions in one file; external is for reuse, tests, and complex logic.
+- Inline controllers are the default for small, single-use controllers. Extract to an external module when the controller grows, is reused, needs separate imports or tests, or drives Canvas 2D, WebGL, or karaoke.
+- The controller is the only executable code in a composition document. Other executable `<script>` elements and inline `on*` handlers are rejected. Libraries are imported as ES modules from the controller.
+- `fy` is the authoring namespace: `fy-composition`, `fy-transcript`, `data-fy-*`, `--fy-*`, and `text/fy-controller`. `frameyard` remains the product, package, CLI, config, manifest, server-route, import-specifier, and error-code namespace.
+- User controllers are native JavaScript. The framework itself is authored in TypeScript and ships declarations, but 0.4 does not transpile user TypeScript.
 
 ## 3. Deterministic execution
 
 The only sources of animation state are the integer frame number and immutable props. Composition frame rate establishes the mapping between frames and time.
 
-- The runtime owns the frame clock and deterministic randomness.
-- CSS `@keyframes` and Web Animations API animations are paused and positioned from the shared frame clock.
-- JavaScript animation runs inside `update()`.
+- The runtime owns the frame clock and deterministic randomness. The controller imports `random("stable:key")` from `frameyard/runtime`.
+- CSS `@keyframes` and Web Animations API animations are paused and positioned from the shared frame clock. `data-fy-anim-*` attributes schedule one animation per element in composition frames; the runtime maps frames to milliseconds and sets the corresponding animation delay and duration.
+- The runtime sets `--fy-frame`, `--fy-time`, `--fy-progress`, `--fy-fps`, `--fy-duration`, and `--fy-duration-frames` on the composition root every seek. Authors use them for simple computed CSS values.
+- JavaScript animation runs in the controller's `update()`, which must be synchronous and seek-safe. It cannot depend on previously visited frames.
+- Declarative bindings apply once per load, before the controller mounts. Controller-created DOM is the controller's responsibility.
 - Independent `requestAnimationFrame` loops, timers, CSS transitions, wall-clock reads, and unseeded randomness are not supported animation drivers.
-- Deterministic random values are stateless and key-based, such as `random("star:17")`, so they do not depend on call order or rendering history.
-- Development mode provides best-effort diagnostics for forbidden clocks and randomness; it does not claim to police every third-party library perfectly.
-- Assets, remote data, images, fonts, generated audio, and transcripts are resolved during an explicit loading phase before frame production.
-- Required network access is limited to the loading phase. Network requests are blocked during frame capture.
-- AI model inference is never part of `mount()`, `update()`, or frame production.
-- v0.1 supports DOM, CSS, SVG, Canvas 2D, WebGL, and frame-seeked embedded video.
-- Embedded video is loaded during the loading phase, paused, and seeked from the frame-derived source time before capture. Its source must be a local, seekable project file. An unmuted embedded video contributes its audio track to the offline mix unless the composition opts out.
-- WebGL 1 and WebGL 2 canvases are redrawn from the current frame and captured through the normal screenshot path. Production sessions pin software WebGL so pixel output does not depend on the host GPU.
-- Composition code is trusted local developer code. Frameyard does not claim to render untrusted compositions safely.
+- Development mode provides best-effort diagnostics for forbidden clocks and randomness in the controller; it does not claim to police every third-party library perfectly.
+- Assets, remote data, images, fonts, generated audio, and transcripts are resolved during an explicit loading phase before frame production. Network requests are blocked during frame capture.
+- AI model inference is never part of the loading phase, controller lifecycle, or frame production.
+- The baseline supports DOM, CSS, SVG, Canvas 2D, WebGL, and frame-seeked embedded video. Canvas 2D and WebGL are drawn from the current frame by the controller.
+- Embedded video and audio are declared in the composition HTML with `data-fy-*` attributes. The runtime loads local files during the loading phase, pauses them, and seeks video from the frame-derived source time before capture. An unmuted video contributes its audio track to the offline mix unless the composition opts out.
+- Full-scene opacity animations above an embedded video can make interactive preview reuse the load frame after a large seek; fade overlay layers instead. Capture sessions keep the composition hidden until the first seek, so production stills resolve to the requested frame.
+- WebGL 1 and WebGL 2 canvases are captured through the normal screenshot path. Production sessions pin software WebGL so pixel output does not depend on the host GPU.
+- Compositions are trusted local developer code. Frameyard does not claim to render untrusted compositions safely.
 
 ### Reproducibility guarantee
 
@@ -60,7 +64,7 @@ Generated assets are covered once frozen. Frameyard does not promise that repeat
 
 ## 4. Preview and production rendering
 
-Preview and production execute the same composition bundle and browser runtime. They differ only in which component drives the frame clock and whether frames are captured.
+Preview and production execute the same composition document and browser host runtime. They differ only in which component drives the frame clock and whether frames are captured.
 
 The preview provides:
 
@@ -72,23 +76,30 @@ The preview provides:
 
 It is a developer inspection tool, not a visual composition editor.
 
+The preview server serves each composition HTML document at its project path and injects the framework import map and a host module into composition entries. The host reads the composition descriptor—metadata, default props, and the controller declaration—from the same browser-safe composition document reader used by static validation, applies bindings, imports the controller from its authoring `src` or from the inline block's virtual module URL, mounts it, and exposes a small `window.__fy` API. Preview loads the document in a same-origin iframe and drives that API. The iframe is not a security sandbox; compositions are trusted local code. The server runs the static composition validation described in §6 before serving a composition to the preview.
+
 Production rendering:
 
 1. Uses a pinned, Playwright-managed Chromium through the Chrome DevTools Protocol.
-2. Seeks explicitly to each requested frame.
-3. Waits for composition readiness, embedded media decode, and browser paint.
-4. Captures the frame.
-5. Pipes frames in timeline order to FFmpeg for encoding and audio muxing.
+2. Navigates directly to the composition document, waits for the host, and loads the render's props.
+3. Seeks explicitly to each requested frame.
+4. Waits for composition readiness, embedded media decode, and browser paint.
+5. Captures the frame.
+6. Pipes frames in timeline order to FFmpeg for encoding and audio muxing.
+
+`check` and `still` use the same host and capture path. `check` evaluates every frame without capturing or encoding. `still` captures one frame through the production path.
 
-The renderer is sequential by default and has no frame cache. Optional `--concurrency <n>` rendering, with `n` from 1 to 16, opens up to `n` independent browser sessions, each loading the same composition and props from the same preview server. Workers seek and capture assigned frames, while a single ordered writer pipes them to FFmpeg with bounded lookahead. Parallelism therefore changes scheduling only: every frame remains derivable from its integer frame number and immutable props, and output order is unchanged. The default stays at one session for predictable resource use, and the upper bound limits accidental browser-process and memory growth. Simple scenes target real-time preview, but there is no production rendering-speed guarantee; the CLI reports progress, current frame, and elapsed time.
+The renderer is sequential by default and has no frame cache. Optional `--concurrency <n>` rendering, with `n` from 1 to 16, opens up to `n` independent browser sessions, each loading the same composition document and props from the same preview server. Workers seek and capture assigned frames, while a single ordered writer pipes them to FFmpeg with bounded lookahead. Parallelism therefore changes scheduling only: every frame remains derivable from its integer frame number and immutable props, and output order is unchanged. The default stays at one session for predictable resource use, and the upper bound limits accidental browser-process and memory growth. Simple scenes target real-time preview, but there is no production rendering-speed guarantee; the CLI reports progress, current frame, and elapsed time.
 
 ## 5. Audio and output
 
-Audio is a declarative timeline of clips. Each clip supports a source, start frame, source trim, and volume. Preview synchronizes this timeline in the browser; production mixes it offline with FFmpeg rather than treating live `<audio>` or Web Audio playback as the production source of truth. Unmuted embedded videos contribute their own audio tracks to the same mix, placed by the video's frame and trim attributes. Muting a video or setting `data-frameyard-audio="off"` keeps it visual-only.
+Audio is a declarative timeline of `<audio>` elements. Each element uses `data-fy-start` (composition frame), `data-fy-trim` (seconds from the source start), optional `data-fy-duration` (seconds to use), and `data-fy-volume` (0-1). Preview synchronizes this timeline in the browser; production mixes it offline with FFmpeg rather than treating live `<audio>` or Web Audio playback as the production source of truth. Unmuted embedded videos contribute their own audio tracks to the same mix, placed by the video's frame and trim attributes. Muting a video or setting `data-fy-audio="off"` keeps it visual-only.
+
+Audio, video, and transcript `src` values resolve from the project root. The controller `src` and ordinary HTML asset URLs (`img`, stylesheets) resolve relative to the composition document.
 
 Generated speech behaves like any other audio clip. Frameyard does not automatically time-stretch it, change composition duration, or regenerate it to fit. `check` reports clip durations and overrun warnings so users and agents can revise text, timing, or composition deliberately.
 
-v0.1 produces portable MP4 files with H.264 video and AAC audio. It exposes only a small set of validated encoding options, not arbitrary FFmpeg arguments. Single-frame PNG output through `still` is a debugging artifact, not general image-sequence support.
+0.4 produces portable MP4 files with H.264 video and AAC audio. It exposes only a small set of validated encoding options, not arbitrary FFmpeg arguments. Single-frame PNG output through `still` is a debugging artifact, not general image-sequence support.
 
 A render fails immediately on an uncaught exception, unhandled rejection, required-asset failure, or invalid composition output. Diagnostics identify the composition and, where applicable, the frame. The CLI exits nonzero, cleans temporary files, and never reports a partial video as successful. Existing output files are not overwritten unless explicitly requested.
 
@@ -96,36 +107,38 @@ A render fails immediately on an uncaught exception, unhandled rejection, requir
 
 Project and composition commands are:
 
-- `init`: scaffold a minimal project, including an agent guide (`AGENTS.md`) and a private `package.json` with pinned `dev`, `check`, `render`, and `still` scripts
+- `init`: scaffold a minimal HTML composition project, including an agent guide (`AGENTS.md`), a `.gitignore` for `out/`, and a private `package.json` with pinned `dev`, `check`, `render`, and `still` scripts
 - `dev`: start the preview
-- `render <composition-id> --props props.json --out video.mp4`: render a composition, optionally with `--concurrency <n>` from 1 to 16
-- `check <composition-id>`: validate configuration, props, assets, audio, and transcript requirements, then mount the composition and evaluate every frame without capturing or encoding
+- `render <composition-id> [--out video.mp4]`: render a composition, optionally with `--concurrency <n>` from 1 to 16; the default output is `out/<composition-id>.mp4` in the project root
+- `check <composition-id>`: run static composition validation, then validate configuration, props, assets, audio, and transcript requirements, load the composition, and evaluate every frame without capturing or encoding
 - `still <composition-id> --frame <n>`: capture one requested frame as PNG through the production rendering path
 - `doctor`: inspect core requirements and optional integrations without repairing or downloading anything
 
+`check`, `still`, and `render` run a Node-side static composition validation before launching Chromium. It validates metadata, the composition root, the controller declaration, default props, binding attributes and paths, animation attributes, scripts and event handlers, unsupported visual elements, and audio/transcript references. Static validation and the composition host read the composition grammar through one browser-safe composition document reader with parse5 and DOM adapters; the reader returns fixed facts and per-kind declarations, while the validator adds source locations, filesystem checks, and transcript parsing. Controller `src` is project-relative in composition source info and results; the authoring value is retained as `rawSrc` for the host import. Diagnostics carry stable codes and optional source locations; `check` exits nonzero on static errors without starting a browser. `dev` runs the same validation on load and surfaces its diagnostics in the preview.
+
 Local asset-production commands are `tts` and `transcribe`. Every non-interactive command supports `--json` with stable result and error schemas. Structured results go to stdout; human diagnostics and inference progress go to stderr.
 
-The built-in server serves native ES modules and static assets and injects an import map for the framework runtime. It performs no dependency pre-bundling. Third-party libraries must initially be browser-ready ES modules referenced explicitly. Running through the CLI server is required; direct `file://` execution is unsupported.
+The built-in server serves native ES modules and static assets, injects an import map and composition host into composition entries, and serves an inline controller through a virtual module URL under the composition's directory. It performs no dependency pre-bundling. Third-party libraries must initially be browser-ready ES modules referenced explicitly. Running through the CLI server is required; direct `file://` execution is unsupported for deterministic preview or rendering. A composition document can still be opened directly as static HTML/CSS.
 
-v0.1 uses one repository and one publishable npm package with three internal layers:
+Frameyard uses one repository and one publishable npm package with three internal layers:
 
-1. Shared composition contracts
-2. Browser runtime
+1. Shared composition contracts and HTML binding/metadata parsing
+2. Browser host runtime
 3. Node-based CLI and renderer
 
 These layers have clean internal boundaries but no public plugin API. FFmpeg is discovered on the user's PATH and checked for required capabilities, with actionable installation and version diagnostics. The project supports the current active Node.js LTS; Linux is the reference and CI platform, while macOS and Windows remain best-effort until covered by real rendering tests.
 
 ## 7. Official agent skill
 
-Frameyard ships an optional, host-neutral agent skill with a `SKILL.md`, supporting references, and thin scripts. The npm package includes skill files matching its API version, and documentation explains host-specific installation or referencing. v0.1 does not add a skill-installer command.
+Frameyard ships an optional, host-neutral agent skill with a `SKILL.md`, supporting references, and thin scripts. The npm package includes skill files matching its API version, and documentation explains host-specific installation or referencing. 0.4 does not add a skill-installer command.
 
 The skill:
 
-- Uses the normal project format, composition API, and CLI available to humans.
+- Uses the normal project format, HTML composition contract, optional controller, and CLI available to humans.
 - Does not introduce an agent-only runtime, MCP server, hosted control plane, or separate rendering API.
 - Triggers for Frameyard authoring and operation rather than claiming to be a general-purpose media-generation skill.
 - Uses Frameyard's audio wrappers instead of invoking `qwen-tts` or `whisper-cli` directly.
-- Includes references for deterministic authoring, audio assets, subtitle and karaoke recipes, JSON command results, and failure recovery.
+- Includes references for deterministic HTML authoring, bindings, animation scheduling, controller rules, static validation, structured diagnostics, common authoring mistakes, audio assets, subtitle and karaoke recipes, JSON command results, and failure recovery.
 - Invokes speech synthesis or transcription only when requested or explicitly approved as part of the brief.
 - Does not overwrite or regenerate existing generated assets without permission.
 - Runs `check`, inspects representative `still` images when the host supports image viewing, and discloses when visual inspection was impossible.
@@ -137,7 +150,7 @@ A successful agent workflow preserves and reports the source project, props, gen
 
 The `tts` command integrates [`qwentts.cpp`](https://github.com/ServeurpersoCom/qwentts.cpp) through its external `qwen-tts` executable. It does not link the native library or require the upstream server.
 
-v0.1 supports CustomVoice mode only:
+0.4 supports CustomVoice mode only:
 
 - A named speaker is required.
 - An optional style instruction and language may be supplied.
@@ -163,19 +176,19 @@ The canonical artifact is a versioned Frameyard JSON document containing:
 - Timed segments
 - Optional word timings
 
-All timestamps are integer milliseconds relative to the source audio, not composition frame numbers. Composition code converts them using the audio clip's start frame, source trim, and composition frame rate.
+All timestamps are integer milliseconds relative to the source audio, not composition frame numbers. The controller converts them using the audio clip's start frame, source trim, and composition frame rate.
 
-Compositions may declare required transcript assets with a `transcripts` field analogous to `audio`:
+Compositions declare required transcript assets with `<fy-transcript>` elements:
 
-```js
-transcripts: [{ src: "assets/voice.transcript.json", words: true }]
+```html
+<fy-transcript src="assets/voice.transcript.json" words></fy-transcript>
 ```
 
 `check` and production validate declared transcript files before frame production. `words: true` requires measured word timings and fails when they are unavailable; it never triggers interpolation.
 
 SRT and VTT are derived exports, not the canonical contract. Word-level karaoke requires actual word timings and fails validation when they are unavailable. Frameyard never fabricates word timings by interpolating segment timestamps and never executes Whisper's generated bash/FFmpeg karaoke script.
 
-The official skill documents seek-safe subtitle and karaoke recipes. Compositions retain responsibility for visual presentation; v0.1 has no built-in subtitle renderer and does not automatically burn captions into videos.
+The official skill documents seek-safe subtitle and karaoke recipes. Compositions retain responsibility for visual presentation; 0.4 has no built-in subtitle renderer and does not automatically burn captions into videos. Karaoke presentation uses the optional controller.
 
 ## 10. Generated assets and inference operation
 
@@ -200,12 +213,17 @@ Release documentation must identify the exact `qwentts.cpp` and `whisper.cpp` re
 
 Tests prioritize public behavior and end-to-end evidence over implementation-only unit coverage:
 
+- HTML compositions validate metadata, default props, bindings, conditionals, repeats, and controller declarations, including inline/external parity and the exactly-one-controller rule.
+- Static composition validation catches metadata, root/controller count, binding, animation, script, element, and asset-reference errors before Chromium.
+- Diagnostics carry stable codes and source locations; JSON results expose the composition entry, controller declaration, and top-level diagnostics.
 - Sequential, individual, random-order, and parallel frame renders produce equivalent images.
 - Determinism checks compare captured pixels or stills; encoded MP4 bytes are not a reproducibility oracle.
-- Preview and renderer use the same runtime.
-- CSS, JavaScript, SVG, and Canvas animations seek correctly.
-- Embedded video frames seek deterministically, including under parallel capture, and their audio appears in the offline mix.
+- Preview and renderer use the same composition document and host runtime.
+- CSS, controller JavaScript, SVG, and Canvas animations seek correctly.
+- Frame-scheduled `data-fy-anim-*` animations and frame-state CSS variables produce the expected frames.
+- Embedded video and audio frames seek deterministically, including under parallel capture, and their audio appears in the offline mix.
 - WebGL canvases produce deterministic stills and rendered frames under the pinned software renderer.
+- Executable scripts other than the inline or external controller, inline event handlers, `javascript:` URLs, and unsupported visual elements are rejected.
 - Asset and runtime failures produce nonzero CLI exits.
 - Rendered MP4 files have the expected dimensions, frame count, duration, and audio stream.
 - Golden-frame tests cover representative visual behavior.
@@ -214,7 +232,7 @@ Tests prioritize public behavior and end-to-end evidence over implementation-onl
 - Real-model integration tests are explicitly opt-in and use documented upstream revisions.
 - Agent-workflow evaluations verify source preservation, provenance, validation, still inspection behavior, failure reporting, and final renders.
 
-## 12. Deferred from v0.1
+## 12. Deferred
 
 These are scope boundaries, not permanent rejections:
 
@@ -222,7 +240,10 @@ These are scope boundaries, not permanent rejections:
 - Cloud generative-AI services, text-to-video generation, and image generation
 - `qwentts.cpp` reference-audio voice cloning and VoiceDesign
 - Automatic long-text chunking, streaming speech synthesis, and alternative generated-audio formats
-- Built-in subtitle rendering and automatic caption burn-in
+- Built-in subtitle rendering, automatic caption burn-in, and declarative karaoke elements
+- Nested `data-fy-repeat` scopes and a general template language
+- Declarative JSON Schema validation
+- Arbitrary executable scripts in composition HTML
 - Automatic upstream builds, model downloads, weight redistribution, and environment repair
 - Agent-only runtimes, MCP servers, hosted agent control planes, and host-specific skill installers
 - React or other UI-framework adapters in the core
@@ -231,6 +252,7 @@ These are scope boundaries, not permanent rejections:
 - Live streams, remote media, and other visual sources that cannot be deterministically seeked
 - Dynamic per-frame asset loading or AI inference
 - Frame caches
+- Batch still capture; agents can run `still` once per representative frame
 - Additional final-video formats, general image-sequence output, and arbitrary FFmpeg argument passthrough
 - Built-in TypeScript transpilation and npm dependency optimization
 - Rendering untrusted compositions
@@ -239,4 +261,4 @@ These are scope boundaries, not permanent rejections:
 
 ## 13. Release posture
 
-Frameyard is MIT-licensed. Initial releases use `0.x` versioning, and composition, configuration, CLI, JSON-result, transcript, and skill-contract changes are documented explicitly until those contracts stabilize.
+Frameyard is MIT-licensed. Initial releases use `0.x` versioning, and composition, configuration, CLI, JSON-result, transcript, and skill-contract changes are documented explicitly until those contracts stabilize. 0.4.0 is a breaking authoring-model release: HTML documents replace JavaScript composition modules, and the `fy` namespace replaces `data-frameyard-*` authoring attributes. See [ADR 0007](./adr/0007-make-html-documents-the-composition-unit.md) and the [0.4 migration guide](./migration-0.4.md).

package/examples/demo/README.md

@@ -1,12 +1,16 @@
 # Frameyard demo
 
-A 30-second, 1920×1080 composition that exercises the v0.1 core:
+A 30-second, 1920×1080 HTML composition that exercises the current core:
 
 - HTML and CSS layout, including seeked CSS keyframe animation
-- deterministic Canvas 2D starfield
+- deterministic Canvas 2D starfield in an external controller
 - SVG path drawing and data bars updated from the frame
 - JSON props for the title, subtitle, and accent color
-- a declarative audio timeline with repeated local chime clips
+- an `<audio>` timeline with repeated local chime clips
+- frame-state CSS variables for the progress bar
+
+The composition lives in `compositions/demo.html`; the optional controller is
+`compositions/demo.controller.js`.
 
 From the repository root:
 
@@ -14,7 +18,7 @@ From the repository root:
 pnpm build
 node dist/cli.js check demo --project examples/demo
 node dist/cli.js still demo --frame 240 --project examples/demo --out demo-still.png
-node dist/cli.js render demo --project examples/demo --props examples/demo/props/demo.json --out demo.mp4
+node dist/cli.js render demo --project examples/demo --props examples/demo/props/demo.json
 ```
 
 Start the interactive preview with:

package/examples/demo/compositions/demo.controller.js

@@ -0,0 +1,120 @@
+import { random } from "frameyard/runtime";
+
+const STAR_COUNT = 130;
+const BAR_COUNT = 52;
+const BASELINE = 858;
+
+let context;
+let signalPath;
+let signalBars;
+let frameLabel;
+let stars;
+let bars = [];
+let signalLength = 0;
+
+function clamp(value) {
+  return Math.max(0, Math.min(1, value));
+}
+
+function easeOut(value) {
+  const t = clamp(value);
+  return 1 - Math.pow(1 - t, 3);
+}
+
+function makeStars() {
+  stars = Array.from({ length: STAR_COUNT }, (_, index) => ({
+    x: random("star:" + index + ":x"),
+    y: random("star:" + index + ":y"),
+    radius: 0.6 + random("star:" + index + ":r") * 1.8,
+    speed: 6 + random("star:" + index + ":speed") * 34,
+    alpha: 0.12 + random("star:" + index + ":alpha") * 0.65,
+  }));
+}
+
+function buildBars(root) {
+  signalBars = root.querySelector("#signal-bars");
+  bars = [];
+
+  for (let index = 0; index < BAR_COUNT; index += 1) {
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    const height = 24 + random("bar:" + index + ":height") * 176;
+    const x = 168 + index * 31;
+    rect.setAttribute("x", String(x));
+    rect.setAttribute("width", "15");
+    rect.setAttribute("rx", "7.5");
+    rect.setAttribute("fill", "var(--fy-prop-accent)");
+    rect.setAttribute("height", "0");
+    rect.setAttribute("y", String(BASELINE));
+    rect.setAttribute("opacity", "0");
+    signalBars.append(rect);
+    bars.push({ element: rect, height });
+  }
+}
+
+function buildSignalPath(root) {
+  signalPath = root.querySelector("#signal-path");
+  const points = [];
+  for (let index = 0; index <= 120; index += 1) {
+    const x = 160 + (index / 120) * 1600;
+    const wave = Math.sin(index / 7) * 38 + Math.sin(index / 17 + 1.4) * 22 + (random("signal:" + index) - 0.5) * 12;
+    points.push([x, 535 + wave]);
+  }
+  const d = points.map(([x, y], index) => (index === 0 ? "M" : "L") + x + " " + y).join(" ");
+  signalPath.setAttribute("d", d);
+  signalLength = signalPath.getTotalLength();
+  signalPath.style.strokeDasharray = String(signalLength);
+  signalPath.style.strokeDashoffset = String(signalLength);
+}
+
+export default {
+  mount({ root }) {
+    context = root.querySelector("#field").getContext("2d");
+    frameLabel = root.querySelector("#frame");
+    makeStars();
+    buildBars(root);
+    buildSignalPath(root);
+  },
+
+  update({ frame }) {
+    const intro = easeOut(frame / 52);
+    const signalReveal = easeOut((frame - 96) / 260);
+    const width = context.canvas.width;
+    const height = context.canvas.height;
+
+    context.clearRect(0, 0, width, height);
+    for (const star of stars) {
+      const drift = (frame * star.speed) % width;
+      const x = (star.x * width + drift) % width;
+      const y = star.y * height;
+      context.beginPath();
+      context.fillStyle = "rgba(214, 236, 255, " + star.alpha * (0.45 + 0.55 * intro) + ")";
+      context.arc(x, y, star.radius, 0, Math.PI * 2);
+      context.fill();
+    }
+
+    signalPath.style.strokeDashoffset = String(signalLength * (1 - signalReveal));
+    signalPath.style.opacity = String(0.18 + signalReveal * 0.64);
+
+    const barReveal = clamp((frame - 120) / 240);
+    for (let index = 0; index < bars.length; index += 1) {
+      const bar = bars[index];
+      const local = clamp(barReveal * BAR_COUNT - index);
+      const height = bar.height * local;
+      bar.element.setAttribute("height", height.toFixed(2));
+      bar.element.setAttribute("y", String(BASELINE - height));
+      bar.element.setAttribute("opacity", (0.25 + local * 0.62).toFixed(3));
+    }
+
+    frameLabel.textContent = String(frame).padStart(3, "0");
+  },
+
+  dispose() {
+    context = undefined;
+    signalPath = undefined;
+    signalBars = undefined;
+    frameLabel = undefined;
+    stars = undefined;
+    bars = [];
+    signalLength = 0;
+  },
+};