Animations
with Claude

I want to make a short animated film, about [40] seconds, that launches my web page [NAME]: [one line on what it does and who it is for].
The code is in [path or repo] and it is live at [URL]. Read those first, and nothing else.

The film will be shown [at our demo day on a projector]. It has to work [muted too].

I haven't chosen a style yet. Before you build anything, give me 4–5 pitches that look really different from each other. For each one: the concept, the look, the technology you would use, and what happens in the first five seconds. Tell me which one you would pick and why. I've already seen [the watercolour, arcade and neo-punk films from class], so surprise me.

Then ask me everything you need to know, with your default answer in brackets, so I can answer in one message. Show me the storyboard on an HTML page before you start making the video.

Number [3], but with the ending from [5]. Make it a bit more [playful].

None of these is quite it. Give me three more, further from each other, and one that is a bit weird.

How hard would it be to make it look like [stop-motion clay]? What would it cost in render time on my laptop?

Can you make [me and my two teammates] into characters in the film? Here are some photos: [photos]. Number the faces you find, and tell me when you want me to say who is who.

You are helping me make a [40]-second launch film for my web page. We will use HyperFrames: the film is an HTML page animated with GSAP, and HyperFrames renders it frame by frame to an MP4.

Tools you may use. Do not use any other tools or libraries:
- npx hyperframes (init, check, snapshot, preview, render, docs)
- GSAP 3 (already loaded in index.html from cdn.jsdelivr.net)
- ffmpeg and ffprobe
- python3 with edge-tts (only in Phase 5)

Rules for every HTML file you write:
1. The film is index.html. Each scene is its own file, compositions/sN.html, mounted in index.html with data-composition-src.
2. Every timed element has data-start and data-duration (seconds) and class="clip".
3. Each file has ONE GSAP timeline created with gsap.timeline({ paused: true }) and registered as window.__timelines["<composition-id>"]. Never call play().
4. Times inside a scene file start at 0 for that scene.
5. No Math.random(), no Date.now(), no fetch, no setTimeout or setInterval. The same frame must always look the same.
6. CSS ids and classes must not start with a digit. Prefix every id with the scene id (s1-title, s2-shot).
7. Fonts and images are local files in assets/. No web fonts from Google at render time.

Work in phases. I will send one phase at a time. At the end of each phase: run the check I ask for, show me the output, and STOP. Do not start the next phase until I send it.

First, run these and read the output:
  npx hyperframes docs compositions
  npx hyperframes docs data-attributes
  npx hyperframes docs gsap
Then explain the rules above back to me in your own words, in 7 short lines. Then stop.

STYLE CARD: "Bold poster"
Canvas: 1920x1080, 30 fps.
Colours (use only these):
  paper #F4EFE6 · ink #111111 · accent #FF4F1F · blue #2F5BFF
  A scene uses at most 3 of them. Text is ink on paper, or paper on ink.
Fonts:
  Headlines: Inter 900, 140–180 px, letter-spacing -0.04em, max 6 words per screen.
  Small labels: Space Grotesk 500, 32 px, UPPERCASE, letter-spacing 0.08em.
Layout:
  Left-aligned. Text starts at x = 160 px. Keep 100 px clear on every edge.
  Screenshots sit in a simple browser frame: 12 px ink border, 40 px top bar, 8 px hard ink shadow offset (no blur).
Motion:
  Things enter in 0.5 s with ease "power3.out" (y: 60 → 0, or scale 0.9 → 1).
  Several items: stagger 0.08 s.
  After the last item arrives, HOLD at least 1.5 s with nothing new happening.
  Only one thing moves at a time. Nothing moves at constant speed except progress bars.
  The title is already on screen at 0 s (the first frame is the thumbnail).
Between scenes:
  A hard cut, or an accent-colour panel that wipes across the screen in 0.4 s (ease "power2.inOut").
End card:
  The page name, the URL, and nothing else. Hold it for 3 s.
Avoid:
  Gradients, glows, blur, emoji, stock icons, rotating 3D, more than 6 words on screen.

Yes, this plan is good. Do it your way, and I'll correct anything on the storyboard.

Phase 1. Write two files in the folder [films/my-launch-film]. Do not write any HTML yet.

BRIEF.md, with exactly these headings:
- Message: one sentence the viewer should remember: "[Recipe Finder tells you what to cook from what is already in your fridge.]"
- Audience: [classmates and teachers at demo day]
- Where it is shown: [projector, with sound]
- Length: [40] seconds, 1920x1080, 30 fps
- Voice: [none / English, en-GB-RyanNeural]
- Style: the style card below, copied in full

