Vertical Flat Animation Bible Trivia Script

<inputs>
Ask me for my story, or pitch 3. Good stories: a forgotten or misunderstood biblical figure, two people history keeps confusing, a tradition with a surprising origin, a symbol most believers can't explain. Each pitch gets one true, checkable angle that flips what people assume, plus a note on what comes from scripture and what comes from tradition. Ask which voice I want and roughly how long (35-50 s). Then write the narration (one sentence per idea, 100-125 words), a 6-8 scene storyboard (what we see, what moves, which label lands on which word), the sound list and the palette. Show me all of it, with the cost of the voice and the render, before you generate anything.
</inputs>

<direction>
A 1080x1920 vertical flat-vector explainer in the style of the big science-animation channels, drawn entirely in code (SVG + GSAP). No image generation, no stock photos, no AI video.
- Every scene is a full place (a dusk hillside, a stone room, a night plain, a split-screen comparison) with characters acting the line out.
- Flat colour shapes, no outlines, one darker flat shade per form. Soft radial glows only for light sources: sun, flame, halo, candles.
- Characters: big heads, oval faces, dot eyes with a tiny highlight, simple beards, long robes with a mantle draped across the body. Colour-code people: the wrong idea or villain in red #E8505B, the true idea or hero in gold #E9A93B. Night palette #0A0416 and #2A1550, accent teal #3FA9C4, cream #FFEFD2. A character keeps identical colours in every scene.
- Labels: solid square plates (no rounded corners, no leader lines), Montserrat 900 caps, 1-4 words. Gold plate with dark text by default, a red plate only for the call to action. Each sits near what it names and arrives on the word that says it: the plate scales in from the left in 0.32 s (power3.out), the text rises 12 px 0.12 s later, and it leaves in reverse.
- Subtitles: two white lines of Inter, 62 px, centred at y=205. The word being spoken is weight 800, pure white; every other word is weight 600 at 50% white, with a soft dark shadow. One group on screen at a time, at most 20 characters a line, broken at phrase boundaries.
- Camera: every scene drifts or pushes 3-7%. A big reveal can be a pull-back from 2.4x to 1x.
- Motion: nobody freezes. Heads tilt, eyes glance, lids droop, arms point from the shoulder. Things arrive with back-out easing or a spring, never a plain fade.
- Safe zones: nothing important above 168 px, and every word (subtitles and labels) between 168 and 1330 px. Below 1330 is scenery only, because the app's interface covers it.
- Tone: reverent and curious, never mocking. When something comes from tradition rather than scripture, the script says "tradition says".
Banned: outlines, emoji, floating UI cards, gradients on characters, rounded plates, any channel's logo or characters, a still frame longer than 1 s.
</direction>

<structure>
The voice decides the length, at about 160 words a minute. Example beat map for about 42 s:
0 s a "Did you know..." hook with both figures on screen; the twist lands in the second sentence with the first label →
~8 s the reveal: push in on the hero, his name on a plate →
~12 s the evidence: a parchment unrolls and types the source text letter by letter; the wrong name gets struck through in red as the sentence ends →
~16 s the consequence acted out (people turning their backs), a label on the key word →
~20 s the turn: someone reaches out, a flame ignites on the beat, warm light floods the room, a halo arrives →
~26 s how to tell them apart: a split screen with one prop per side and a label on each prop as it's named →
~33 s the payoff: pull back to a huge crowd (hundreds of candles leaning toward him in a wave) →
~39 s end card: an emblem and two plates, the topic and a red FOLLOW FOR MORE. Hold 1.5 s after the last word.
Cut only on sentence boundaries.
</structure>

