{SOUNDINGS.map(([x, y, s], i) =>

{s}

)}

{TXT.scale}

{TXT.rumor}

{TXT.seaB}

); /** Little waves on the sea, always moving, so the chart is never still. They lean harder in the storm. */ const SeaMarks: React.FC = () => { const t = useT(); const s = stormK(t); return ( ); }; const Unroll = (t: number) => lerp(470, 2030, easeOut(ramp(t, 0, 1.0))); const Table: React.FC = () => (

); /* ---------- the title cartouche, where the keyword gets inked at the end ---------- */ const CX0 = 62, CY0 = 92, CX1 = 478, CY1 = 436, CC = 30; const Cartouche: React.FC = () => { const t = useT(); const cta = E('keyword'); const k = ramp(t, cta, cta + 0.45); const curl = (x: number, y: number, sx: number, sy: number, key: string) => ( ); return ( <>

{TXT.titleTop}

{TXT.title} {TXT.titleSub} {/* before the keyword, the small print: it fades as the fresh ink goes on */}

{TXT.note.map((l) =>

{l}

)}

{TXT.comment} {KEYWORD} ); }; /* ---------- a ship, used on the chart and in the glass ---------- */ const Ship: React.FC<{ x?: number; y?: number; s?: number; rot?: number; hull?: string; sail?: string; sofa?: boolean; flip?: boolean; line?: string }> = ({ x = 0, y = 0, s = 1, rot = 0, hull = '#7d4a22', sail = '#f2e7c9', sofa = true, flip = false, line = INK_D }) => ( {[-72, -30, 12, 54].map((p) => )} {sofa ? ( ) : null} ); /* ---------- the map's marks ---------- */ const Cottage: React.FC<{ x: number; y: number; at: number }> = ({ x, y, at }) => { const t = useT(); const fill = ramp(t, at + 0.2, at + 0.45); if (t < at) return null; const smoke = (i: number) => { const u = (t * 0.5 + i * 0.33) % 1; return ; }; return ( {[0, 1, 2].map(smoke)} ); }; const ViewingHouse: React.FC<{ x: number; y: number; at: number }> = ({ x, y, at }) => { const t = useT(); if (t < at) return null; const fill = ramp(t, at + 0.2, at + 0.45); return ( {[-14, 2].map((dx) => )} ); }; const CapeHouse: React.FC<{ x: number; y: number; at: number }> = ({ x, y, at }) => { const t = useT(); if (t < at) return null; const fill = ramp(t, at + 0.15, at + 0.4); return ( ); }; const MapLamp: React.FC = () => { const t = useT(); const at = E('sign') - 0.05; if (t < at) return null; const [x, y] = AT.lamp; const pulse = 0.55 + 0.2 * Math.sin(t * 5); return ( ); }; /* ---------- the old trail, and what the storm does to it ---------- */ const OldTrail: React.FC = () => { const t = useT(); const len = trailLen(t); return ( <> {OLD.map((d, i) => { if (d.s > len) return null; const st = E('last') + hash(i + 5) * 1.7; const k = ramp(t, st, st + 0.85); if (k >= 1) return null; const y = d.y + easeIn(k) * (50 + hash(i + 9) * 170); const w = 19 + k * 30; const fresh = 1 - ramp(len - d.s, 0, 60); return 0.5 ? INK_D : INK} opacity={1 - k * k} transform={`translate(${d.x.toFixed(1)} ${y.toFixed(1)}) rotate(${lerp(d.a, 90, ramp(k, 0, 0.3)).toFixed(1)}) scale(${1 + fresh * 0.25})`} />; })} ); }; /* Every label the storm reaches sheds drips of ink. The stains stay, faintly, for the rest of the film. */ const DRIP_SOURCES: { x0: number; x1: number; y: number; n: number }[] = [ { x0: 262, x1: 540, y: 1142, n: 17 }, { x0: 150, x1: 480, y: 830, n: 20 }, { x0: 522, x1: 760, y: 1210, n: 13 }, { x0: 725, x1: 945, y: 1254, n: 8 }, { x0: 232, x1: 312, y: 700, n: 8 }, { x0: 186, x1: 244, y: 1136, n: 7 }, ]; const wobble = (x: number, h: number, seed: number) => `M${x} 0 C${x + (hash(seed) - 0.5) * 14} ${h * 0.3} ${x + (hash(seed + 1) - 0.5) * 18} ${h * 0.66} ${x + (hash(seed + 2) - 0.5) * 8} ${h}`; const DRIPS = DRIP_SOURCES.flatMap((s, si) => Array.from({ length: s.n }, (_, i) => ({ x: s.x0 + hash(si * 11 + i * 3 + 1) * (s.x1 - s.x0), y: s.y - 8 + hash(i + si + 44) * 10, delay: hash(si * 5 + i * 7 + 2) * 1.5, len: 30 + Math.pow(hash(si + i * 13 + 3), 2) * 210, w: 1.6 + hash(si * 2 + i + 4) * 3.2, seed: si * 37 + i * 5 }))); const VEILS = DRIP_SOURCES.map((s) => ({ x: s.x0 - 6, w: s.x1 - s.x0 + 12, y: s.y - 44 })); const WET = Array.from({ length: 26 }, (_, i) => ({ x: 70 + hash(i + 301) * 940, y: 480 + hash(i + 401) * 800, r: 50 + hash(i + 501) * 110, delay: hash(i + 601) * 2.2 })); const InkRun: React.FC = () => { const t = useT(); if (t < E('low')) return null; const clearing = ramp(t, E('nolisting'), E('phone') + 0.4); const veil = easeOut(ramp(t, E('last'), E('signed') + 0.5)); return ( <> {WET.map((w, i) => { const k = easeOut(ramp(t, E('low') + 0.3 + w.delay, E('low') + 1.1 + w.delay)); return k > 0 ? : null; })} {/* the ink lifts off the paper in a soft wash under each name */} {veil > 0 ? VEILS.map((v, i) => ) : null} {DRIPS.map((d, i) => { const k = easeOut(ramp(t, E('last') + d.delay, E('last') + d.delay + 1.2)); if (k <= 0) return null; const h = Math.max(1, d.len * k); const end = (hash(d.seed + 2) - 0.5) * 8; return ( ); })} ); }; const FreshTrail: React.FC = () => { const t = useT(); if (t < E('nolisting')) return null; const len = newLen(t); return ( <> {NEW.map((d, i) => { if (d.s > len) return null; const age = (len - d.s) / 90; const s = lerp(1.5, 1, clamp(age)); return ; })} ); }; const XMark: React.FC = () => { const t = useT(); const at = E('number') - 0.08; if (t < at) return null; const [x, y] = AT.x; const k = back(ramp(t, at, at + 0.14)); const open = ramp(t, E('chop3'), E('chop3') + 0.1); const r = 44; const under = ramp(t, E('key') + 0.18, E('key') + 0.3); return open >= 1 && t < E('key') + 0.2 ? null : ( ); }; /* ---------- the monster in the margin ---------- */ const Beast: React.FC<{ eye: number; lift: number; keys?: boolean; small?: boolean }> = ({ eye, lift, keys = true, small = false }) => { const t = useT(); const BODY = small ? '#7f6aa0' : '#4f8a78', DARK = small ? '#5b4a78' : '#2f6657'; const sway = Math.sin(t * 1.8) * 4; return ( {/* crest */} {[0, 1, 2, 3].map((i) => )} {/* horn and ear */} {/* lower jaw */} {[-96, -70, -44].map((x) => )} {/* skull */} {[0, 1, 2].map((i) => )} {/* the eye */} {eye > 0.04 ? ( ) : } {keys ? ( {[-18, 0, 18].map((a, i) => )} ) : null} ); }; const HUMPS: [number, number, number, number][] = [[934, 1004, 78, 74], [838, 1084, 62, 58], [906, 1168, 46, 38]]; const Monster: React.FC = () => { const t = useT(); const wake = easeOut(ramp(t, E('beast') - 0.02, E('beast') + 0.5)); const sink = ramp(t, E('low'), E('storm') + 0.2); const rise = (0.42 + 0.58 * wake) * (1 - 0.5 * sink); const eye = wake * (1 - sink) * (Math.sin(t * 0.9) > 0.985 ? 0.2 : 1); const w = washK(t); const topY = 806 + (1 - rise) * 130; const neck = `M950 958 C966 930 900 920 900 880 C900 ${lerp(860, 840, rise)} 900 ${topY + 30} 896 ${topY}`; return ( {/* the neck rises from behind the first hump, and the head sits on it */} {HUMPS.map(([x, y, rx, h], i) => { const k = rise * (0.92 + 0.08 * Math.sin(t * 1.9 + i * 1.7)); const ht = h * k + 18; return ( {[-0.45, 0, 0.45].map((f) => )} ); })} ); }; const Snores: React.FC = () => { const t = useT(); if (t > E('beast')) return null; return <>{[0, 1, 2].map((i) => { const u = (t * 0.45 + i * 0.33) % 1; return

; })}; }; /* ---------- twelve crews jammed around one landmark ---------- */ const FLEET: [number, number, number, boolean][] = [[118, 640, -4, false], [186, 566, 5, true], [268, 556, -3, false], [352, 626, 4, true], [440, 640, -5, true], [100, 558, 3, false], [356, 556, -4, true], [442, 566, 4, true], [522, 612, -3, true], [150, 624, 3, false], [404, 604, 2, true], [300, 606, -2, false]]; const Fleet: React.FC = () => { const t = useT(); if (t < E('twelve')) return null; const gone = E('storm'); const hulls = ['#5a3a1c', '#6c4422', '#3f2b16', '#7d4a22']; return ( <> {FLEET.map(([x, y, r, flip], i) => { const at = E('twelve') + i * 0.075; if (t < at) return null; const k = back(ramp(t, at, at + 0.16)); const leave = ramp(t, gone + i * 0.08, gone + i * 0.08 + 0.9); if (leave >= 1) return null; const jam = Math.sin(t * 2.3 + i * 1.9) * 3; return ; })} ); }; const Token: React.FC = () => { const t = useT(); let x = AT.cove[0] + 6, y = AT.cove[1] + 22, flip = false; if (t < E('faster')) { const len = trailLen(t); const i = clamp(Math.round(len / 3), 0, OLD_FINE.length - 2); const d = OLD_FINE[i], moving = len > 0; if (moving) { x = d.x; y = d.y; flip = OLD_FINE[i + 1].x < d.x; } } const sink = ramp(t, E('faster') - 0.4, E('faster') + 0.3); const fresh = t >= E('nolisting'); if (fresh) { const len = newLen(t); const i = clamp(Math.round(len / 3), 0, NEW_FINE.length - 1); x = NEW_FINE[i].x; y = NEW_FINE[i].y; flip = false; if (t > E('dig')) return null; } else if (sink >= 1) return null; const pop = fresh ? 1 : 1 - sink; const rock = Math.sin(t * 3) * 4 + stormK(t) * 18 * Math.sin(t * 2.3); return ; }; /* ---------- the dig: the chart itself gets cut open ---------- */ const DIRT = Array.from({ length: 16 }, (_, i) => ({ a: hash(i + 701) * Math.PI - Math.PI, v: 180 + hash(i + 801) * 320, r: 3 + hash(i + 901) * 6 })); const Burst: React.FC<{ at: number; x: number; y: number }> = ({ at, x, y }) => { const t = useT(); const u = t - at; if (u < 0 || u > 0.55) return null; return <>{DIRT.map((d, i) => )}; }; const KeyArt: React.FC<{ s?: number }> = ({ s = 1 }) => ( ); const Dig: React.FC = () => { const t = useT(); const D = E('dig'); const [x, y] = AT.x; if (t < D - 0.05 || t > E('key') + 0.42) return null; const c1 = E('chop1'), c2 = E('chop2'), c3 = E('chop3'); /* the spade: raised, then down on each chop */ const lift = (c: number) => { const u = t - c; return u < -0.16 ? 1 : u < 0 ? 1 - easeIn(ramp(u, -0.16, 0)) : ramp(u, 0.06, 0.26); }; const next = t < c1 + 0.2 ? c1 : t < c2 + 0.2 ? c2 : c3; const h = lift(next); const away = easeIn(ramp(t, c3 + 0.14, c3 + 0.5)); const hole = t < c3 ? 0 : easeOut(ramp(t, c3, c3 + 0.16)); const riseK = easeOut(ramp(t, E('rise'), E('thud'))); const lidK = back(ramp(t, E('lid'), E('lid') + 0.42)); const lid = lerp(1, -0.62, lidK); const gleam = ramp(t, E('lid') + 0.1, E('gleam') + 0.2); const keyUp = easeOut(ramp(t, E('lid') + 0.1, E('gleam') + 0.25)); const out = easeIn(ramp(t, E('key') + 0.08, E('key') + 0.4)); const jump = t >= E('thud') ? Math.exp(-(t - E('thud')) * 9) * Math.sin((t - E('thud')) * 40) * 8 : 0; const flaps = Array.from({ length: 12 }, (_, i) => (i / 12) * Math.PI * 2); return ( {/* the cuts, one per chop, before the paper opens */} {hole > 0 ? ( {/* torn paper folding back round the hole */} {flaps.map((a, i) => { const rx = 96 * hole, ry = 42 * hole; const px = x + Math.cos(a) * rx, py = y + Math.sin(a) * ry + 8; const out2 = 22 + hash(i + 11) * 24; return ; })} ) : null} {/* the chest comes up out of the paper */} {t >= E('rise') ? ( {/* rays and the key sit behind the chest's front */} {gleam > 0 ? Array.from({ length: 12 }, (_, i) => ) : null} {keyUp > 0 ? : null} {[-66, -36, -6].map((p) => )} {[-62, 44].map((p) => )} {lid >= 0 ? [-62, 44].map((p) => ) : null} ) : null} {t >= E('thud') && t < E('thud') + 0.5 ? : null} {/* the spade */} {away < 1 ? ( ) : null} ); }; /* ---------- what comes after: a tiny lit window, and who lives upstairs ---------- */ const lit = (t: number) => ramp(t, E('key') + 0.28, E('key') + 0.42); const Note: React.FC<{ x: number; y: number; s: number; o: number; c?: string }> = ({ x, y, s, o, c = INK_D }) => ( ); const Apartment: React.FC = () => { const t = useT(); const at = E('key') + 0.18; if (t < at) return null; const [x, y] = AT.x; const pop = back(ramp(t, at, at + 0.2)); const L = lit(t); const hop = stomp(t) * 4; const notesOn = ramp(t, E('sings'), E('sings') + 0.2); return ( 0 ? GOLD : '#3a2a18'} stroke={INK_D} strokeWidth={4} /> {notesOn > 0 ? [0, 1, 2, 3].map((i) => { const u = (t * 0.55 + i * 0.25) % 1; return ; }) : null} ); }; const Neighbor: React.FC = () => { const t = useT(); const at = E('neighbor'); if (t < at) return null; const [x, y] = AT.x; const k = ramp(t, at, at + 0.4); const s = stomp(t); return (

= 1 ? undefined : `inset(0 0 ${(1 - k) * 100}% 0)` }}>

); }; /* ---------- the window: a brass spyglass, and what it finds ---------- */ const Art: React.FC<{ children: React.ReactNode }> = ({ children }) => ; const waveD = (y: number, amp: number, len: number, ph: number) => { const x0 = -len * 2 + (((ph % len) + len) % len); let d = `M${x0.toFixed(1)} 700 L${x0.toFixed(1)} ${y.toFixed(1)}`; for (let i = 0; i < Math.ceil(800 / len) + 3; i++) d += ` q${len / 4} ${-amp} ${len / 2} 0 q${len / 4} ${amp * 0.5} ${len / 2} 0`; return `${d} L1200 700 Z`; }; const Backdrop: React.FC<{ a: string; b: string; rows: [string, number, number, number, number][] }> = ({ a, b, rows }) => { const t = useT(); const id = `bk${a.slice(1)}${b.slice(1)}`; return ( <> {rows.map(([c, y, amp, len, sp], i) => )} ); }; const CALM: [string, number, number, number, number][] = [['#2f7f7c', 360, 10, 120, 18], ['#287472', 410, 14, 150, -26], ['#1f6062', 470, 18, 190, 34], ['#174e52', 530, 22, 230, -44]]; /** First sight: the glass hunts across empty water, then finds the ship. */ const SeaSearch: React.FC = () => { const t = useT(); const k = easeInOut(ramp(t, E('glass') + 0.05, E('glass') + 0.85)); const x = lerp(860, 310, k); return ( {[0, 1, 2].map((i) => )} ); }; const HomeShore: React.FC = () => { const t = useT(); const z = lerp(1, 1.95, easeInOut(ramp(t, E('sofa') - 0.3, E('sofa') + 0.12))); const shipX = lerp(330, 440, ramp(t, E('cove'), E('sofa'))); const shipY = 352 + Math.sin(t * 2.1) * 5; const zk = ramp(z, 1, 1.95); const fx = shipX + 70 * zk, fy = shipY - 34 * zk; const sx = lerp(fx, 300, zk), sy = lerp(fy, 350, zk); const wave = Math.sin(t * 7) * 18; const tag = back(ramp(t, E('sofa') - 0.02, E('sofa') + 0.2)); return ( <> {/* the house you grew up in */} {/* two small figures waving goodbye */} {[[178, 322], [206, 328]].map(([x, y], i) => ( ))} {tag > 0 ?

{TXT.cargo}

: null} ); }; /* Twelve crews, back to front. Hats from behind. */ const CROWD: [number, number, number][] = [[250, 348, 0.34], [300, 352, 0.34], [352, 348, 0.34], [214, 382, 0.52], [280, 392, 0.52], [340, 390, 0.52], [400, 380, 0.52], [158, 442, 0.82], [260, 456, 0.82], [362, 452, 0.82], [456, 438, 0.82], [300, 540, 1.28]]; const Hallway: React.FC = () => { const t = useT(); return ( {[0.15, 0.35, 0.6, 0.85].map((k) => )} {[0.3, 0.6].map((k) => )} {CROWD.map(([x, y, s], i) => { const at = E('twelve') + i * 0.075; if (t < at) return null; const k = back(ramp(t, at, at + 0.16)); const squeeze = ramp(t, E('hallway') - 0.1, E('hallway') + 0.1); const jx = Math.sin(t * 4.2 + i * 2.3) * (2 + 5 * squeeze) * s; const jy = Math.abs(Math.sin(t * 5.5 + i * 1.3)) * 5 * s * (0.3 + squeeze); const hat = ['#2a180b', '#3a2413', '#1f2a33', '#4a2c17'][i % 4]; const coat = ['#27384a', '#5a2a22', '#35452d', '#3f3320'][(i * 3 + 1) % 4]; return ( ); })} ); }; const ListingPaper: React.FC = () => { const t = useT(); const land = back(ramp(t, E('listing') - 0.05, E('listing') + 0.14)); const stamp = easeIn(ramp(t, E('cozy') - 0.1, E('cozy'))); return ( <>

{TXT.listing}

{t >= E('cozy') - 0.1 ?

{TXT.listingWord}

: null}

); }; const Closet: React.FC = () => { const t = useT(); const open = easeInOut(ramp(t, E('closet') - 0.02, E('closet') + 0.3)); const puff = ramp(t, E('stove') - 0.05, E('stove') + 0.7); return ( <> {Array.from({ length: 13 }, (_, i) => )} {/* the room behind the door, all of it */} {[214, 262, 310, 358, 406].map((x) => )} {/* the coat, on the only hook */} {/* the stove, which is also the kitchen */} {[272, 380].map((x) => )} {puff > 0 ? [0, 1, 2, 3].map((i) => { const u = clamp(puff * 1.3 - i * 0.12); return ; }) : null} {/* the door swings open on its left hinge */}

{TXT.plaque}

); }; const SCALES = Array.from({ length: 110 }, (_, i) => ({ x: (i % 10) * 66 + (Math.floor(i / 10) % 2 ? 33 : 0) - 10, y: Math.floor(i / 10) * 62 - 10 })); const Eye: React.FC = () => { const t = useT(); const open = easeOut(ramp(t, E('beast') - 0.04, E('beast') + 0.32)); const blink = t > E('woke') + 0.1 && t < E('woke') + 0.24 ? 0.1 : 1; const board = back(ramp(t, E('three') - 0.28, E('three') + 0.05)); const down = ramp(t, E('three') - 0.15, E('three') + 0.1) * (1 - ramp(t, E('refs') + 0.3, E('refs') + 0.5)); const lookX = Math.sin(t * 1.3) * 16; const ey = lerp(250, 158, board > 0 ? ramp(board, 0, 1) : 0); const ry = 98 * open * blink; return ( <> {SCALES.map((s, i) => )} {ry > 3 ? : } {ry > 12 ? : null} {/* the monocle: this monster reads the small print */} {board > 0 ? (

{TXT.clipboard}

{[0, 1, 2].map((i) => { const on = t >= E('three') + 0.1 + i * 0.18; return

{i + 1}.

; })}

) : null} ); }; const DROPS = Array.from({ length: 24 }, (_, i) => ({ x: hash(i + 1100) * 600, ph: hash(i + 1200), sp: 0.5 + hash(i + 1300) * 0.7, r: 5 + hash(i + 1400) * 9 })); const LANCE = Array.from({ length: 44 }, (_, i) => ({ x: hash(i + 1500) * 760, ph: hash(i + 1600) * 700, sp: 800 + hash(i + 1700) * 500 })); const StormSea: React.FC = () => { const t = useT(); const pitch = Math.sin(t * 1.9) * 18; const fl = flash(t); const f0 = E('faster') - 0.15; const cutter = ramp(t, f0, E('signed') + 0.55); const cx = lerp(-240, 860, cutter); const pen = cutter > 0 && cutter < 1; const swamp = easeIn(ramp(t, E('signed') + 0.15, E('signed') + 0.6)); return ( <> {fl > 0.02 ? : null} {fl > 0.15 ? : null} {pen ? ( ) : null} {LANCE.map((l, i) => { const y = ((l.ph + t * l.sp) % 760) - 80; return ; })} {/* the sea comes over the glass */} {swamp > 0 ? : null} {pen ?

{TXT.pennant}

: null} ); }; const Lamp: React.FC = () => { const t = useT(); const glow = 0.82 + 0.1 * Math.sin(t * 11) * Math.sin(t * 3.7); const rain = 1 - ramp(t, E('turn'), E('lamppost')); const mothA = t * 4.2; return ( {Array.from({ length: 9 }, (_, i) => )} {/* the sign, tied to the post */} {rain > 0 ? LANCE.slice(0, 22).map((l, i) => { const y = ((l.ph + t * l.sp * 0.7) % 760) - 80; return ; }) : null} ); }; const LampWords: React.FC = () => { const t = useT(); return (

{TXT.sign}

{TXT.phone}

); }; const TABS = Array.from({ length: 7 }, (_, i) => i); const SignClose: React.FC = () => { const t = useT(); const z = easeOut(ramp(t, E('nolisting'), E('nolisting') + 0.35)); const under = ramp(t, E('number'), E('number') + 0.3); const tear = t - E('phone'); return ( <>

{TXT.sign}

{TXT.call}

0 ? XRED : INK_D, marginTop: 2 }}> {TXT.phone} {under > 0 ?

: null}

