Lesson Animation Studio — Project Brief

Lesson Animation Studio — Project Brief

Status: APPROVED, NOT STARTED. Deferred by the user (Sep 2026): *"this is for a separate

project.. not now."* Everything needed to start cold is in this document.

Locked decisions (user, Sep 2026):

stills for approval *before* building the pipeline. (High design bar — do not build a

pipeline around a look that hasn't been approved.)

website was not completed."* Master B (futures) is an incomplete product — treat it as

secondary and do not let it drive scope or sequencing. All design-direction work, token

extraction and rollout planning should be forex-first.

0. STEP 1 DELIVERABLE — design directions (BUILT, awaiting approval)

https://animation-directions.srv1738752.hstgr.cloud — 3 directions, 22 plates, each with a

4-frame storyboard (stills) and a live motion stage, all rendered in forex's own tokens from

forex's own lesson content.

Recommended shape: A as default, B for hero/simulator, C for text-heavy lessons — three

registers of one system, so 57 lessons of clips do not all look like a template.

Built by directions/build.py (stdlib only) → directions/site/index.html, served from

/var/www/animation-directions on VPS port 8144 (route animation-directions.yml).

Still PNGs of every plate: .../frames/big2-*.png.

Content provenance (nothing invented): the demo section is the lesson's *real*

animatedSequence — M2 L3 "Hammer & Hanging Man", 4 steps with its own labels/captions — and the

gate plate uses that lesson's *real* quiz entry ("The lower shadow of a Hammer should be at least

…" → "2x the body length"). Formula plates use M5 L2's real Position Size formula and worked

numbers. Tokens were re-read from the live CSS (:root verified 2026-09-12), not from this doc.

Rules the directions encode (carry these into the engine):

becomes a bracketed measurement).

1. The problem it solves (evidence, not conjecture)

From the verified Master B deployment audit:

https://www.youtube.com/watch?v=…, but the renderer builds a native

<video src={data.url}> and there is zero YouTube/iframe/embed conversion anywhere in the

build. None of the 26 has ever played.

implements pause-at-timestamp + require-a-correct-answer-to-continue.

scrollyStory, liveChartDemo, simulatorEmbed, flashcard, tabbedDeepDive, chart,

pattern, divider — each has 0 content using it.

(assets/index-*.js), so changing a lesson requires a full rebuild + redeploy.

real animation.

Net: a rich learning feature set with its entire animation and video tier either broken or

unpopulated.

⚠️ This is MASTER B–SPECIFIC — forex is the opposite case

Verified against the live forex app (Blue Monkee Trading,

limegreen-eagle-892117.hostingersite.com). Do not generalise the Master B defects:

So forex already solved video the right way (self-hosted MP4s, no YouTube), and its animation

slots are populated. The user's statement *"we don't use any youtube videos on the website"* is

literally true for forex and effectively true for Master B (its YouTube links are dead).

What forex still lacks — and why the Studio is still worth building for it:

not real animation — a carousel with SVG patterns.

they drift from lesson text over time.

Net framing per product: Master B = *repair dead video slots and fill empty animation slots*.

Forex = *upgrade step-cards to real animation, add gates to working video, and make video

generatable instead of recorded.* Both point at the same Studio.

Forex in numbers (the product we are actually targeting)

9 modules · 57 lessons · ~2,400 lines of authored content. Section usage across the live app:

So forex's animation tier is a token presence, not a real one — one use each, as step cards.

Meanwhile its non-animation rich types (flashcard, application, audioReadalong, mindmap,

infographic, slidedeck) are the *actual* differentiators and are heavily used. The Studio's

job on forex is to make the animation tier match that standard.

Video assets: 9 MP4s, ~333 MB total (hank-*.mp4, 26–52 MB each).

> ⚠️ Do NOT try to replace the 9 Hank videos with animation. They are **authentic recorded

> trading sessions** — real footage of real sessions. Animation cannot substitute for that and an

> attempt would be a downgrade. The Studio's value on forex is the animation *tier* (pattern,

> chart, formula, the 1-each animation slots) plus adding the mastery gate — not replacing

> footage.

Forex's video section shape (no dedicated TS interface — inline):

{ type: "videoOverview", videoOverview: { videoUrl, title, description } }

2. What the Studio is

A separate pipeline + web app that turns lesson content into **branded, precise, gated

