Native visual library

Search everything in plain words first: pnpm cf find "what you want to show" returns a short mixed shortlist (blocks, sketches, playbooks, looks, cast shapes and moves, mechanisms, examples), and find --id KIND:NAME the exact authoring; docs/library-index.md is the whole index, and the clearframe-inspiration skill turns a brief into concepts with it. Then run pnpm cf blocks, blocks NAME, sketch, playbooks, themes, motions and icons. The exact prop reference is references/blocks.md, generated from packages/engine/src/film/catalog.mts. Starter storyboards live in recipes/ and are generated from the playbooks.

Palettes, treatments, type voices, sketches and playbooks are files in packages/engine/src/library/, one per item. Read library/README.md before adding one: a new look, arc or composition is a new file, not engine code. A project's own library/ overrides built-ins by id. So does a shared brand kit passed with --library DIR. Those layers are JSON only.

Choose the visual by the task:

Playbooks have different narrative arcs, audiences and required evidence. Adapt and combine them rather than stretching a mismatched structure. The sample claims/quotations are labelled illustrative; replace them before publishing. For real UI demonstrations use approved screenshots or recordings: annotate pins the reading order onto a screenshot; the portal sketch or a canvas pointer draws the step in the app when no capture exists.

Financial explanations have dedicated arcs: cash-flow follows payment availability into a reconciled sample cash balance; scenario-lab compares possible outcomes on one explicit basis; client-update tells clients the quarter calmly. Their native sketches are cash-lock (a clearing gate), scenario-fork (labelled possible paths, also split into scenario-origin and scenario-outcomes for a camera world). They adapt to landscape and vertical scaffolds; the drawings are qualitative and do not encode amounts or probabilities. Keep the sample's sources, narration and visible figures consistent when replacing the data. Read financial-playbooks.md for evidence requirements and demo commands.

Research and podcast sources do not imply one style. research-digest explores evidence inside a continuous illustrated world; the research-evidence direction stays on the report's own page (a canvas document with marks on the words that make each claim). The podcast-picture direction gives each idea its own small drawing; the podcast-clip playbook has a faster typographic arc. Treat these as editable examples: invent new scenes, combine arcs and change the picture, edit and pace to fit the source. Keep exact claims and citations for research, and exact recorded words, speaker identity and measured timing for podcasts. Never assign the sample script to a real speaker. Read source-playbooks.md.

Layers combine with any block: plate (image/clip behind or beside), tone (colour-blocked scene), camera (slow move, on by default) and art (canvas elements under/over). A film-level texture adds grain and vignette. Read docs/canvas.md and the clearframe-canvas skill before drawing.

For multiple comparable time series, use canvas.props.plot: explicit shared domains and ticks, linear or dated x, linear or logarithmic y, null gaps, source/as-of and synchronized linear reveals. See quantitative-plots.md. Keep a two-second final-value hold and review portrait composition; source compilation does not establish visual acceptance.

Colors, motion intensity, entrances, sources and reading time are authored choices. Read docs/style.md. Kinetic modes are highlight/reveal/word; follow docs/speech.md for the measured-timestamp requirement. For generated plates, use docs/continuity.md and inspect both joins.

Use gallery to review all blocks in a theme/aspect ratio. A new block touches four places: authoring metadata and example in packages/engine/src/film/catalog.mts; prop validation in packages/engine/src/film/validators.mts; runtime rules in packages/engine/src/film/registry.mts (cue delay, staged items, when values settle, sound events, critique family); and the renderer in packages/engine/src/scene/native/src/blocks/ (story.rs, speech.rs, charts.rs, diagrams.rs, media.rs or canvas.rs, registered in mod.rs BLOCKS and dispatched in compositor.rs). Shared timing values live only in packages/engine/src/film/constants.json. A parity test fails if the renderer and catalog block lists diverge. Do not copy archived browser components into the active path.

New GitHub imports must be MIT at the pinned revision. The 132 bundled Tabler aliases inherit the scene accent and use local SVG geometry; see packages/engine/src/film/assets/icons/tabler/manifest.json and LICENSE. Add icons with packages/engine/src/scene/native/tools/fetch-icons.py (pinned revision, path-only shapes, hashes) then generate-icons.py. Use no runtime CDN or unreviewed icon path. Use looks DIR --beat ID for palette comparisons and review DIR for encoded boundary review.

Technical/PR films: new DIR --playbook pr-walkthrough --treatment business. canvas.props.diagram is the system-diagram primitive: components with identities (user, service, database, queue, state, external), connectors (dashed, flowing), groups, and steps that add, remove, replace, re-status and send requests over time; shared ids morph across beats. clearframe sketch architecture|state-machine|component-change prints an editable starting diagram. See system diagrams.