{/* the tear-off tabs along the bottom edge */}

{TABS.map((i) => { const off = i === 3 && tear > 0; const fall = off ? easeIn(ramp(tear, 0, 0.75)) : 0; return

{TXT.phone}

; })}

); }; const Lock: React.FC = () => { const t = useT(); const insert = easeOut(ramp(t, E('inside'), E('inside') + 0.34)); const turn = easeInOut(ramp(t, E('key') - 0.02, E('key') + 0.26)); const seam = ramp(t, E('key') + 0.2, E('key') + 0.5); return ( {[0, 150, 300, 450].map((x) => )} {[[232, 172], [368, 172], [232, 448], [368, 448]].map(([x, y]) => )} {/* the key comes straight at you, then turns */} ); }; const SOFA_ROOM: React.FC<{ x: number; y: number }> = ({ x, y }) => ( {[-92, 92].map((p) => )} {/* the captain's hat, on the good sofa */} ); const DUST = Array.from({ length: 22 }, (_, i) => ({ x: 40 + hash(i + 2100) * 520, sp: 160 + hash(i + 2200) * 240, r: 2 + hash(i + 2300) * 4.5 })); const Room: React.FC = () => { const t = useT(); const sing = ramp(t, E('sings') - 0.1, E('sings') + 0.2); const dusk = ramp(t, E('radiator'), E('night') + 0.2); const s = stomp(t); const swing = Math.sin(t * 2.2) * (3 + (t > E('neighbor') ? 9 : 0)); const buzz = sing * Math.sin(t * 48) * 1.4; const sinceStomp = t >= E('neighbor') + 0.4 ? (t - E('neighbor') - 0.4) % 1.05 : 9; return ( {Array.from({ length: 14 }, (_, i) => )} {/* the window, and the night through it */} 0.5 ? '#16213f' : '#6d7fb0'} stroke={INK_D} strokeWidth={8} /> {[[92, 110], [130, 96], [108, 158], [200, 200], [152, 176]].map(([x, y], i) => )} {[-10, 110, 240, 380, 510].map((x) => )} {/* the radiator, singing */} {Array.from({ length: 7 }, (_, i) => )} {sing > 0 ? [0, 1, 2, 3, 4].map((i) => { const u = (t * 0.6 + i * 0.2) % 1; return ; }) : null} {/* the lamp on its wire */} {/* what the neighbor does to the ceiling */} {sinceStomp < 0.9 ? DUST.map((d, i) => { const y = -10 + d.sp * sinceStomp + 220 * sinceStomp * sinceStomp; return ; }) : null} {t >= E('neighbor') ? : null} ); }; /** What the glass shows, in story order. Each change is a quick swing of the spyglass. */ const VIEWS: [() => number, React.FC][] = [ [() => -1, SeaSearch], [() => E('cove') - 0.05, HomeShore], [() => E('viewing') - 0.05, Hallway], [() => E('listing') - 0.1, ListingPaper], [() => E('closet') - 0.1, Closet], [() => E('beast') - 0.3, Eye], [() => E('low'), StormSea], [() => E('turn') - 0.05, () => <>], [() => E('nolisting') - 0.05, SignClose], [() => E('inside') - 0.15, Lock], [() => E('radiator') - 0.12, Room], ]; const WHIP = 0.2; const glassBlur = (t: number) => { const first = 14 * (1 - ramp(t, E('glass') + 0.05, E('glass') + 0.8)); const turn = t >= E('turn') - 0.05 && t < E('sign') + 0.2 ? 20 * (1 - easeInOut(ramp(t, E('swing'), E('sign') + 0.02))) : 0; return Math.max(t < E('glass') + 0.9 ? first : 0, turn); }; const Glass: React.FC = () => { const t = useT(); let idx = 0; VIEWS.forEach(([at], i) => { if (t >= at()) idx = i; }); const local = t - VIEWS[idx][0](); const k = easeOut(ramp(local, 0, WHIP)); const Now = VIEWS[idx][1], Was = idx > 0 ? VIEWS[idx - 1][1] : null; const moving = k < 1; const blur = glassBlur(t); const drops = stormK(t) * (1 - ramp(t, E('swing'), E('sign'))); return (

0.1 ? `blur(${blur.toFixed(2)}px)` : undefined }}> {moving && Was ?

: null}