<build>
0. This assumes a Calliope workspace: a HyperFrames + GSAP sandbox with narration, word timestamps, checks, snapshots and rendering. Read the environment's own docs first (template style guide, composition format, vertical-video rules); they win over this prompt on technical details. Outside Calliope, set up the equivalent with Node, GSAP, Chromium/Playwright and FFmpeg, and tell me what you installed.
1. Voice first. Generate the narration, read its real duration and word timestamps, and plan every scene window, label, gesture and sound from those times. Each scene is a sentence, and the cut falls in the gap after its last word. If the voice comes out shorter than planned, plan to the voice; don't pad with silence.
2. Project: an index.html root composition (1080x1920) with one sub-composition per scene, one for the subtitles, and the audio clips at the root. Each file registers a paused GSAP timeline under its composition id. Every frame is a pure function of time: no Math.random, no timers, no network at render time.
3. Generate, don't hand-write. Write one Python generator per scene that outputs its HTML, plus a shared library with:
   - a seeded star field;
   - gradient helpers;
   - the label plate;
   - one parametric character function (kind, colours, props).
   Editing the generator keeps every character identical across scenes. Prefix every id with its scene id (s3-hero-head) so nothing collides once the scenes are assembled.
4. Character rig, all SVG groups with ids:
   - rig, containing body, armL and armR (pivot at 50% 0%) and head (pivot at 50% 100%).
   - eyes, which glance by moving on x.
   - lids: a skin-coloured rect scaled from 50% 0%. 0 is open, 0.4 is heavy-lidded, 1 is closed.
   - brows and mouth.
   - optional props: money bag, medallion, chest flame, head flame, halo, and a dark overlay on the mantle for shame.
   Background people are hooded figures seen from behind, each with a hidden gold rim-light stroke you switch on when the light floods in.
5. Subtitles: each word is an inline-grid with two stacked spans, a dim one and a bold one, so changing weight never reflows the line. At each word's start, crossfade them in 0.05 s, and switch back at the next word's start. A group appears 0.06 s before its first word and leaves when the next group starts. The first group is already visible on frame 0, so the thumbnail has text.
6. Sound:
   - Booms: a soft low boom on every cut, quiet, with its peak landing one frame after the cut.
   - Whooshes: a short one when something unrolls or slides in, and a longer one peaking on the big moment.
   - Placement: place every effect by its measured peak and give every audio clip an explicit duration.
   - Tones: no synthesized tones or dings.
   - Music: optional. If you add a bed, use a track whose licence allows it, keep it 10-12 dB under the voice, and tell me the source.
7. Review before rendering:
   - Run the project checks.
   - Snapshot about 20 moments (each scene's opening beat and every label) into two contact sheets and look at them yourself.
   - Fix labels overlapping subtitles, labels covering faces, empty boards and black edges.
   - Render, then inspect frames from the rendered file.
   - Tell me plainly what you couldn't verify, such as the audio mix.
8. When it's done, offer to save the project as a reusable template, so the next video only needs a new script.
</build>

<gotchas>
- Initial states set with tl.set(..., 0) inside a paused timeline don't render on frame 0. Set them with gsap.set before building the timeline, or write them into the markup. Eyes are the classic case: forget the lids and every character starts the scene mid-blink.
- Use one svgOrigin per scene and repeat it in the camera tween's from and to; changing it mid-scene makes the whole world jump.
- Give SVG scale tweens an explicit transformOrigin of 50% 50%, or they scale from a corner.
- Don't paint the sub-composition root. Paint a full-bleed rect inside the scene's SVG, larger than the frame, so camera moves never show an edge.
- Audio clips without an explicit duration can be read as lasting to the end of the video, so every repeated sound gets flagged as overlapping.
- In a split screen, work out where a raised arm and its prop end up before choosing the angle; a 60° swing can carry the prop across the divider.
- Find repeated words by occurrence ("Judas" appears several times), or labels land on the wrong line.
- A word typed as separate letter spans counts as many words for readability checks. That's fine for a quick reveal as long as the subtitle carries it.
</gotchas>

<start>
Ask me for my story, or pitch 3, then show me the script, storyboard, sound list and cost before you spend anything.
</start>