{charging ?

: null} {shown}

); }; /* ---------- the fern ---------- */ type Fr = { a: number; len: number; curl: number; seed: number; tone: number; hero?: boolean }; const FRONDS: Fr[] = [ { a: -84, len: 160, curl: -12, seed: 1, tone: 0.62 }, { a: 82, len: 166, curl: 14, seed: 2, tone: 0.62 }, { a: -58, len: 214, curl: -20, seed: 3, tone: 0.72 }, { a: 58, len: 208, curl: 22, seed: 4, tone: 0.72 }, { a: -34, len: 236, curl: -24, seed: 5, tone: 0.86 }, { a: 33, len: 232, curl: 24, seed: 6, tone: 0.86 }, { a: -11, len: 244, curl: -22, seed: 7, tone: 1 }, { a: 11, len: 250, curl: 34, seed: 8, tone: 1, hero: true }, ]; const fx = (n: number) => n.toFixed(1); /** One frond is a bending spine with paired leaflets. `keep` is the share still attached, `dry` the share gone brown. */ const buildFrond = (f: Fr, a: number, sag: number, keep: number, dry: number) => { const N = 20, dl = f.len / N, side0 = f.a >= 0 ? 1 : -1; let x = 320, y = 250, stem = `M${x} ${y}`, g = '', b = ''; for (let i = 0; i < N; i++) { const s = (i + 1) / N; const th = ((a + f.curl * s + side0 * sag * (0.3 + 0.7 * s * s)) * Math.PI) / 180; x += Math.sin(th) * dl; y -= Math.cos(th) * dl; stem += `L${fx(x)} ${fx(y)}`; const L = f.len * 0.27 * Math.pow(1 - s, 0.62) * Math.min(1, 0.4 + s * 3.4); for (const side of [-1, 1]) { if (hash(f.seed * 97 + i * 2 + side * 3) > keep) continue; const pa = th + side * (1.12 - 0.42 * s); const tx = x + Math.sin(pa) * L, ty = y - Math.cos(pa) * L, mx = x + Math.sin(pa) * L * 0.5, my = y - Math.cos(pa) * L * 0.5, wx = Math.cos(pa) * L * 0.2, wy = Math.sin(pa) * L * 0.2; const seg = `M${fx(x)} ${fx(y)}Q${fx(mx + wx)} ${fx(my + wy)} ${fx(tx)} ${fx(ty)}Q${fx(mx - wx)} ${fx(my - wy)} ${fx(x)} ${fx(y)}Z`; if (hash(f.seed * 53 + i * 5 + side) < dry * (0.45 + s * 0.9)) b += seg; else g += seg; } } return { stem, g, b, x, y }; }; const keepAt = (t: number) => 0.97 - 0.08 * ramp(t, E('crunchy'), E('crunchy') + 0.2) - 0.13 * ramp(t, E('forty'), E('forty') + 0.3) - 0.15 * ramp(t, E('thirty'), E('thirty') + 0.3) - 0.2 * ramp(t, E('twelve'), E('twelve') + 0.4) - 0.05 * ramp(t, E('frond'), E('frond') + 0.3) + 0.42 * ramp(t, E('moved'), E('discharge') + 1.5); const dryAt = (t: number) => lerp(lerp(0.2, 0.62, ramp(t, E('crunchy') - 0.05, E('crunchy') + 0.15)), 0.04, ramp(t, E('pour') + 1.4, E('light') + 0.5)); const sagAt = (t: number) => lerp(30 * ramp(t, E('falling'), E('low')) + 26 * ramp(t, E('low'), E('low') + 2.2), 0, easeInOut(ramp(t, E('pour') + 1.2, E('light') + 0.4))); const heroSagAt = (t: number) => { const fall = t >= E('frond') ? 58 * back(ramp(t, E('frond'), E('frond') + 0.28)) : 0; return lerp(fall + 112 * easeInOut(ramp(t, E('low') + 0.2, E('low') + 2.5)), 0, easeInOut(ramp(t, E('stable'), E('light') + 0.6))); }; const Fern: React.FC = () => { const t = useT(); const keep = keepAt(t), dry = dryAt(t), sag = sagAt(t); const alarm = t >= E('losing') && t < E('low') ? 1 : 0; const knock = (at: number, n: number) => (t >= at ? Math.exp(-(t - at) * 8) * Math.sin((t - at) * 40) * n : 0); const crack = knock(E('crunchy'), 3) + knock(0.95, 3.4); const leaf = tint('#3f8a38', '#58b53c', sunAt(t)), brown = '#a2803c'; const clipTip = { x: 0, y: 0 }; const paths = FRONDS.map((f) => { const a = f.a + Math.sin(t * 0.9 + f.seed) * 1.3 + alarm * Math.sin(t * 37 + f.seed) * 1.7 + crack; const r = buildFrond(f, a, f.hero ? heroSagAt(t) + sag * 0.3 : sag, keep, dry); if (f.seed === 6) { clipTip.x = r.x; clipTip.y = r.y; } return { f, r }; }); return ( {paths.map(({ f, r }) => ( ))} {/* the sensor clipped to a frond, wired off camera */} ); }; /* Every leaf that falls stays where it lands until the bed moves. */ const SHED = ([['crunchy', 2], ['recently', 2], ['forty', 4], ['thirty', 5], ['twelve', 8], ['frond', 4], ['march', 1]] as [string, number][]).flatMap(([e, n], k) => Array.from({ length: n }, (_, i) => { const h = (m: number) => hash(k * 31 + i * 7 + m); return { at: E(e) + i * 0.06, x: 320 + (h(1) - 0.5) * 300, y: 50 + h(2) * 150, lx: 188 + h(3) * 268, ly: 378 + h(4) * 62, r: h(5) * 360, s: 1.1 + h(6) * 0.9, d: e === 'march' ? 2.1 : 0.85 + h(7) * 0.6 }; })); const FallingLeaves: React.FC = () => { const t = useT(); const gone = 1 - ramp(t, E('moved'), E('moved') + 0.4); return ( {SHED.map((l, i) => { if (t < l.at) return null; const k = ramp(t, l.at, l.at + l.d); const x = lerp(l.x, l.lx, k) + Math.sin(k * 7 + i) * 26 * (1 - k), y = lerp(l.y, l.ly, k * k * (3 - 2 * k)); return ; })} ); }; /** While the shoot unrolls the room falls back behind it, so the one bright thing on screen is the new leaf. */ const ShootSpot: React.FC = () => { const t = useT(); const k = ramp(t, E('pour') + 0.5, E('pour') + 1.2) * (1 - ramp(t, E('stable') - 0.3, E('stable') + 0.3)); return k > 0 ? : null; }; /** The fiddlehead: a real fern's new leaf arrives coiled, and it unrolls. */ const Shoot: React.FC = () => { const t = useT(); const g = easeOut(ramp(t, E('pour') + 0.45, E('pour') + 2.0)); if (g <= 0) return null; const u = easeInOut(ramp(t, E('pour') + 0.95, E('stable') + 0.25)); const N = 46, dl = (186 * g) / N; let x = 322, y = 250; const pts: { x: number; y: number; s: number; th: number }[] = [{ x, y, s: 0, th: 0 }]; for (let i = 0; i < N; i++) { const s = (i + 1) / N; const th = (-17 + 22 * s) * (Math.PI / 180) + (1 - u) * Math.pow(s, 3) * Math.PI * 3.6; x += Math.sin(th) * dl; y -= Math.cos(th) * dl; pts.push({ x, y, s, th }); } const line = pts.map((p, i) => `${i ? 'L' : 'M'}${fx(p.x)} ${fx(p.y)}`).join(''); const sprout = ramp(u, 0.45, 1); return ( {pts.slice(1).map((p, i) => 0.72 && u < 0.9 ? '#d2ff6e' : '#8df25a'} strokeWidth={lerp(13, 5, p.s)} />)} {sprout > 0 ? pts.filter((_, i) => i % 4 === 2 && i > 6).flatMap((p, i) => [-1, 1].map((sd) => { const L = 40 * Math.pow(1 - p.s, 0.5) * sprout, pa = p.th + sd * 1.1; const tx = p.x + Math.sin(pa) * L, ty = p.y - Math.cos(pa) * L, wx = Math.cos(pa) * L * 0.22, wy = Math.sin(pa) * L * 0.22, mx = (p.x + tx) / 2, my = (p.y + ty) / 2; return ; })) : null} ); }; /* ---------- the watering can, and the nurse's hand that brings it ---------- */ const canPose = (t: number) => { const slide = easeOut(ramp(t, E('get'), E('can') + 0.05)); const lift = easeInOut(ramp(t, E('charging'), E('charging') + 0.55)); const tilt = easeOut(ramp(t, E('pour') - 0.1, E('pour') + 0.32)) * (1 - easeInOut(ramp(t, E('stable') - 0.45, E('stable')))); const out = easeIn(ramp(t, E('stable') - 0.1, E('stable') + 0.5)); return { cx: lerp(860, 500, slide) + out * 440, cy: 216 - lift * 46 + Math.sin(t * 34) * ramp(t, E('charging'), E('saucer')) * (t < E('pour') ? 1.2 : 0), rot: -26 * tilt, tilt }; }; const Can: React.FC = () => { const t = useT(); if (t < E('get') || t > E('stable') + 0.7) return null; const { cx, cy, rot } = canPose(t); const glow = ramp(t, E('charging'), E('saucer') + 0.45) * (t < E('pour') + 0.3 ? 1 : 0); return ( {glow > 0 ? : null} {/* the sleeve runs off camera, and the glove grips the handle */} {[0, 1, 2, 3].map((i) => )} ); }; const Water: React.FC = () => { const t = useT(); const a = E('pour') + 0.14, b = E('stable') - 0.35; if (t < a || t > b + 0.5) return null; const { cx, cy, rot } = canPose(t); const r = (rot * Math.PI) / 180, rx = -136, ry = -66; const sx = cx + rx * Math.cos(r) - ry * Math.sin(r), sy = cy + rx * Math.sin(r) + ry * Math.cos(r); return ( {Array.from({ length: 64 }, (_, i) => { const k = (t * 2.6 + hash(i)) % 1; const born = t - k / 2.6; if (born < a || born > b) return null; const spread = 26 + (hash(i + 40) - 0.5) * 66; return ; })} {Array.from({ length: 14 }, (_, i) => { const k = (t * 3.4 + hash(i + 90)) % 1; const dir = (hash(i + 110) - 0.5) * 2; return ; })} ); }; /* ---------- the window: the bed camera ---------- */ const VW = 640, VH = 470; const zoom = (s: number, x: number, y: number) => ({ s, tx: x * (1 - s), ty: y * (1 - s) }); const KEYS: { at: number; d: number; v: ReturnType }[] = [ { at: E('on'), d: 0.01, v: zoom(1.1, 320, 220) }, { at: E('on'), d: 2.8, v: zoom(1, 320, 235) }, { at: E('crunchy') - 0.1, d: 0.22, v: zoom(1.3, 320, 110) }, { at: E('last') - 0.05, d: 0.42, v: zoom(2.5, 17, 12) }, { at: E('owner') - 0.05, d: 0.5, v: zoom(1, 320, 235) }, { at: E('falling'), d: 2.6, v: zoom(1.18, 320, 200) }, { at: E('losing'), d: 0.2, v: zoom(1.32, 320, 210) }, { at: E('low'), d: 2.2, v: zoom(1.16, 330, 225) }, { at: E('get'), d: 0.8, v: zoom(1, 320, 235) }, { at: E('pour'), d: 0.5, v: zoom(1.16, 370, 200) }, { at: E('pour') + 0.85, d: 1.1, v: zoom(2.05, 322, 150) }, { at: E('stable') - 0.1, d: 0.8, v: zoom(1, 320, 235) }, { at: E('discharge'), d: 4, v: zoom(1.07, 320, 300) }, ]; const camAt = (t: number) => { let v = KEYS[0].v; for (const k of KEYS.slice(1)) { if (t < k.at) break; const q = easeInOut(ramp(t, k.at, k.at + k.d)); v = { s: lerp(v.s, k.v.s, q), tx: lerp(v.tx, k.v.tx, q), ty: lerp(v.ty, k.v.ty, q) }; } return v; }; const panAt = (t: number) => -600 * easeInOut(ramp(t, E('moved') - 0.05, E('moved') + 1.25)); /** The room is wider than the shot: the ward on the left, the bright window on the right. Moving the patient is one long pan. */ const Room: React.FC = () => { const t = useT(); const sun = sunAt(t); const march = t >= E('march') ? Math.min(1, ramp(t, E('march'), E('march') + 0.2)) : 0; return (

{MONTH}

); }; const Bed: React.FC = () => { const t = useT(); const pan = ramp(t, E('moved') - 0.05, E('moved') + 1.25); const jolt = pan > 0 && pan < 1 ? Math.sin(t * 42) * 1.4 : 0; const breath = flatAt(t) ? 0 : Math.sin(t * 2.1) * 2.4; const wet = ramp(t, E('pour') + 0.25, E('pour') + 1.3); const folded = easeInOut(ramp(t, E('discharge'), E('discharge') + 0.8)); const ring = ramp(t, E('stand'), E('stand') + 0.15) * (1 - ramp(t, E('pour') + 0.2, E('pour') + 0.5)); const bag = ramp(t, E('pour') + 0.3, E('stable')); const spiderY = lerp(lerp(64, 118, easeInOut(ramp(t, E('last') + 0.2, E('owner')))), 50, ramp(t, E('pour'), E('pour') + 0.5)); return ( ); }; /* Words inside the shot move with the camera, so they stay HTML in the same wrapper. */ const BedLabels: React.FC = () => { const t = useT(); const ring = ramp(t, E('stand'), E('stand') + 0.15) * (1 - ramp(t, E('pour') + 0.2, E('pour') + 0.5)); const sign = back(ramp(t, E('stop'), E('stop') + 0.24)); const sway = Math.sin((t - E('stop')) * 5) * Math.exp(-(t - E('stop')) * 1.4) * 7; return ( <>

{BAND}

{BAG}

{ring > 0 ?

{CLEAR}

: null} {t >= E('stop') ?

{DISCHARGE.sign}

: null} ); }; const Window: React.FC = () => { const t = useT(); const c = camAt(t); const dim = dimAt(t), red = redAt(t), sun = sunAt(t); const shake = t >= E('losing') && t < E('low') ? Math.sin(t * 57) * 3 : 0; return (

{/* the admission: the whole bed rolls into shot on the first frame */}

{red > 0 ?

: null} {sun > 0 ?

: null} {dim > 0 ?

: null}

{CAM}

); }; /* ---------- the monitor ---------- */ const beatGlow = (t: number) => (flatAt(t) ? 0 : 1 - ramp(t - BEATS[beatIndex(t)], 0.2, 0.42)); const Header: React.FC = () => { const t = useT(); const k = beatGlow(t); const clock = 42 + Math.floor((t + 7) / 60); const sec = Math.floor(t + 7) % 60; return ( <>

{PATIENT}{AGE}

{WARD}
{BED} 11:{clock}:{String(sec).padStart(2, '0')}

{TICKER.repeat(4)}

); }; const TraceLabels: React.FC = () => { const t = useT(); const off = flatAt(t); const bpm = Math.round(bpmAt(t) + env(t) * 12 + (t >= E('losing') && t < E('low') ? hash(Math.floor(t * 5)) * 12 : 0)); return ( <>

{TRACES[0]}

{off ? '---' : bpm}

{TRACES[1]}

); }; const Monitor: React.FC = () => { const t = useT(); const boot = ramp(t, 0, 0.4); const scan = t < 0.75 ? 48 + ramp(t, 0, 0.7) * 962 : -100; const red = redAt(t); const bar = red > 0 ? RED : t >= E('falling') && t < E('losing') ? AMBER : flatAt(t) && t < E('can') ? '#3a2226' : GREEN; const jolt = t >= E('losing') && t < E('low') ? Math.sin(t * 61) * 1.4 : 0; return (

0 ? 0.35 + 0.65 * red : 0.85 }} />

