Teaching Animation with HyperFrames — prompt template

HOW TO USE THIS TEMPLATE (delete this block before sending)
* Fill in every [bracket] in Part B and delete what you do not need. Keep Part A as it is.
* Open an empty folder in Claude Code or OpenAI Codex and paste the whole text.
* You may write the brackets in any language; the language of the video is set in B1.
* Expect the agent to ask before installing packages or rendering; allow it after reading the command.

PART A — HOW TO WORK (keep as is)

A1. Environment (do this first and report what you found)
* Check Node.js (HyperFrames needs version 22 or later), FFmpeg and FFprobe.
* Install the framework locally, pinned: npm init -y, then npm install -D hyperframes@0.8.208
* Run `npx hyperframes doctor`. If it reports no Chrome, run `npx hyperframes browser` (see its --help).
* Set DO_NOT_TRACK=1 for every hyperframes command.
* Learn the framework from its own documentation before writing code: `npx hyperframes --help`, `npx hyperframes docs` and node_modules/hyperframes/README.md.
* If a command needs network access or a permission you do not have, ask me. If a required tool is missing, stop and tell me. Do not switch to another video tool or skip the render.

A2. Architecture
* Every number that appears on screen is computed in one file (for example js/physics.js) from the source named in B4, or read from a data file generated from that source. Never type a physical number by hand into the HTML.
* Everything that moves is drawn by one pure function render(t) of the root-timeline time t, called from the onUpdate of a single GSAP tween that spans the whole film, so that seeking to any frame paints that frame.
* Determinism: seeded random generator only. No Math.random, Date, performance.now, timers, requestAnimationFrame or network calls in any script.
* HyperFrames 0.8.208 traps:
  - Register the root timeline (window.__timelines[...] = tl) in an inline <script> inside index.html, not in an external .js file.
  - System fonts need one @font-face with local() per weight, otherwise bold text silently renders regular.
  - When the same element gets several tweens, set immediateRender: false on them.

A3. Scientific honesty
* Use the data source named in B4. If you need a value it does not give, say so and ask; do not estimate silently.
* Label anything that is a picture rather than a measurement or a calculation (for example "Illustrative molecules"). If you adjust or simplify anything to make it look right, disclose it on screen in one short line and in SCIENCE_QA.md, with its size.
* Do not explain a result by one mechanism unless you have checked it. If the cause is not established, say so.
* Never change a random seed or a parameter only to make a number look better.

A4. Verification you must build and run
* tools/check.mjs, a content gate that exits 1 on any failure. It recomputes or re-reads every on-screen number from an independent source (a second calculation, or the reference tables in B4 saved to disk), runs the real drawing code against a stub DOM and reads the displayed values back at regular times. It also checks the on-screen language, units and signs, and every item of B6.
* tools/mutation_test.mjs, which copies the project, breaks one thing per copy and requires the gate to fail every time. Break at least one thing per item of B6. A gate that passes broken code is not a gate.
* `npx hyperframes check` with 0 errors.
* Render: npx hyperframes render --quality delivery --fps 30 -o renders/[file name].mp4
* Verify the MP4 itself: ffprobe (codec, resolution, frame rate, duration, frame count), a full decode with `ffmpeg -v error -i <file> -f null -` (no errors), and key frames extracted from the MP4, not from the browser preview, into screenshots/.
* Look at the key frames. If your tools cannot show you images, say so in the report instead of claiming a visual check.

A5. Report
* What you verified and how (commands and results), what you could not verify, and every simplification a teacher should know about. Do not report completion before the MP4 exists and has passed the checks above.

PART B — YOUR VIDEO (fill in)

B1. Basics
* Title: [question-style title, for example "Why Does ...?"]
* Course and level: [for example first-year general chemistry]
* On-screen language: [English / Traditional Chinese / ...]; narration: [none / language]
* Duration: [60-120] seconds; 1920 × 1080, 16:9, 30 fps, MP4
* Must be understandable without narration: [yes / no]

B2. Learning goal (one sentence the viewer can say afterwards)
[...]

B3. Misconceptions to address (2-4)
* [...]
* [...]

B4. Scientific setup and data source
* System and conditions: [substance, amounts, temperatures, pressures, what changes]
* Model: [ideal gas / reference data / equation / qualitative only]
* Source of every number: [for example "NIST Chemistry WebBook" or "CoolProp reference equation of state" or "Atkins 12e, Table ..."]
* Units and conventions: [for example p in bar, V in cm³ mol⁻¹, dU = q + w with w done on the system]

B5. Storyboard (times are approximate)
* Scene 1, [0-10] s, [name]: [what happens; exact on-screen text in quotes]
* Scene 2, [..] s, [name]: [...]
* Scene 3, [..] s, pause and predict: [the question shown while the motion stops]
* Scene 4, [..] s, [explanation]: [...]
* Scene 5, [..] s, [molecular or everyday picture]: [...]
* Scene 6, [..] s, takeaway: [one sentence in large text, closing line]

B6. Scientific accuracy requirements (each must be checked by tools/check.mjs)
* [for example: the pressure stays constant while liquid and vapor coexist]
* [...]
* Every displayed number is consistent with the source in B4.

B7. Visual design
* Style: modern scientific visualization, light background, large readable text for classroom projectors, no decorative effects.
* Palette: [for example white, light blue, navy, cyan, warm orange]
* Must be unmistakable: [for example the two systems being compared]

B8. Deliverables and acceptance
* The MP4, the full HyperFrames source project, STORYBOARD.md, SCIENCE_QA.md (every number with its source and every simplification), at least four key-frame screenshots taken from the MP4, render commands and verification results.
* The video plays from start to end without errors, all on-screen text is in the language of B1, and the science is consistent with B4 and B6.
* Make reasonable creative decisions yourself. Produce the finished video, not a proposal.