); /* ---------- the border vine: one long stem around the page, and everything on it appears as the growth passes ---------- */ const rim = (u: number) => { const W = 1000, H = 1840; let d = u * 2 * (W + H); if (d < W) return { x: 40 + d, y: 40, nx: 0, ny: 1 }; d -= W; if (d < H) return { x: 1040, y: 40 + d, nx: -1, ny: 0 }; d -= H; if (d < W) return { x: 1040 - d, y: 1880, nx: 0, ny: -1 }; d -= W; return { x: 40, y: 1880 - d, nx: 1, ny: 0 }; }; const stem = (ph: number) => Array.from({ length: 760 }, (_, i) => { const r = rim(i / 759), w = 16 + 13 * Math.sin((i / 759) * 150 + ph); return `${i ? 'L' : 'M'}${(r.x + r.nx * w).toFixed(1)} ${(r.y + r.ny * w).toFixed(1)}`; }).join(''); const STEMS = [stem(0), stem(Math.PI)]; const LEAF = 'M0 0C5 -11 15 -12 22 -19C23 -10 29 -5 36 0C29 5 23 10 22 19C15 12 5 11 0 0Z'; const SPRIGS = Array.from({ length: 150 }, (_, i) => { const u = (i + 0.5) / 150, r = rim(u), ph = hash(i * 5 + 1), w = 16 + 13 * Math.sin(u * 150 + (i % 2) * Math.PI); return { u, x: r.x + r.nx * w, y: r.y + r.ny * w, rot: (Math.atan2(r.ny, r.nx) * 180) / Math.PI + (ph - 0.5) * 110 + (i % 2 ? 180 : 0), kind: i % 3 === 2 ? 'bezant' : i % 7 === 3 ? 'flower' : 'leaf', c: i % 14 === 3 ? VERM : LAPIS }; }); const vineK = (t: number) => track(t, [0, 0.9, E('low'), E('quiet'), E('quiet') + 2.9], [0.012, 0.05, 0.3, 0.3, 1]); const Vine: React.FC = () => { const t = useT(); const k = vineK(t), g = goldC(t, 0.2); return ( ); }; /* ---------- the miniature: a gilded arch, and each hour paints a new scene in it ---------- */ const AW = 624, AH = 655, MX = 96, MY = 195; const ARCH = `M0 ${AH}L0 270Q0 66 ${AW / 2} 0Q${AW} 66 ${AW} 270L${AW} ${AH}Z`; const Diaper: React.FC<{ id: string; bg: string; line: string; dot: string; size?: number }> = ({ id, bg, line, dot, size = 52 }) => ( <> ); const Checker: React.FC<{ id: string; y: number; a: string; b: string }> = ({ id, y, a, b }) => ( <> ); const Face: React.FC<{ open: number; smile: number }> = ({ open, smile }) => ( {open > 0.05 ? <> : <>} ); const Moon: React.FC<{ x: number; y: number; r: number; open: number }> = ({ x, y, r, open }) => ( ); const Sun: React.FC<{ y: number; t: number; g: string }> = ({ y, t, g }) => ( {Array.from({ length: 18 }, (_, i) => )} ); const HOUSES: [number, number, number][] = [[40, 66, 62], [196, 72, 92], [268, 60, 60], [330, 74, 128], [408, 60, 70], [470, 66, 104], [530, 60, 62]]; /** Night at the start; at the voiceless moment the same town gets its sunrise. */ const Town: React.FC = () => { const t = useT(); const q = E('quiet'); const day = ramp(t, q, q + 1.5), rise = easeOut(ramp(t, q - 0.1, q + 2.7)); const sky = interpolateColors(day, [0, 0.45, 1], [LAPIS, '#9a4a3a', '#e6c261']); const g = goldC(t, 0.05); const hill = interpolateColors(day, [0, 1], ['#1c463d', '#4f9a7c']), hill2 = interpolateColors(day, [0, 1], ['#163a33', VERD]); const wall = interpolateColors(day, [0, 1], ['#59627f', '#efe3c9']); const set = ramp(t, q, q + 1.2); const peek = easeOut(ramp(t, E('returns'), E('returns') + 1.1)); const mx = t < q + 1.2 ? 396 - set * 40 : 112, my = t < q + 1.2 ? 196 + (1 - easeOut(ramp(t, 0, 3))) * 170 + Math.sin(t * 0.8) * 5 + set * 330 : 500 - peek * 136; const toll = t >= q && t < E('explicit') ? Math.sin((t - q) * 4.2) * 24 * Math.exp(-(t - q) * 0.25) : 0; return ( ); }; /** The first hour: a horn comes through the wall, and the blanket wins. */ const BedRoom: React.FC = () => { const t = useT(); const h = E('horn'), r = E('rise'); const inK = easeOut(ramp(t, h - 0.3, h - 0.02)); const blast = t >= h ? Math.exp(-(t - h) * 0.9) : 0; const under = easeInOut(ramp(t, r - 0.2, r + 0.4)); const quake = t >= h && t < h + 0.8 ? Math.sin((t - h) * 50) * 4 * (1 - (t - h) / 0.8) : 0; const hump = 66 - under * 22 + Math.sin(t * 2.6) * 5 * (1 - under * 0.6); const g = goldC(t); return ( ); }; /** The second hour: the great meeting. Everyone rises for the wrong word and drops when it is scraped off. */ const TEAM: { x: number; c: string; lean: number; mark: string }[] = [ { x: 72, c: VERM, lean: -1, mark: 'M-22 0L0 24L22 0L22 12L0 36L-22 12Z' }, { x: 192, c: VERD, lean: 1, mark: 'M-26 -10H26V6H-26Z' }, { x: 312, c: LAPIS, lean: -1, mark: 'M0 -14L16 8L0 30L-16 8Z' }, { x: 432, c: '#6b4524', lean: 1, mark: 'M-8 -14H8V34H-8Z' }, { x: 552, c: '#7a3a6a', lean: -1, mark: 'M-20 -10A9 9 0 1 0 -20 -9ZM20 -10A9 9 0 1 0 20 -9ZM0 16A9 9 0 1 0 0 17Z' }, ]; const Hall: React.FC = () => { const t = useT(); const hope = easeOut(ramp(t, E('friday') - 0.05, E('friday') + 0.2)) * (1 - easeIn(ramp(t, E('scrape'), E('scrape') + 0.16))); const g = goldC(t); const sand = ramp(t, E('forth'), E('low')); return ( <>

{AGENDA}

); }; /* The inbox: a heap of scrolls that grows, keeps arriving in the dark, then starts going the other way, one at a time. */ const TAKES = [0, 0.95, 1.8, 2.5, 3.2, 3.9].map((d) => E('small') + 0.1 + d); const SCROLLS = (() => { const out: { x: number; y: number; r: number }[] = []; [5, 5, 4, 4, 4, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1].forEach((n, row) => { for (let c = 0; c < n; c++) out.push({ x: 448 - row * 6 + (c - (n - 1) / 2) * 76 + (hash(row * 9 + c) - 0.5) * 10, y: 536 - row * 26, r: (hash(row * 5 + c * 3) - 0.5) * 7 }); }); return out; })(); const pileAt = (t: number) => track(t, [E('low'), E('noend'), E('small')], [11, 42, 54]) - 3 * TAKES.filter((x) => t >= x).length; const ScrollG: React.FC<{ x: number; y: number; r: number }> = ({ x, y, r }) => ( ); const Scriptorium: React.FC = () => { const t = useT(); const g = goldC(t); const n = pileAt(t), whole = Math.floor(n), frac = n - whole; const droop = ramp(t, E('inbox'), E('noend') + 0.3) * (1 - easeOut(ramp(t, E('small'), E('small') + 0.4))); const write = Math.sin(t * 13) * 3 * (1 - droop); const book = ramp(t, E('books') - 0.1, E('books') + 0.3) * (1 - ramp(t, E('small') + 0.2, E('small') + 0.9)); const done = TAKES.filter((x) => t >= x + 0.45).length; const flying = TAKES.find((x) => t >= x && t < x + 0.45); return ( <>

inbox

done

); }; const brushEdge = (k: number, seed: number) => { if (k >= 1) return undefined; const pts = Array.from({ length: 15 }, (_, i) => `${(k * 118 - 9 + (hash(i * 3 + seed) - 0.5) * 16).toFixed(1)}% ${(i / 14) * 100}%`); return `polygon(0 0,${pts.join(',')},0 100%)`; }; const SCENES: [string, React.FC][] = [['on', Town], ['first', BedRoom], ['second', Hall], ['low', Scriptorium], ['quiet', Town]]; const Miniature: React.FC = () => { const t = useT(); let i = 0; SCENES.forEach(([e], k) => { if (t >= E(e)) i = k; }); const k = ramp(t, E(SCENES[i][0]), E(SCENES[i][0]) + 0.42); const Now = SCENES[i][1], Prev = i > 0 && k < 1 ? SCENES[i - 1][1] : null; const g = goldC(t), draw = easeOut(ramp(t, 0, 1.3)); return ( <>

{Prev && i !== 0 ? : null}

); }; /* ---------- the candle ---------- */ const DRIPS: [number, number, number][] = [[-20, 410, 34], [18, 505, 26], [-14, 610, 40], [21, 690, 22], [-21, 742, 18]]; const Candle: React.FC = () => { const t = useT(); const y = flameY(t), g = goldC(t, 0.1); let now = -1; RINGS.forEach(([ry], i) => { if (y >= ry - 2) now = i; }); return ( <> {RINGS.map(([ry, label], i) =>

{label}

)} ); }; /* The flame draws above the dark, so it still reads when the page has gone. */ const Flame: React.FC = () => { const t = useT(); const y = flameY(t), lit = litAt(t); const sway = flicker(t) * 5 * lit + (ramp(t, E('candle') - 0.1, E('fails')) * (1 - ramp(t, E('fails') + 0.95, E('small')))) * 8; const h = 72 * lit * (1 + 0.1 * flicker(t * 1.3)); const smoke = ramp(t, E('fails') + 0.7, E('fails') + 1.1) * (1 - ramp(t, E('small') - 0.3, E('small'))); const spark = t >= E('yet') && t < E('small') ? 0.3 + 0.7 * ramp(t, E('books'), E('small')) : 0; return ( ); }; /** When the candle is out, the miniature's window is the only light on the page. */ const Moonlight: React.FC = () => { const t = useT(); const k = (1 - litAt(t)) * (t >= E('low') && t < E('quiet') ? 1 : 0); if (k < 0.02) return null; return (

); }; /* ---------- the page's headings and notes ---------- */ /** A wipe opens past its box when it ends, or a letter's overhang stays cut off. */ const wipe = (k: number) => (k >= 1 ? undefined : `inset(-30% ${(1 - k) * 100}% -30% -5%)`); /** The scribe's mistake: the wrong word is written, scraped off with a knife, and the right one goes in small over the scar. */ const Mistake: React.FC = () => { const t = useT(); const at = E('wrote'); if (t < at) return null; const write = ramp(t, at, at + 0.42), sc = ramp(t, E('scrape'), E('scrape') + 0.72), fix = ramp(t, E('scrape') + 0.78, E('scrape') + 1.2); return ( of {WRONG} {sc > 0 ? : null} {sc > 0 ? Array.from({ length: 16 }, (_, i) => { const born = E('scrape') + (i / 16) * 0.72, u = t - born; if (u < 0 || u > 0.9) return null; return ; }) : null} {sc > 0 && sc < 1 ? : null} {fix > 0 ? {RIGHT} : null} ); }; const Rubric: React.FC = () => { const t = useT(); let i = 0; RUBRICS.forEach(([e], k) => { if (t >= E(e)) i = k; }); const [e, text] = RUBRICS[i]; return ( <>

{text}{e === 'err' ? : null}

); }; const HAND = 'M0 8H16V40H0ZM16 12C26 6 34 4 44 6L84 4C92 4 92 14 84 14L52 15C58 17 58 23 52 24C56 26 56 32 50 33C52 36 50 41 44 41H30C24 41 20 38 16 34Z'; const Glosses: React.FC = () => { const t = useT(); return ( <> {GLOSSES.map((g, i) => { const a = E(g.from[0]) + g.from[1], b = E(g.until[0]) + g.until[1]; if (t < a || t > b + 0.3) return null; return (

{g.hand ? : null} {g.text}

); })} ); }; /* ---------- the margin: a knight, a snail, and what the two of them come to ---------- */ const Ink: React.FC<{ d: string; k: number; fill?: string; w?: number; c?: string }> = ({ d, k, fill = 'none', w = 3.2, c = INK }) => k <= 0 ? null : = 1 ? undefined : 1} strokeDasharray={k >= 1 ? undefined : 1} strokeDashoffset={k >= 1 ? undefined : 1 - k} />; const SWORD = 'M0 -5L120 -3L132 0L120 3L0 5Z'; const Knight: React.FC<{ x: number; y: number; face: number; kneel: number; phase: number; arm: number; sword: boolean; ink: number; g: string }> = ({ x, y, face, kneel, phase, arm, sword, ink, g }) => { const S = Math.sin(phase); const hip = mix([0, -104], [-8, -64], kneel); const k1 = mix([8 + S * 14, -54], [32, -60], kneel), f1 = mix([10 + S * 30, 0], [36, 0], kneel); const k2 = mix([-8 - S * 14, -54], [-36, -8], kneel), f2 = mix([-10 - S * 30, 0], [-82, -4], kneel); const leg = (kn: P, ft: P) => `M${hip[0]} ${hip[1]}L${kn[0]} ${kn[1]}L${ft[0]} ${ft[1]}`; const sh: P = [hip[0] + 12, hip[1] - 64]; const rad = (arm * Math.PI) / 180; const hand: P = [sh[0] + Math.cos(rad) * 52, sh[1] + Math.sin(rad) * 52]; return ( {ink > 0.7 ? : null} {sword ? : null} {ink > 0.8 ? : null} ); }; const SnailG: React.FC<{ x: number; y: number; t: number; g: string; s?: number }> = ({ x, y, t, g, s = 1 }) => { const a = Math.sin(t * 2.3) * 5, b = Math.sin(t * 1.9 + 1) * 6, sq = 1 + Math.sin(t * 3) * 0.02; return ( ); }; const snailX = (t: number) => track(t, [0, E('margin'), E('quiet'), E('cta'), DURATION], [116, 574, 636, 780, 790]); const chop = (t: number, h: number) => (t < h - 0.14 ? 0 : t < h ? ramp(t, h - 0.14, h) : 1 - ramp(t, h, h + 0.22)); const GROUND = 1206, SPARK = 'M0 -44L8 -8L44 0L8 8L0 44L-8 8L-44 0L-8 -8Z'; const SCROLLWORK = 'M84 1180C130 1090 210 1040 290 1070C350 1094 350 1170 290 1170C250 1170 246 1116 286 1116M290 1070C380 1010 470 1030 530 1090C580 1140 540 1190 490 1170C456 1154 470 1110 506 1116M530 1090C610 1010 700 1020 770 1080C830 1130 790 1190 740 1170C706 1154 720 1110 756 1116M770 1080C830 1040 900 1040 950 1090'; const Margin: React.FC = () => { const t = useT(); const g = goldC(t, 0.3); const sx = snailX(t); const ink = ramp(t, E('knight') - 0.25, E('knight') + 0.95); const u = ramp(t, E('around'), E('around') + 1.05); const walkOn = t >= E('around') && t < E('quiet') + 2.1; const kx = track(t, [E('knight'), E('battle') - 0.14, E('battle'), E('losing'), E('losing') + 0.3, E('around'), E('around') + 1.05, E('quiet') + 2.1], [830, 830, 820, 820, 846, 846, 424, 172]); const ky = GROUND - Math.sin(u * Math.PI) * 150; const kneel = easeOut(ramp(t, E('losing') + 0.05, E('losing') + 0.34)) * (1 - easeInOut(ramp(t, E('wise') - 0.1, E('wise') + 0.3))); const swing = Math.max(chop(t, E('battle')), chop(t, E('bonk'))); const lost = t >= E('losing'); const arm = lost ? (kneel > 0.05 ? -80 : -8 + Math.sin(t * 14) * 18) : -70 + swing * 100; const cta = ramp(t, E('cta'), E('cta') + 0.75); // the sword flies out of his hand and stays where it lands const fly = ramp(t, E('losing'), E('losing') + 0.42); const swordAt: P = [lerp(790, 880, fly), lerp(1060, GROUND - 6, easeIn(fly)) - Math.sin(fly * Math.PI) * 100]; const hit = [E('battle'), E('bonk')].find((h) => t >= h && t < h + 0.2); const dots = Array.from({ length: 15 }, (_, i) => i / 14).filter((v) => u > v && u > 0); return ( ); }; /** The ending: the knight and the snail hold up the call to action between them. The text shrinks to fit a longer keyword. */ const Banderole: React.FC = () => { const t = useT(); const at = E('cta'); if (t < at) return null; const k = easeOut(ramp(t, at, at + 0.75)); const text = `COMMENT ${KEYWORD}`; const y = 1014 + Math.sin(t * 1.3) * 3; return (

{text.split(' ').map((w, i) => {i ? ' ' : ''}{w})}

); }; const BLOB = Array.from({ length: 28 }, (_, i) => { const a = (i / 28) * Math.PI * 2, r = 84 + (hash(i * 3 + 2) - 0.5) * 16; return `${i ? 'L' : 'M'}${(Math.cos(a) * r).toFixed(1)} ${(Math.sin(a) * r).toFixed(1)}`; }).join('') + 'Z'; const Seal: React.FC = () => { const t = useT(); const at = E('courage') - 0.14; if (t < at) return null; const k = easeIn(ramp(t, at, at + 0.14)), sq = t > at + 0.14 ? Math.exp(-(t - at - 0.14) * 14) * 0.08 : 0; return ( ); }; /* ---------- gold glints ---------- */ const GLINTS: P[] = [[150, 420], [410, 214], [706, 430], [120, 816], [700, 812], [862, 800], [150, 120], [930, 130], [540, 180], [760, 900], [420, 860], [980, 620]]; const STAR = 'M0 -30L6 -6L30 0L6 6L0 30L-6 6L-30 0L-6 -6Z'; const Glints: React.FC = () => { const t = useT(); const v = goldAt(t); const low = ramp(v, 0.15, 0.8), blaze = ramp(v, 0.8, 1); return ( ); }; /* ---------- the text of the page: the captions ---------- */ const CHUNKS = buildChunks(24, 3); const TX = 288, TY = 1234, ROW = 78; const gildBg = (v: number) => { const c = (x: string) => interpolateColors(v, [0, 0.8, 1], ['#57492a', x, '#fbe58f']); return `linear-gradient(135deg,${c('#b08a28')},${c('#f1d77a')} 45%,${c('#c9a23a')} 60%,${c('#9a7720')})`; }; const Captions: React.FC = () => { const t = useT(); const idx = CHUNKS.reduce((a, c, i) => (t >= c.t0 - 0.08 ? i : a), 0); const nextChunk = CHUNKS.find((c) => c.t0 > E('quiet')); const quiet = t >= E('quiet') && t < (nextChunk ? nextChunk.t0 - 0.08 : DURATION); const dim = ramp(t, E('fails') + 0.1, E('fails') + 0.5) * (1 - ramp(t, E('small'), E('small') + 0.35)); const ink = interpolateColors(dim, [0, 1], [INK, '#efe2c4']); const red = interpolateColors(dim, [0, 1], [VERM, '#ff8a6a']); const v = goldAt(t); if (quiet) { const k = 50 * (1 - easeOut(ramp(t, E('quiet') + 0.05, E('quiet') + 0.65))); return

{QUIET_CAPTION}

; } const c = CHUNKS[idx]; const first = c.words[0].w; const gild = idx === 0 ? ramp(t, E('gild'), E('gild') + 1.0) : 1; const fresh = 1 - ramp(t, c.t0 - 0.08, c.t0 + 0.28); const state = (w: Word) => (t >= w.t1 ? 'done' : t >= w.t0 - 0.02 ? 'on' : 'next'); return ( <>

= 1 ? undefined : `polygon(0 100%,0 ${100 - gild * 220}%,${gild * 220}% 100%)` }} />

