Explainer video — How the exercises work

Status: script, not yet produced. The finished video goes into the install section of every course page and the top of How the exercises work.

Target: ~1:50 · 16:9 · 1080p+ · captions on. Palette (match the Edu pages): deep blue #0655bf, traffic lights #4ade80 / #facc15 / #f87171, navy gradient background #0b1d3a → #3b1d6e, white type. Voice: calm, confident, ~145 wpm, short pauses at the em-dashes. Music: minimal electronic pulse, ducked −18 dB under voice.

Production pipeline: the /explainer-video skill (script → Piper/ElevenLabs voiceover → Remotion scenes → MP4); the template lives at AgenticEngineering/VideoStudio/Template.

Scene 1 — Central course, your exercises · 0:00–0:16

VOICEOVER: Every course here has two halves. The lessons, videos and slides stay on the course — central, always current. The exercises become yours: installed into your own space, where every page is yours to edit, run — and break.

ON SCREEN: Navy gradient. A glowing course page block in the center; a copy of its exercise pages peels off and slides into a personal workspace frame labeled with a user avatar. The central block keeps pulsing (it stays live).

OVERLAY: The course stays central — the exercises become yours.

GEN PROMPT: 'Flat vector motion graphics on dark navy, a glowing blue document stack in the center, three small pages peeling off and gliding right into a soft-bordered personal workspace card with a user avatar, the central stack keeps gently pulsing, minimal corporate explainer style, no text.'

Scene 2 — Three tiers per module · 0:16–0:34

VOICEOVER: Every module ends in three graded workbenches. Green — a warm-up you finish in minutes. Yellow — the real thing. Red — the stretch goal. Twenty-seven in all, easiest first.

ON SCREEN: The Edu traffic-light motif builds: three circles pop in — green, yellow, red — then multiply into a 9×3 grid of small cards that sorts itself into green → yellow → red columns.

OVERLAY: 🟢 warm-up · 🟡 the real thing · 🔴 the stretch

GEN PROMPT: 'Minimal vector animation, three circles in green yellow red popping in on navy, multiplying into a tidy grid of twenty-seven small cards that reorder themselves into three color columns, smooth easing, clean motion-graphics style.'

Scene 3 — Deliberately red · 0:34–0:56

VOICEOVER: Here is the trick: every exercise ships deliberately red. The checks are already written — the implementation is a stub. Those failing rows are the specification, written in a form that runs. You, or an agent you direct, drive them green.

ON SCREEN: A workbench cell: a small table of checks, four rows flashing red ✗. A cursor edits one function line above; the cell re-runs; rows flip to green ✓ one by one and the header counts up to 8/8 green.

OVERLAY: The red rows ARE the spec.

GEN PROMPT: 'Dark IDE aesthetic, a results table with red cross rows turning one after another into green check rows while a code line above is edited, a counter ticking up to eight of eight, satisfying sequential flips, high contrast, minimal.'

Scene 4 — Install into your space · 0:56–1:14

VOICEOVER: To start, press Install on the course page. A dialog lets you choose what to install and where — a namespace in your own space. Seconds later your copies exist, and Go to Exercises takes you straight to them.

ON SCREEN: The course hero with its Install button; the "Install course material" modal opens (Exercises ✓, Demos ✓, a destination field), the accent Install button is pressed, a progress beat, then "✅ Installed — your copies live at …" and the cursor rides "Open my copies →" into the workspace.

OVERLAY: Install… → your own editable copies

GEN PROMPT: 'Clean UI mockup animation on navy, a modal dialog opening over a course page, two checkboxes ticked and a destination field, a blue install button pressed, a brief progress shimmer, a green checkmark line appearing, cursor clicking through to a fresh workspace page, modern product-demo style, no readable text.'

Scene 5 — Yours to break; solutions one click away · 1:14–1:32

VOICEOVER: Everything in your copy is yours. Edit the prompt, break the code, run it again — the course's original never changes. Stuck? The worked solution is one click away on every exercise — all green, so you can diff your thinking against it.

ON SCREEN: Split screen: left, the user's copy being edited freely (scribbles, re-runs); right, the pristine central page behind glass. A "Solution" chip flips the left pane to an all-green battery.

OVERLAY: Your copy. Your rules. Solution one click away.

GEN PROMPT: 'Split-screen vector animation, left panel a document being freely edited with playful scribbles and re-run flashes, right panel the same document behind frosted glass untouched, then a chip labeled with a lightbulb flips the left panel to a table of green checks, navy palette, minimal.'

Scene 6 — The course evolves with you · 1:32–1:48

VOICEOVER: And when the course evolves, press Update from course. Untouched pages re-sync to the newest version — the pages you worked on are preserved. Your work is never overwritten.

ON SCREEN: The central course block emits an update pulse; in the workspace, untouched cards refresh with a shimmer while edited cards get a small shield icon and stay put.

OVERLAY: Update from course — your edits are preserved.

GEN PROMPT: 'Vector motion graphics, a pulse wave traveling from a central glowing stack to a personal workspace of cards, some cards shimmer and refresh, two cards with small shield icons stay unchanged, reassuring calm animation, navy background.'

Scene 7 — Your first green · 1:48–2:00

VOICEOVER: That is the whole system. Pick a green workbench, press Install — and drive your first spec to green.

ON SCREEN: The 27-card grid returns; a green card enlarges, its Install/Go-to-Exercise button pulses once; end card: the Edu traffic-light logo + "How the exercises work".

OVERLAY (end card): Pick a 🟢 — drive it green.

GEN PROMPT: 'A tidy grid of cards on navy, one green card scaling up gently with a pulsing call-to-action button, cut to a clean end card with three traffic-light dots and a soft glow, optimistic close, motion-graphics style.'

Full voiceover — paste-ready (≈250 words ≈ 1:45 + beats)

Every course here has two halves. The lessons, videos and slides stay on the course — central, always current. The exercises become yours: installed into your own space, where every page is yours to edit, run — and break.

Every module ends in three graded workbenches. Green — a warm-up you finish in minutes. Yellow — the real thing. Red — the stretch goal. Twenty-seven in all, easiest first.

Here is the trick: every exercise ships deliberately red. The checks are already written — the implementation is a stub. Those failing rows are the specification, written in a form that runs. You, or an agent you direct, drive them green.

To start, press Install on the course page. A dialog lets you choose what to install and where — a namespace in your own space. Seconds later your copies exist, and Go to Exercises takes you straight to them.

Everything in your copy is yours. Edit the prompt, break the code, run it again — the course's original never changes. Stuck? The worked solution is one click away on every exercise — all green, so you can diff your thinking against it.

And when the course evolves, press Update from course. Untouched pages re-sync to the newest version — the pages you worked on are preserved. Your work is never overwritten.

That is the whole system. Pick a green workbench, press Install — and drive your first spec to green.

Production notes

Reconnecting…
The server was updated. Reloading the page to pick up the latest version.