{drops > 0.02 ? ( ) : null} {/* the lens itself: dark at the rim, a glare across the top */}

); }; /* Where the spyglass sits. It swings in, swings forward for the sign, swings away for the dig, and comes back. */ type LensPos = { x: number; y: number; r: number }; const HOME: LensPos = { x: 770, y: 372, r: 248 }, OFF: LensPos = { x: 1360, y: -230, r: 248 }, FOCUS: LensPos = { x: 690, y: 500, r: 306 }; const LENS: { at: number; d: number; to: LensPos; over?: boolean }[] = [ { at: E('glass'), d: 0.5, to: HOME, over: true }, { at: E('swing'), d: 0.62, to: FOCUS }, { at: E('phone') + 0.3, d: 0.42, to: HOME }, { at: E('dig') - 0.02, d: 0.34, to: OFF }, { at: E('inside') - 0.1, d: 0.42, to: HOME, over: true }, ]; const lensAt = (t: number): LensPos => { let v = OFF; for (const k of LENS) { if (t < k.at) break; const u = ramp(t, k.at, k.at + k.d); const q = k.over ? back(u) : easeInOut(u); v = { x: lerp(v.x, k.to.x, q), y: lerp(v.y, k.to.y, q), r: lerp(v.r, k.to.r, q) }; } const st = stormK(t); return { x: v.x + Math.sin(t * 1.7) * st * 12, y: v.y + Math.sin(t * 2.3) * st * 9 + Math.sin(t * 0.9) * 3, r: v.r }; }; const Spyglass: React.FC = () => { const t = useT(); const { x, y, r } = lensAt(t); if (x > 1320) return null; const R = r + 34; const dim = 1 - 0.5 * stormK(t) * (1 - ramp(t, E('swing'), E('sign'))); const twist = (t - E('glass')) * 8 + ramp(t, E('swing'), E('sign')) * 180; const tube = -38; return (

{/* the tube runs up and off the chart */}

); }; /* ---------- light on the table ---------- */ const RAIN = Array.from({ length: 80 }, (_, i) => ({ x: hash(i + 15) * 1300 - 100, sp: 1100 + hash(i + 87) * 600, ph: hash(i + 160) * 2300, l: 60 + hash(i + 230) * 120, o: 0.25 + hash(i + 310) * 0.55 })); const SPLASH = Array.from({ length: 34 }, (_, i) => ({ x: 60 + hash(i + 2500) * 960, y: 450 + hash(i + 2600) * 840, ph: hash(i + 2700), sp: 1.4 + hash(i + 2800) * 1.1 })); const Light: React.FC = () => { const t = useT(); const cam = camAt(t); const st = stormK(t), fl = flash(t), ng = nightK(t); const lx = 50 + Math.sin(t * 0.9) * 9 + st * 7 * Math.sin(t * 2.1), ly = 42 + Math.cos(t * 0.6) * 4; const dark = 0.6 * st * (1 - Math.min(0.75, fl * 0.8)); const sun = ramp(t, E('nolisting'), E('nolisting') + 0.5) * (1 - ramp(t, E('number') + 0.3, E('number') + 1.0)); const homeX = cam.s * AT.x[0] + cam.tx, homeY = cam.s * (AT.x[1] - 30) + cam.ty; return ( <> {st > 0.01 ? : null} {sun > 0.01 ? : null} {ng > 0.01 ? : null} {st > 0.01 ? ( ) : null} ); }; /* ---------- captions: the scroll ---------- */ const PER_ROW = 29; const CHUNKS = buildChunks(PER_ROW, 2); const SX0 = 60, SX1 = 950, SY0 = 1294, SY1 = 1478; const Captions: React.FC = () => { const t = useT(); const open = easeOut(ramp(t, 0.05, 0.5)); const cx = (SX0 + SX1) / 2, half = ((SX1 - SX0) / 2 - 22) * lerp(0.1, 1, open); const idx = CHUNKS.reduce((a, c, i) => (t >= c.t0 - 0.06 ? i : a), -1); const c = idx >= 0 ? CHUNKS[idx] : null; const quiet = t >= E('dig') + 0.05 && t < E('inside') - 0.04; const hot = (w: { w: string; t0: number; t1: number }) => (t >= w.t0 - 0.03 && t < w.t1 + 0.08) || (t >= E('keyword') && w.w.toUpperCase().replace(/[^A-Z]/g, '') === KEYWORD); return ( <> {/* the paper, between its rollers */}

{open >= 1 ? (

{quiet ? (

{TXT.voiceless}

) : c ? ( c.rows.map((row, ri) => { const ids = Array.from(new Set(row.map.filter((m) => m >= 0))); return (

{ids.map((wi) => { const w = c.words[wi]; const k = ramp(t, w.t0 - 0.05, w.t0 + 0.05); return 0 ? 'visible' : 'hidden' }}>{w.w}; })}

); }) ) : null}

) : null}