0.5 ? '#2c3a62' : LAPIS, transform: `scale(${1 + fresh * 0.14})` }}>{first[0]}

{fresh > 0 ?

: null}

{c.words.map((w, i) => { const s = state(w); const up = w.w.toUpperCase().replace(/[.,;:!?"]/g, '') === KEYWORD && t >= E('cta'); return {i === 0 ? first.slice(1) : w.w}{i < c.words.length - 1 ? ' ' : ''}; })}

); }; /* ---------- light ---------- */ const Light: React.FC = () => { const t = useT(); const lit = litAt(t), c = camAt(t); const fx = c.s * CX + c.tx, fy = c.s * (flameY(t) - 34) + c.ty; const sun = ramp(t, E('quiet'), E('quiet') + 1.5); const f = flicker(t); return ( <> {sun > 0 ? : null} ); }; /* ---------- the film ---------- */ export const BookOfHours: React.FC = () => ( ); const Stage: React.FC = () => { const t = useT(); const c = camAt(t); const cam: React.CSSProperties = { position: 'absolute', left: 0, top: 0, width: 1080, height: 1920, transformOrigin: '0 0', transform: `translate(${c.tx}px, ${c.ty}px) scale(${c.s})` }; return (

{TITLE}

xvii

); }; ``` ## 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:** an old monk reading aloud at a lectern, soft, close to the mic, in no hurry, with a warmth that comes through on "Have courage". He reads this the way he'd read any chronicle, with care and full respect for the page, and he never notices it's funny. **When to use it:** on every line except the voiceless moment. Read, never chant or intone, because a sung or sermon delivery turns the film into a joke about worship. Slow voices run long, so speed the takes up until a line takes about the time the clock estimates. Give "hath" and "doth" their full sound. Add a small stone room with a short, warm echo, and compress before the room. The line to give room to is "do one small thing, then the next": it's the only thing he says that he means as advice. - **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 | |-------|--------|-------------|---------------| | room tone | 10 s | a quiet stone room at night, low soft air, a distant wind, no voices, no music | the bed, all the way through | | candle | 5 s | a small candle flame burning close up, a soft irregular flutter, warm and quiet | a low bed while the flame is lit | | quill | 1 s | a quill pen scratching on parchment, small dry strokes, close | very quietly as each caption chunk starts, and under the knight drawing himself on `knight` | | gold | 1 s | a soft low shimmer of thin metal leaf, warm and small, not a bright chime | the initial gilding on `gild`; louder as gold crosses the page on `quiet` | | horn | 1.5 s | an old cow horn blown badly, a short rough low blast in a stone room | `horn` | | blanket | 0.8 s | a heavy wool blanket pulled up in one tug, soft and muffled | `rise` | | armor | 0.8 s | a knight in plate armor sitting down, a soft metal clank | once for each knight after `forth` | | muffled cheer | 1 s | a few men cheering inside metal helmets, hollow and wordless, short | `friday` | | knife scrape | 1 s | a small knife scraping dry parchment, quick rough strokes, close | `scrape` | | helmets down | 1.2 s | five metal helmets dropping onto a wooden table one after another, dull thuds | right after `scrape` | | shell hit | 0.5 s | a small sword tapping a hollow snail shell, a tiny dull tink, comic but not cartoonish | `battle` and `bonk` | | sword drop | 0.8 s | a small sword landing flat on a wooden floor, one dull clatter | `losing` | | gutter | 1 s | a candle guttering and going out, a wet sputter, then a tiny hiss | `fails` | | far bell | 4 s | one large bronze bell heard from very far away across fields at night, low and soft | the low point, while the page is dark | | wind | 8 s | cold wind around a stone tower at night, low and slow, no howling | rising under the low point, falling on `small` | | scroll | 0.4 s | a rolled parchment landing on a pile of others, a soft papery thud | each scroll arriving, in a run; a little slower in the dark | | flame catch | 0.8 s | a candle wick catching, a soft small whoof | `small` | | bell | 5 s | a large bronze bell tolled once nearby, deep and warm, long decay | `quiet`, the biggest thing in the film's middle | | wax seal | 1.2 s | a heavy metal seal pressed into hot wax on a wooden desk, a deep solid thud, soft squish | `courage`, the loudest thing in the film | | ribbon | 0.8 s | a parchment ribbon unrolled quickly, a dry flutter | `cta` | - **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:** "Sparse early-music style instrumental: a slow plucked lute over a low bowed drone, modal and warm, patient for a long stretch, then a soft hand drum and a wooden flute opening it up, ending resolved, no vocals, no chant, no choir." Keep it secular: a sung sacred piece under these jokes would break the frame's first rule. **When it plays:** under the first lines at a low level. It drains to nothing over 0.7 s on "fails", and stays out while the candle is out, so only the far bell and the wind remain. It returns on "small", low at first, and climbs through the knight's walk. It's at its fullest on the voiceless moment, on a bar where the track opens up, and it ducks right after the wax seal so the last line sits clear. **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 - **Letters that read wrong:** Uncial Antiqua's capital H reads as a b, its capital A as a lambda and its small t as a c. Blackletter's capital I reads as a J and its x as an r, which turns Latin into nonsense, and that's why our drop cap is in Fell, the Latin headings are in uncial capitals with no H, and the crate says "inbox" in small letters. Look at each new word at full size. - **A joke that drifts to the sacred:** with this look, it's the easy joke, and it's the one thing this frame doesn't do. If a line needs a saint or a prayer to work, write a different line. - **Latin from memory:** see the rule at the top. A wrong ending is what a careful viewer comments on instead of your topic. - **A black low point:** the page goes to about 12% with a blue cast, the captions flip to pale ink, and the moonbeam keeps the scrolls moving. It's never black, and there's always something falling. - **Captions under the page:** only zoom around `FOCUS`. A focus lower than the top of the text block pushes the fight down behind the words. - **Ghost words look like a bug on a contact sheet:** those are the words not spoken yet. Watch the video to check that each chunk finishes well before the next starts. - **A snail nobody can find:** keep it large and let it start well to the left, or the line "Lo, in the margin" has nothing to pay off. It has to be visible from the first frame. - **The walk reads as a hop:** the knight has to clear the shell by a visible gap, with the dotted line left behind him, or "goes around" looks like "climbs on". | 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.