{[858, 906, 954, 1002].map((y) =>

)}

{/* the glass */}

{/* the lower bezel: the name, the sticker, the printer slot */}

{MODEL}

{STICKER}

); }; /* ---------- the chart ---------- */ const Scrawl: React.FC<{ at: number; d?: number; style: React.CSSProperties; children: React.ReactNode }> = ({ at, d = 0.35, style, children }) => { const t = useT(); if (t < at) return null; const k = ramp(t, at, at + d); return

= 1 ? '-30%' : `${(1 - k) * 100}%`} -30% -5%)`, ...style }}>{children}

; }; const Stroke: React.FC<{ d: string; at: number; dur: number; color?: string; width: number }> = ({ d, at, dur, color = PEN, width }) => { const t = useT(); if (t < at) return null; return ; }; const Printed: React.FC<{ x: number; y: number; children: React.ReactNode }> = ({ x, y, children }) =>

{children}

; const Chart: React.FC = () => { const t = useT(); const paper = tint('#fbfbf7', '#fffaeb', sunAt(t)); return ( <>

{/* the form above the notes covers the ruling */}

{CHART.head.map(([l, v, e, x, w]) => ( {l} {v} ))} {CHART.rows.map(([l, lx, v, vx, e, y, c]) => ( {l} {v} ))} {CHART.follow} {OLD_NOTES.map((n, i) =>

{n}

)} ); }; const FollowUp: React.FC = () => {CHART.last}; const Clip: React.FC = () => (

); /** The discharge notes feed down out of the slot, a line at a time, and get torn off for the last line of the chart. */ const Sheet: React.FC = () => { const t = useT(); const at = E('discharge') - 0.04; if (t < at) return null; const fall = ramp(t, E('cta') - 0.05, E('cta') + 0.4); if (fall >= 1) return null; const feed = 72 * easeOut(ramp(t, at, at + 0.3)) + 90 * easeOut(ramp(t, E('weekly') - 0.3, E('weekly'))) + 102 * easeOut(ramp(t, E('stop'), E('stop') + 0.3)); const h = Math.floor(feed / 6) * 6; return (

{DISCHARGE.head}

{DISCHARGE.one}

{DISCHARGE.two}

); }; /* ---------- captions: the doctor's handwriting, in the chart's ruled lines ---------- */ const PER_ROW = 28; const CHUNKS = buildChunks(PER_ROW, 2); const CAP_ROWS = [1318, 1400]; const Captions: React.FC = () => { const t = useT(); if (t >= E('pour') && t < E('stable') - 0.45) { if (t < E('shoot')) return null; const k = back(ramp(t, E('shoot'), E('shoot') + 0.22)); return ( <>

{SHOUT}

); } const idx = CHUNKS.reduce((a, c, i) => (t >= c.t0 - 0.06 ? i : a), -1); if (idx < 0) return null; const c = CHUNKS[idx]; const live = c.words.findIndex((w) => t >= w.t0 - 0.03 && t < w.t1 + 0.08); const dim = dimAt(t); return ( <> {c.rows.map((r, ri) => { const ids = Array.from(new Set(r.map.filter((i) => i >= 0))); return (

{ids.map((wi) => { const w = c.words[wi]; const said = t >= w.t0 - 0.03; const hot = wi === live || (t >= E('cta') && w.w.toUpperCase().replace(/[^A-Z]/g, '') === KEYWORD); return {w.w.replace(/[.,;:!?"]$/, '')}; })}

); })} ); }; /* ---------- the film ---------- */ export const Vitals: React.FC = () => ( ); const Light: React.FC = () => { const t = useT(); const d = dimAt(t), r = redAt(t), s = sunAt(t); return ( <> {r > 0 ? : null} {/* the sun lands on the paper; a screen makes its own light, so it never washes over the monitor */} {s > 0 ?

: null} {d > 0 ? : null} ); }; const Stage: React.FC = () => { const t = useT(); return ( {/* these three carry the film through the dark, so they sit above the room's light */} ); }; ``` ## 8. Voice (optional) A voice is worth adding when the world has a speaker of its own, because the deadpan delivery is half the joke. Skip it for a sound-off post, or when the user would rather not have one: the film still works. **The persona:** a tired on-call doctor reading a chart aloud, low, flat and unhurried, on the fourth fern of the shift. Never in on the joke. Dry when the news is bad, and only a little quicker when it's urgent. It must sound like someone who has done this many times and is not going to smile now. **When to use it:** on every line except the silence. Read the history as routine, with a very slight pause around "quote". Let "Forty. Thirty-one. Twelve." fall in pitch, each a little lower. "We're losing a frond" and "Get the watering can" are the only two lines with any urgency in them, and it should be small, as if a raised voice would be unprofessional. Slow right down on "Time of last new leaf: March", and leave the smallest gap before the month. Say "Charging" like a single clipped order. "Stop telling it about work" is pure advice from one tired person to another: don't sell it. Treat the voice as a small tiled room, with a very short echo and a little warmth around 170 Hz. Compress before the room. - **Never clone or imitate a real person.** Audition 3 or 4 voices on two lines of the script and let the user pick, or use the user's own voice. - **One take per line,** with word timestamps. Pass the neighboring lines as context if your provider allows it, so the delivery flows. Trim each take to its speech, and tighten any pause inside it longer than 0.5 s. - **Listen for your call to action.** Keywords blur easily. Commas around one in the spoken text ("Comment, gate, and...") usually fix it. Check the final mix with Whisper, line by line. - **With no voice.** Keep the estimated timings as the clock. If there's music, put the captions on its grid. Raise the effects and the music: they carry the film now. Make sure the words stay on screen long enough to read, about 0.3 s a word. The estimate runs close to that, so add `tail` after a line that feels rushed. ## 9. Sound The picture tells the story without sound, so a film can ship silent. Sound is what makes each change land, though, so add it unless the user says not to. This section says what to use and when it plays. Add it after the user approves the animatic. **Effects: make a set for this world.** Generate them with the sound-effects tool the user chose, or pick from a licensed library. Prompt the thing itself, and keep it warm, never bright or harsh. | Sound | Length | Prompt idea | When it plays | |-------|--------|-------------|---------------| | ward air | 12 s | the air of a quiet hospital ward at midday, soft ventilation, a far corridor, no voices, no music | the bed, all the way through, and it never stops | | monitor beep | 0.3 s | one soft bedside monitor beep, a small round tone at middle pitch, dry and close, not piercing | on every beat in `BEATS`, quietly, so it speeds up on its own when `bpmAt` does, and stops when the trace goes flat | | alarm | 2 s | a bedside monitor's warning chime, three soft falling tones on a loop, urgent but warm, not shrill | from `losing` to `low` | | steady tone | 8 s | a single steady monitor tone, one soft held note with no wobble, low and quiet | from `low` to `pour`. This is the designed sound that keeps the low point alive, so duck it only a little under the voice | | bed wheels | 1.2 s | a small hospital bed on rubber casters rolled across a tile floor, then a soft bump as it stops | the first frame, and `moved` | | pen | 0.8 s | a ballpoint pen writing a few quick words on paper on a clipboard, close and dry | every chart note: `fern`, `three`, `sill`, `roommate`, `crunchy`, `unclear`, `recently`, and the last line just after `cta` | | underline | 0.4 s | two hard quick pen strokes on paper | 0.3 s after `recently` | | crunch | 0.4 s | a dry fern leaf crushed between two fingers, small, brittle, very close | `crunchy` | | digit drop | 0.2 s | one small mechanical counter click, plastic and dry | `forty`, `thirty`, `twelve`, and softly on `shoot` and `this` | | leaf fall | 0.7 s | a single dry leaf landing on a cotton blanket, a tiny papery rustle | under each digit drop, and alone on `march` as the last leaf lands | | frond snap | 0.5 s | a dry green stem bending and giving way, a small soft crack | `frond` | | droop | 2 s | a thin stem slowly bending under its own weight, a very quiet creak | from 0.2 s after `low` | | can slide | 0.9 s | a metal watering can pushed along a laminate table, a short scrape with water sloshing inside, and a soft stop | from `get`, stopping on `can` | | charging whine | 2.4 s | a soft rising electronic whine, like an old camera flash getting ready, warm, ending in a small click | from `charging`, with the click about 0.45 s after `saucer` | | water | 3.5 s | water from a watering can falling on dry soil, a steady soft patter, close, then soaking in | from `pour` to just before `stable` | | first beat | 0.8 s | one low warm thump, felt more than heard, like a heartbeat through a mattress, with no ring | 0.38 s after `pour`, when the trace jumps. It's the biggest sound in the film | | printer | 2.6 s | a small thermal printer feeding paper, a soft buzz in short bursts | from `discharge` to `work` | | paper tear | 0.5 s | a strip of thermal paper torn off cleanly against a metal edge | `cta` | | birds | 8 s | a sunny day heard through a window that's a little open, a few distant birds, soft | from `light` to the end, and quiet | - **Place a sound on every visible change,** at the same event the picture uses, so a re-voice moves both. - **Beds run under everything:** a world without room tone feels empty, and room tone is what keeps the low point alive. - **The same sound twice within 80 ms:** keep the louder one. - **Warm, never bright:** low-pass effects to about 1.5-3.5 kHz if they bite. **Music: one instrumental bed.** Describe the sound, never an artist. Generators ignore requested timestamps, so fit the track instead: find its real downbeats from bar-to-bar energy jumps, pick the bar where it lifts, place that bar on the story's turn, and stretch (keeping the pitch, within about 4 %) so a second downbeat lands on the voiceless moment. **The brief:** "Deadpan hospital drama underscore: soft felt piano repeating two patient notes over a low warm synth pad, a very slow brushed pulse like a resting heartbeat, tense in a small domestic way for a long stretch, then a warm string swell and a hopeful piano figure that opens up, ending resolved, no vocals." **When it plays:** low and steady under the admission and the history. It tightens under "Leaf count falling", and it should feel like too much music for a fern. It drains to nothing over 0.7 s from `low`, and stays out through "March" and "Get the watering", so only the ward air and the steady tone remain. It comes back low on `can`, holds a tense note under the charging, and reaches its fullest on the voiceless moment, on a bar where the track opens up, with a second downbeat on `shoot` if you can fit one. It settles under "Patient stable", stays warm and low through the discharge notes, and ends resolved under the call to action. **Mix, voice first.** - **Voice:** compress lightly so consonants stay off the limiter, about -14 LUFS. - **Music:** about 16 to 20 LU under the voice while it speaks, lifted in gaps and on the voiceless moment. - **Effects:** 7 to 10 LU under the voice overall, ducked about 6 dB under speech, so nothing masks a word. - **Master:** -14 LUFS integrated, sample-peak ceiling about -2.4 dBFS. AAC encoding adds about 0.8 dB, so check the true peak of the final file. Give the master a 10 ms fade-in, or every view opens on a click. ## 10. Render and QA 1. **Render** without audio. Mux your mix onto it, trimmed to the exact length (`-t`, never `-shortest`), as H.264 at high quality with AAC 320k and `+faststart`. 2. **Sync and length:** the frame count matches the clock, and a cross-correlation of the muxed audio against your mix shows an offset of 0 ms. 3. **Contact sheets:** one frame per second with the safe box drawn. Look at every sheet: nothing cut off, nothing important outside the box, no empty or black frames, and the time of day and the story still agree. 4. **Determinism:** render about 10 spread frames twice with `npx remotion still src/index.ts Film-9x16 out/a.png --frame=N`, and compare each pair with `cmp`; they should match. 5. **Loudness:** -14 LUFS integrated, true peak at or below -1 dBTP. 6. **Words:** transcribe the mix line by line with Whisper. A difference on a plain word is a masked or swallowed word. 7. **Gaps and stills:** no voice gap over 1.0 s outside the voiceless moment (`clock.mjs` warns about these), and no still stretch over 1.2 s or black stretch (`ffmpeg -i out/silent.mp4 -vf "freezedetect=n=0.001:d=1.2,blackdetect=d=0.1" -an -f null -` prints any). A small moving corner can hide a freeze from that check, so trust the contact sheets over it. For a silent film, skip the checks that need audio (the offset in 2, and 5 and 6) and use `out/silent.mp4` as the final file. ## 11. Traps - **A joke that stops being one:** this is the frame's main trap. No real conditions, doses, treatments or hospitals, nothing a worried person could take as advice, and no real person or pet as the patient. If the topic is someone's real health, don't use this frame. - **A wink:** on-screen jokes are fine, but the voice can't play along. If the doctor sounds amused, the film stops being funny. - **A low point that reads as a frozen frame:** the numbers read `--` and the trace is flat by design, so the sweep, the drooping frond, the slow push-in, the ticker and the clock's seconds have to carry the movement. Watch it, because a contact sheet won't show this. - **A black low point:** the room dims, but the flat line, the banner and the captions sit above the dark. Keep them there, and it's never black. - **A sun that washes out the screen:** a bright overlay across the whole frame turns the monitor's black to olive. Tint the wall, the paper and the bezel instead, as `Stage`, `Chart` and `Monitor` do. - **A trace too tall:** a normal beat should just reach the bottom of the window, so the jump after the pour can break out of its row and mean something. Keep the `scale` on `Trace` in `Stage` where it is. - **Reading the numbers against the picture:** the big number counts what the story says, not what's drawn. Keep the fronds thinning as it falls, and don't try to make them match. - **Ghost words look like an error on a contact sheet:** words not yet spoken are faint pencil, on purpose. Watch the video to check that each one lands in time. - **Words crowded into the form:** handwriting over printed labels gets hard to read fast. Each chart value should be one or two words. | Symptom | Fix | |---------|-----| | A few random frames show text at the wrong size | moving text as HTML, not SVG ``, under per-frame transforms | | A shape keeps a style from an earlier frame | a negative CSS length was rejected: clamp at 0 | | A render dies on a font timeout | take `delayRender` inside React, as `core.tsx` does, never at module level | | Sound drifts against the picture | mux your own mix with `-t` and check the offset by cross-correlation | | The music's lift lands late | fit by real downbeats; do not trust requested timestamps | | Two renders of a frame differ slightly along a panel's edge | a large blurred `box-shadow` isn't exactly repeatable: use a shadow with no blur on big panels | | A caption breaks after "a.m." | The caption chunker (`buildChunks`, or the frame's own if it has one) ends a chunk at any word ending in a full stop: write "am" in `text`, or break the chunks yourself | ## 12. Deliver The MP4, a cover frame and a ready-to-paste caption. For organic posts the caption repeats the comment keyword and carries no link.