▸ drama modals · per-subject engagement during cold start
When latency is unavoidable, we engage through it. The owl appears, says something subject-aware, and a per-domain animation sets context — while Haiku is already drafting the first beat behind the scenes. Five drama styles, one per subject family. Never blank. Never spinner.
▸ The axiom
No click should ever produce a blank screen or a spinner. Every moment of latency is filled with subject-aware story, owl voice, and visual context. The student is being taught from second zero.
0 spinners shown≤ 1.5s to first visual≤ 3s to tutor speaking0 blank screens
▸ physics & nature
Physics · equations cascade
Equations drift down like rain. A small orbit traces overhead. The owl sets up the question.
F = maE = mc²∇·E = ρ/ε₀ψ(x,t)∮B·dlF = -kxp = mv
A trolley accelerates… a vessel of water tilts… let's find out why.
drafting · 1.2s
▸ animation
0–4s: 7 equations cascade top→bottom on different delays. Orbit spins. 1.5s: owl pops in. 2s: bubble types out.
▸ what it's hiding
Haiku call (~1.2s). 3s: Beat 1 ready, board renders, drama dissolves. Beats 2–7 stream in behind.
▸ math & numbers
Math · graph drawing in
A grid materializes, axes appear, then a curve traces itself across the plane while symbols fade in.
∫f(x)dx
Calculus is just slope, taken seriously. Watch this curve.
drafting · 1.4s
▸ animation
0–0.5s: grid + axes fade in. 0.5–3.5s: curve traces itself with stroke-dashoffset. Symbol fades in at 1s.
▸ teaches while loading
The curve is the lesson. Even if the student looks for one second, they've seen something.
▸ history & society
History · parchment unfurls
An aged-paper scroll fades in, slightly rotated. A timeline draws itself across, with markers landing on key dates.
Rome · the long fall
Rome lasted a thousand years. Here's why it ended.
drafting · 1.6s
▸ animation
0–1.5s: parchment fades in tilted. 1.0s: label appears. 1.0–1.8s: timeline + 3 markers land staggered.
▸ tone
Warmer palette than other subjects (gold + coral against ink). Hand-written feel via Crimson Pro italic.
▸ languages
Languages · script & speech
Letters from different scripts drift in the background. Two speech bubbles appear in sequence — left, right — like a real conversation.
A字कñعñя
Hola, ¿cómo estás?
I'm fine, thanks!
Otra vez…
In thirty minutes you'll order coffee in Spanish. Promise.
drafting · 1.3s
▸ animation
0–4s: script letters float gently. 0.4s, 1.2s, 2.0s: three speech bubbles fade in alternating. Mint accents.
▸ teaches while loading
Even before Beat 1, the student has heard "Hola, ¿cómo estás?" and seen multiple scripts. They're already immersed.
▸ curiosity · big questions
Curiosity · question constellation
A giant italic question mark pulses at the center. Smaller question marks twinkle around it, connected by faint lines, like a constellation.
??????
?
Why does coffee spill more than tea? It's about wave length.
drafting · 1.1s
▸ animation
0–2s: small question marks twinkle in staggered. 1s: central giant '?' pulses softly. Coral palette.
▸ tone
Curiosity needs a different temperature — warmer (coral), less academic. The bubble previews the punchline.
The latency budget
What happens in the 3 seconds between click and the first beat rendering. The drama modal is not a polish item; it's load-bearing.
T+0Click registered · drama modal opens instantly · owl appears in the corner · subject animation starts · Haiku call fired in parallel.
T+0.4sOwl speaks · subject-aware copy types into the speech bubble. Student is already engaged with content (the equation cascade · the curve · the parchment).
T+1.5sHaiku response back · plan + Beat 1 stub. Owl transitions: "and to start, look here…" Sonnet/Opus stream begins for beats 2–7.
T+3sBeat 1 renders · drama modal dissolves into the lesson. Tutor's TTS begins narrating with mouth lip-sync. Student feels: "we already started."
T+8–15sBeats 2–7 stream in behind the scenes while student is on Beat 1. By the time they're ready to advance, the next beat is already there. No waiting between beats, ever.