SCRIPT.md: a table with exactly 5 scenes and these columns:
| id | seconds | what we see | words on screen (max 6) | voice line (max 15 words, or "none") |
Scene s1 is the title. Scene s5 is the end card with the URL [URL]. Scenes s2–s4 show: the problem, the main feature, and one detail people will like. Use the screenshots in assets/shots/: [list the file names].
The seconds must add up to [40].

[PASTE THE STYLE CARD HERE]

Show me SCRIPT.md and stop.

Can you make the style a bit more [neo-punk], but keep the content as it is and the expressions on the faces?

Make another one in a totally different style. Here is the art direction:
"""
[Palette: 2–5 colours …
Shapes and lines: …
How it moves: on twos, snaps, holds, smears …
Transitions: …
What to avoid: …]
"""

Perfect, now do it!

Phase 3. Set up the project and build ONLY scene s1.
1. Copy the starter project into [films/my-launch-film] (index.html, compositions/, package.json, hyperframes.json, meta.json). Keep BRIEF.md, SCRIPT.md and storyboard.html.
2. Put the fonts in assets/fonts:
     npm install @fontsource/inter @fontsource/space-grotesk
   then copy the latin .woff2 files you need from node_modules/@fontsource/*/files/ into assets/fonts and load them with @font-face.
3. Change compositions/s1.html so it matches the s1 card in storyboard.html and the motion rules in the style card. Keep the same structure as the starter file: <template>, <style>, a root div with data-composition-id="s1", one paused timeline registered as window.__timelines["s1"].
4. In index.html, set each scene's data-start and data-duration from SCRIPT.md, and set the root data-duration and the tl.to({}, { duration: N }) line to the total length.
5. Run:  npm run check
   Fix every error. Then run:  npx hyperframes snapshot --at 0.5,2,3.5 -o snaps
6. Start Studio so I can look at it myself:  npx hyperframes preview --background
7. Show me the check output, the paths of the snapshot images and the Studio link, and stop.

Phase 4. Build ONLY scene [s2], in compositions/[s2].html, following the [s2] card in storyboard.html and the style card.
Copy the structure of compositions/s1.html exactly; only change the ids (prefix [s2]-), the content and the animation.
Add it to index.html if it isn't there yet. Then run: npm run check
and: npx hyperframes snapshot --range [START],[END] --frames 3 -o snaps
Show me the output and stop.

Phase 5. Add the voice.
1. Make a Python virtual environment and install edge-tts:
     python3 -m venv .venv && .venv/bin/pip install edge-tts
2. For each scene with a voice line in SCRIPT.md, run:
     .venv/bin/edge-tts --voice [en-GB-RyanNeural] --rate=[-5%] --text "<the line>" --write-media assets/voice/<scene>.mp3
   Write numbers as words in the text ("forty", not "40").
3. Measure each file:  ffprobe -v error -show_entries format=duration -of csv=p=0 assets/voice/<scene>.mp3
4. If a voice clip is longer than its scene minus 1 second, make the scene longer and update SCRIPT.md, every data-start after it in index.html, and the total length.
5. Add one <audio> per clip inside the root div of index.html:
     <audio id="voice-<scene>" src="assets/voice/<scene>.mp3" data-start="<scene start + 0.4>" data-duration="<clip length>" data-track-index="10" data-volume="1"></audio>
6. Run npm run check, show me the output and a table of scene, clip length and scene length, and stop.
I will listen to the voice myself.

Fix the overlapping nodes in scene [7] and the zoom in scene [9]. Make the sound effects quieter and the voice louder. Show me again before rendering.

At [0:19], #03-player-one-panel comes in too early: let it come in after the two characters. At [0:42] the text is too close to the edge. And look at what I've selected in Studio right now: make it [smaller and slower]. Show me again before rendering.

Change only compositions/[s3].html. #s3-shot starts its animation at 0.8 s, which is too early. Start it at 1.6 s instead, and change nothing else.
Then run npm run check and npx hyperframes snapshot --range [START],[END] --frames 3 -o snaps, show me the output and stop.

Render it.

Save this style as a template, and add a row to my STYLE-LIBRARY.md: the technology, this film, how to make another one, what broke and how we fixed it, and how long the render took.

What did you not know about this when we started, that you had to find out by failing?