{Array.from({ length: rings }, (_, i) => (

))} ); }; const BULBS = (() => { const out: [number, number][] = []; for (let i = 0; i < 17; i++) out.push([16 + i * 46.5, 12]); for (let i = 1; i < 3; i++) out.push([760, 12 + i * 51]); for (let i = 16; i >= 0; i--) out.push([16 + i * 46.5, 160]); for (let i = 2; i > 0; i--) out.push([16, 12 + i * 51]); return out; })(); const Marquee: React.FC = () => { const t = useT(); const low = lowAt(t); const glow = (1 - 0.72 * low) * flickerAt(t); return (

{BULBS.map(([x, y], i) => { const on = (i + Math.floor(t * 5)) % 3 !== 0; return

; })}

{MARQUEE}

); }; /** The cat, in code: one blurry ear, close to the lens. */ const Ear: React.FC<{ size: number; blur: number; rot: number }> = ({ size, blur, rot }) => ( ); const Doodle: React.FC<{ d: (typeof DOODLES)[number] }> = ({ d }) => { const t = useT(); const a = E(d.from); if (t < a || t >= E(d.to)) return null; const k = back(ramp(t, a, a + 0.28)); const draw = ramp(t, a + 0.1, a + 0.4); return ( <>

{d.text}

); }; const Fridge: React.FC<{ k: number; width: number }> = ({ k, width }) => { const t = useT(); const knock = t >= E('fridge') ? Math.sin((t - E('fridge')) * 40) * 5 * (1 - ramp(t, E('fridge'), E('fridge') + 0.3)) : 0; const letters = KEYWORD.split(''); const size = Math.min(84, 560 / letters.length); const paper = (text: string, x: number, y: number, rot: number, bg: string, pin: string) => (

{text}

); return (

{paper(NOTES[0], 96, 214, -4, '#fff7cf', YEL)} {paper(NOTES[1], 110, 452, 3, '#d7e8f2', PINK)} {letters.map((c, i) => { const a = E('cheese') + i * 0.1; return t >= a ?

{c}

: null; })}

); }; const Window: React.FC = () => { const t = useT(); const s = shotAt(t); const local = t - s.at(); const low = lowAt(t), f = flashAt(t), fridge = fridgeAt(t); const tilt = (1 - back(ramp(t, E('straight'), E('straight') + 0.5))) * 3.6; const closer = s.zoom ? (s.img === 'shoot' ? lerp(s.zoom, 1.22, easeInOut(ramp(t, E('rise'), E('pinned')))) : s.zoom) : 1; const scale = closer * (1.06 + 0.012 * Math.min(local, 6) + tilt * 0.012); const fresh = s.flash ? 1 - ramp(local, 0.3, 0.9) : 0; const bright = (0.88 + 0.14 * fresh) * (1 - 0.34 * low) * flickerAt(t); const next = COUNTED.map(E).find((a) => a - t > 0 && a - t <= 0.9); const digit = next !== undefined ? Math.ceil((next - t) / 0.3) : 0; const digitK = next !== undefined ? 1 - ((next - t) % 0.3) / 0.3 : 0; const month = MONTHS.reduce((a, [ev, m]) => (t >= E(ev) ? m : a), ''); const earY = (1 - back(ramp(t, E('bomb'), E('bomb') + 0.5))) * 400 + easeIn(ramp(t, E('jul'), E('jul') + 0.3)) * 400; const width = lerp(WIN.w, 862, fridge); return (

{t >= E('bomb') && t < E('jul') + 0.3 ?

: null} {DOODLES.map((d) => )} {month && fridge < 1 ?

{month}

: null} {digit ?

{digit}

: null} {fridge > 0 ? : null}

); }; const Lens: React.FC = () => { const f = flashAt(useT()); return (

); }; const Screen: React.FC = () => { const t = useT(); const idx = SCREEN.reduce((a, [ev], i) => (t >= E(ev) ? i : a), 0); const [ev, text] = SCREEN[idx]; const shown = idx === 0 ? text : text.slice(0, Math.max(1, Math.ceil(ramp(t, E(ev), E(ev) + 0.28) * text.length))); const cta = easeOut(ramp(t, E('cta'), E('cta') + 0.3)); const width = lerp(716, 890, cta); const size = fit(text, width - 56, 64 + 22 * cta); const pulse = cta > 0 ? 0.9 + 0.1 * Math.sin(t * 4) : 1; return (

{shown}

); }; const YesButton: React.FC = () => { const t = useT(); const on = ramp(t, E('try') - 0.1, E('try') + 0.2) * (1 - ramp(t, E('rise'), E('rise') + 0.4)); const press = t >= E('yes') && t < E('yes') + 0.22 ? 0.9 : 1; const beat = t >= E('try') && t < E('yes') ? 0.5 + 0.5 * Math.sin((t - E('try')) * 9) : 1; if (t >= E('cta')) return null; return (

0 ? YEL : '#5e1420', opacity: on > 0 ? 0.55 + 0.45 * beat * on : 1, transform: `scale(${press})`, boxShadow: on > 0 ? `0 0 ${34 * on}px rgba(255,211,77,.9)` : 'inset 0 -6px 0 rgba(0,0,0,.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `400 34px/1 ${MARQ}`, color: on > 0 ? INK : '#a65a64' }}>YES

); }; /** One photo on the strip: the print head wipes the newest shot over the last one. */ const Frame: React.FC<{ i: number }> = ({ i }) => { const t = useT(); const shots = SHOTS.filter((s) => s.photo === i && t >= s.at()); const cur = shots[shots.length - 1], prev = shots[shots.length - 2]; const p = PHOTOS[i]; const pic = (s: Shot, clip?: string, filter?: string) => (

{s.ear ?

: null}

); let body: React.ReactNode =

{i + 1}

; let head = -1; if (cur) { const k0 = ramp(t, cur.at() + 0.12, cur.at() + 0.75); const k = cur.stall !== undefined ? Math.min(cur.stall, k0) : k0; const dev = ramp(t, cur.at() + 0.12, cur.at() + 1.2); head = k < 1 ? k : -1; body = ( <> {prev ? pic(prev) : null} {pic(cur, k >= 1 ? undefined : `inset(0 0 ${(1 - k) * 100}% 0)`, `saturate(${0.3 + 0.7 * dev}) brightness(${1.35 - 0.35 * dev})`)} ); } const noted = t >= E(p.noteAt) + 0.15; return (

{body} {head >= 0 ?

: null} {cur ?

{p.label}

: null} {noted ?

{p.note}

: null}

); }; const stripPose = (t: number) => { const drop = 830; const y0 = lerp(STRIP.y - drop, STRIP.y, easeOut(ramp(t, 0, 0.9))) + easeIn(ramp(t, E('drop'), E('drop') + 0.55)) * drop - back(ramp(t, E('rise'), E('rise') + 0.6)) * drop; const fly = easeInOut(ramp(t, E('pinned'), E('fridge'))); const shake = t >= E('mind') ? Math.sin((t - E('mind')) * 15) * 2 * (1 - ramp(t, E('mind') + 0.9, E('pinned'))) : 0; const swing = t >= E('fridge') ? Math.sin((t - E('fridge')) * 2.1) * 0.7 : 0; return { x: lerp(STRIP.x, 474, fly), y: lerp(y0, 296, fly), r: lerp(shake, -3 + swing, fly), s: lerp(1, 0.9, fly) }; }; const Strip: React.FC = () => { const t = useT(); const pose = stripPose(t); const low = lowAt(t); const free = t >= E('pinned'); const shine = (a: number, b: number) => ramp(t, a, b) * 1.6 - 0.3; const glossA = t >= E('r3') + 0.15 && t < E('drop') + 0.6 ? shine(E('r3') + 0.15, E('drop') + 0.2) : -1; const glossB = t >= E('rise') && t < E('pinned') ? shine(E('rise') + 0.2, E('pinned') - 0.1) : -1; const gloss = Math.max(glossA, glossB); const stamped = t >= E('best'); const paper = (

0 ? `brightness(${1 - 0.3 * low})` : undefined, transform: `rotate(${pose.r}deg) scale(${pose.s})`, transformOrigin: '50% 0' }}> {PHOTOS.map((_, i) => )} {stamped ?

{STAMP}

: null} {gloss > -0.3 && gloss < 1.3 ?

: null}

); const magnet = t >= E('fridge') ? (

) : null; return free ? ( <> {paper} {magnet} ) : (

{paper}

); }; const Bay: React.FC = () => { const gone = fridgeAt(useT()); return (

); }; const CHUNKS = buildChunks(19, 2); const Captions: React.FC = () => { const t = useT(); if (t >= E('retake') && t < E('rise') - 0.32) { const pop = SHOTS.filter((s) => s.flash && t >= s.at()).pop(); const k = pop ? easeOut(ramp(t, pop.at(), pop.at() + 0.25)) : 1; return

{KEYWORD}

; } 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 k = easeOut(ramp(t, c.t0 - 0.06, c.t0 + 0.12)); return (

{c.rows.map((r, ri) => { const ws = [...new Set(r.map.filter((x) => x >= 0))]; return (

{ws.map((wi, j) => { const w = c.words[wi]; const on = t >= w.t0 - 0.03 && t < w.t1 + 0.06; const said = t >= w.t1; const kw = w.w.toUpperCase().startsWith(KEYWORD) && t >= E('cta'); return {w.w}{j < ws.length - 1 ? ' ' : ''}; })}

); })}

); }; /** Below the safe area: texture only. */ const Shelf: React.FC = () => { const t = useT(); const tick = Math.pow(1 - ((t * 1.4) % 1), 3); return ( <>

PHOTOS WHILE YOU WAIT

); }; const Stage: React.FC = () => { const t = useT(); const low = lowAt(t), f = flashAt(t); return ( ); }; export const Photobooth: React.FC = () => ( ); ``` ## 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:** the booth itself. A bright, polite, pre-recorded prompt voice, the kind that has said the same lines in the same mall for forty years and is delighted every time. It never notices that anything is wrong: "You are very still" gets exactly the same smile as "Good." **When to use it:** on every line except the retake. Keep the delivery level through the low point, because the gap between that voice and the dead plant is the joke. Put it through a small speaker: roll off below about 200 Hz and above about 5 kHz, and add a very short boxy echo. Pass commas around the keyword in the spoken text ("Comment, cheese, and...") so it doesn't blur. - **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. Events are the names in `story.json`. | Sound | Length | Prompt idea | When it plays | |-------|--------|-------------|---------------| | coin | 0.8 s | one coin dropped into an old vending slot, rattling down inside a metal mechanism, small and close | the first frame (`on`) | | curtain rings | 1.2 s | metal curtain rings sliding fast along a chrome rail with heavy velvet swishing behind them, soft and close | `close` | | countdown beep | 0.3 s | a soft low electronic beep from an old machine, warm and round, not piercing | each digit of a 3, 2, 1, in the 0.9 s before each event in `COUNTED` | | shutter | 0.7 s | a big mechanical camera shutter clunk with a soft flash pop and a falling whine, warm, no sharp click | every flash in `SHOTS` | | printer | 1 s | a small strip printer feeding paper, a low motor whir with a soft rhythmic ticking | just after each flash that prints | | printer stop | 0.8 s | the same small motor grinding down and stopping with a dull clunk | `very` | | ding | 0.5 s | one small cheerful machine chime, soft and round | `good` | | pen | 0.7 s | a felt tip pen scribbling quickly on glossy paper, soft squeak | each pen note: `leaf`, `pot`, `snapCat`, `wet`, `r3` | | fur | 0.8 s | soft fur brushing right against a microphone, a short muffled rustle | `bomb` | | coin-slot tick | 0.3 s | a single dull metal tick from inside a coin mechanism, very short and dry | about 1.4 times a second through the low point, with the coin plate's light | | button | 0.4 s | a chunky plastic arcade button pressed once, a soft thock | `yes` | | strip drop | 0.7 s | a stiff strip of photo paper dropping into a metal chute, a soft flap and small clatter | `drop` | | paper shake | 1.2 s | a damp strip of photo paper shaken in the air, soft quick flapping | `mind` | | magnet | 0.4 s | a fridge magnet snapping onto a steel door, a short dull clack | `fridge`, and quieter for each letter from `cheese` | | stamp | 0.5 s | a small rubber stamp pressed on card, soft and dry | `best` | | booth hum | 12 s | the fluorescent tube and transformer of a coin-op booth, a steady low warm hum | the bed, all the way through, rising through the low point and flickering with the light | | room tone | 12 s | a quiet shopping mall heard from behind a curtain, soft air, very faint distant activity, no voices, no music | the bed, a little louder until the curtain closes on `curtain` | - **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:** "Cheerful shopping mall lounge instrumental: a bright electric organ, soft brushed drums and a bouncing upright bass, a little too happy and sparse for a long stretch, then a clear lift where warm brass and full chords open up, ending resolved, no vocals." **When it plays:** the bed plays low and sunny under January through July. It drains to nothing over 0.7 s on the flash at `snap4`, and stays out while the lights are low, so only the booth's hum and the coin-slot tick remain. It comes back low on `again`, is at its fullest on the voiceless retake, on a bar where the track opens up at `r3`, and settles under the last lines so they sit 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 - **Too many flashes:** this film flashes on every shot, so measure it. Read each frame's brightness from the render and count the jumps that fall back: there should never be 3 in any one second. Count only jumps that fall, or the lights coming back at the turn count as flashes. Keep the low point's flicker slow and shallow, like `flickerAt`, because it is a flash too if you hurry it. - **The stills drift:** always edit from a picture you've looked at, and keep the camera words the same in every prompt. Throw out any picture with a different plant or stray text, and hide small differences under the flash. - **No room to grow:** a hero with the subject filling the frame leaves the later pictures nowhere to go. Leave the top half empty. - **Dark bits on the strip:** at 212 x 180 px a photo is mostly silhouette. Use a pale backdrop, so a dead brown plant still reads at that size. - **A pen note on the stool:** pink on a red seat disappears, so put notes over the backdrop, and check them on full-size frames. A contact sheet hides a note cut off by the window's edge. - **The month changes before the picture does.** That's on purpose: the tab flips at the start of the line and the new picture waits for the flash, which is the suspense. Don't line them up. - **A quiet start:** the first picture sits for about 7 s before the first flash. Keep the tilt, the curtain and the strip feeding down there, and don't add an early flash to fill it. | 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.