animated clips, and publishes them so any product can consume them without a rebuild**.

The strategic point

Consumers read the manifest at runtime, so publishing a clip is not a rebuild. This inverts

the current model where video is baked into the bundle and 26 slots point at unplayable URLs.

It is the same principle the user already applies everywhere else: *derive from the canonical

source at render time, never embed a stale copy.*

3. Design system requirements

The first pilot clip was rejected on design — correctly. It used generic Tailwind green/red and

manim's default LaTeX serif. The fix is grounding animation in each product's real tokens.

Master B tokens (extracted from masterb-compass/src/index.css + tailwind.config.ts):

Forex / Blue Monkee tokens — PRIMARY TARGET (extracted from /workspace/trade-compass)

A dark variant also exists (background: 224 55% 8%, card: 224 48% 12%,

foreground: 220 40% 95%), so the ideal theme is light-first and dark-capable.

> ⚠️ Critical: forex is light-themed and Master B is dark-themed. An animation styled

> for Master B (black canvas, red/amber accents, Rajdhani) will look wrong on forex. The two

> brands share *no* type or palette — do not reuse a theme across them.

Design implications:

for genuine formulas.

product.

as a .ttf and registered with Pango). Not present by default.

token extraction; do not reuse Master B's theme across brands.

4. Content model sketch

# specs/masterb/m1-l2-candle-anatomy.yaml
product: masterb
lesson: {module: 1, id: 2}
scene: candle_anatomy
params:
  open: 0.30
  close: 1.50
  high: 1.90
  low: -0.50
  labels: [High, Closed, Opened, Low]
  definitions:
    - {text: "Highest price reached", token: chart-green}
    - {text: "Where the period ended", token: foreground}
    - {text: "Where the period started", token: chart-blue}
    - {text: "Lowest price reached", token: chart-red}
beats:
  - {at: 6.5,  hold: 2.6}
  - {at: 12.5, hold: 4.2}
pausePoints:
  - atSeconds: 6.5
    question: "\"Where the period ended\" refers to which point on the candle?"
    options: [Opened, Closed, High, Low]
    correctAnswer: Closed

Rule: reuse the lesson's own quiz questions/options for pause points. Do not invent new

assessments — pull from the existing quiz array wherever possible.

Timing rule: every pause point needs a hold. A gate landing mid-animation gives the learner

nothing to look at while answering. Holds of ~2.5–4 s per gate worked in the pilot.

5. Render pipeline

ai-video-pipeline/references/manim-clinical-animation.md for the verified invocation and the

full pitfall list

On Hostinger/Apache, Range is native — only .htaccess SPA fallback is needed.

6. Integration model

Preferred (and the reason this is worth doing): runtime manifest fetch.

This also repairs the 26 dead slots: they become manifest entries with real MP4 URLs, and their

pausePoints finally become reachable.

A fallback option (less good) is build-time bundling, which reintroduces the rebuild-to-change

problem.

7. Build sequencing

Forex-first. Master B (futures) is an incomplete product — do not let it drive scope.

directions in the forex/Blue Monkee tokens: light canvas, navy 224 84% 34% primary,

cyan 189 100% 45% accent, the chart-* palette, Inter/JetBrains Mono. Get approval.

Reject/iterate before any pipeline work. (Optionally include one dark-variant frame, since

forex ships a dark mode.)

scene end-to-end from a spec file, themed for forex.

animation slots first — these are the animation-shaped content. Wire the runtime integration.

Do not replace the 9 Hank session videos.

8. Already proven (reusable starting points)

9. Constraints and gotchas

or elsewhere. manim renders fine because they run in Docker on the VPS.

animation. Narrative film, photoreal footage, and people belong elsewhere (existing footage

pipeline / NotebookLM). For anything the learner must *manipulate*, React wins — the platform

already has LightweightChart + drawing tools and 4 games.

Re-render at -qh with a large font size before "fixing" anything.

false "missing element" / "low contrast" reports.

resolve the live chunk from index.html before grepping or you will read dead builds.

Master B and is unresolved — held to the end by the user, along with moving Master B to the

Hostinger shared account. See the trade-platform-builder reference for that plan.

10. Open questions to settle at kickoff

whether the runtime integration can use a same-origin path.)

(recommended: store a content hash in the spec and flag drift in the gallery)?

narration timing would then drive the pause points.