{[cx - half - 22, cx + half - 22].map((x, i) => (

))} ); }; /* ---------- the film ---------- */ export const TreasureMap: React.FC = () => ( ); /** Moves with the chart. Used twice: once for the chart, once above the light for the few things that stay lit at night. */ const CamLayer: React.FC<{ children: React.ReactNode }> = ({ children }) => { const t = useT(); const cam = camAt(t); return (

{children}

); }; const Stage: React.FC = () => { const t = useT(); const roll = Unroll(t); const [xx, xy] = AT.x; const strike = easeOut(ramp(t, E('closet') + 0.12, E('closet') + 0.34)); return (

{TXT.seaA}

{TXT.hills}

{strike > 0 ? : null}

{roll < 1920 ?

: null} {/* what stays lit after dark: the window, the names around it, and at the end the cartouche, as if the lantern came over */} {t >= E('key') ? ( {t >= E('keyword') - 0.05 ?

: null} {TXT.pest} ) : null} ); }; ``` ## 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 sea captain at his own table, low and gravelly and warm, telling a hunt for a first apartment as the great voyage of his life. He's completely serious. He's a storyteller, never a cartoon pirate: no growls and no "arr", and "ye" appears once in the whole film, in the first line. **When to use it:** on every line except the dig, which is voiceless. Slow, heavy voices run long, so speed the takes up until a short line lands in 2 to 3 s. Give room to "Someone faster signed", the coldest line, and to "One phone number", where each short sentence should fall like a footstep. Add a small wooden cabin to it with a very short echo and a little warmth around 160 Hz, and 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 | |-------|--------|-------------|---------------| | chart unroll | 1 s | a stiff old parchment map unrolled across a wooden table, a dry papery rush ending in a soft slap | `on`, the first frame | | brass spyglass | 0.8 s | a brass telescope pulled open, two small smooth metal clicks, close and dry | `glass`, and bigger on `swing` | | quill | 1 s | a quill pen scratching quickly on thick paper, dry and close | every name and landmark that inks itself in, and quietly under the trail as it walks | | crowd in a hallway | 3 s | many people in heavy boots shuffling and murmuring in a narrow wooden hallway, no clear words | `twelve` to `hallway` | | rubber stamp | 0.6 s | a wooden stamp pressed hard onto paper on a table, a short dull thud | `cozy` | | door and stove | 1.5 s | a small wooden door creaks open on a cramped room, a tiny iron stove door clinks, close | `closet`, with a soft puff of steam on `stove` | | monster wakes | 2.5 s | a huge sea creature stirring under water, a long low wet groan and a slow surge, deep and dark, not a roar | `beast` | | pen ticks | 0.6 s | three short pen ticks on a clipboard, dry and small | `three`, one per number | | thunder | 3 s | distant heavy thunder over open sea, low and rolling, no crack | `storm` | | fast boat | 1 s | a small sailing boat rushing past close by, a quick hiss of water and a snap of canvas | `faster` | | wet pen | 0.7 s | a quick signature scratched with a wet pen, then a small blot | `signed` | | lamp and quiet | 1.5 s | a gas street lamp hissing softly, one drop of water falling, very quiet | `sign`, when the glass snaps sharp | | paper tear | 0.5 s | one small strip of paper torn off a notice, short and crisp | `phone` | | fresh ink run | 2.4 s | a dip pen tapping a fast run of dots across paper, quick even taps, close | `nolisting` to `number` | | X slam | 0.7 s | a heavy wooden mallet hit once on a table, deep and solid, warm and dark | `number`, and the table jumps | | spade | 0.5 s | a steel spade cutting into packed earth, a short dry chop with a small scatter of dirt | `chop1`, `chop2`, `chop3` | | chest thud | 1.5 s | a heavy wooden chest dropped on hard ground, a deep solid thud, small objects rattle, warm and dark | `thud`, the loudest thing in the film | | chest lid | 1 s | old iron hinges on a wooden chest opening slowly, a low creak | `lid` | | gleam | 1.5 s | one soft warm metallic shimmer, low and quiet, not sparkly | `gleam`, very low | | key | 0.6 s | a heavy old brass key turning in a door lock, two solid clicks | `key` | | singing radiator | 4 s | an old iron radiator ticking and whistling a wavering low note, almost a tune, warm | `sings`, through to the end | | footsteps above | 0.6 s | one heavy footstep on floorboards heard from the room below, dull thud, a little dust falling | `neighbor`, then about once a second, in time with `stomp` | | waves | 10 s | sea waves against a wooden hull heard from inside a cabin, slow and low, no gulls | a bed throughout, rising in the storm | | creaking hull | 10 s | an old wooden ship creaking slowly at sea from inside a cabin, ropes and timber, no voices, no music | a low bed throughout, and what's left at the low point | | rain | 10 s | heavy rain on a wooden deck above a cabin, steady and low, no thunder | `low` to `phone`, peaking at `signed` | - **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:** "A warm sea-shanty instrumental: a slow squeezebox over a bowed double bass, a low ship's drum on the beat, a plucked mandolin that comes in later, sparse at first, then a patient build that opens up into a full hearty swell, ending resolved, no vocals." **When it plays:** low and steady under the first lines, as if someone in the next cabin is playing. It drains to nothing over 0.7 s between `low` and `storm`, stays out through the low point so only waves, rain and the creaking hull remain, and comes back very low on the word "sign". It climbs through the fresh ink, is at its fullest on the voiceless dig, on a bar where the track opens up, and ducks right after the chest thud. It thins out to the squeezebox alone for the night, so the radiator can be heard, and rests under the last line. **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 full chart too early:** plan `AT` first. Ours needs room late in the film for the house, its name, the small monster and its name, on top of everything already there. - **Names colliding:** every name is placed by hand. A longer one runs into its neighbor, the old trail or the monster's neck, so check the last frame at full size. - **Names that lift off the paper:** `DRIP_SOURCES` and the red strike strokes don't follow the labels on their own. Move them together, or the ink runs from empty paper. - **A black low point:** the chart goes dark, but the rain, the drips and the wet patches keep it moving, and the glass stays teal when the sea comes over it. It's never black. - **Names lost at night:** the night overlay dims all the ink. Anything that must read after dark goes in the second `CamLayer`, above `Light`, which is also why the cartouche is drawn a second time for the ending. - **The glass running past the safe area:** at `HOME` its top sits above y = 250, so put must-read text in the lower two-thirds of a scene. Small jokes can sit higher. - **A push that hides a name:** a camera push can slide a low name under the scroll. Check the frames where each name first appears. - **Words look cut off on a contact sheet:** that's words arriving. Watch the video to check that each chunk finishes well before the next starts. - **A map that wants a real place:** invent every name. A real city or a real landlord turns the joke into a claim. | 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.