); } function AmbientDark() { const { localTime } = useSprite(); const drift = Math.sin(localTime * 0.4) * 3; return (

); } // Grid of vertical rule lines — editorial framing device. function RuleLines({ color = "rgba(85,89,94,0.12)", count = 12 }) { const lines = []; for (let i = 1; i < count; i++) { lines.push(

); } return <>{lines}; } // Spec label (monospace, small caps, tracked) function SpecLabel({ children, color = BRAND.inkSoft, size = 13 }) { return ( {children} ); } // Thin corner ticks — editorial frame marks function CornerTicks({ color = "rgba(85,89,94,0.4)", inset = 40, len = 28 }) { const tick = { position:'absolute', background:color }; return ( <> {/* TL */}

{/* TR */}

{/* BL */}

{/* BR */}

); } // Running header — always visible faint label at top function RunningHeader({ label = "RAINWATER", chapter, idx, total, dark=false }) { const c = dark ? BRAND.darkMute : BRAND.inkMute; return (

◇ {label} {chapter} {String(idx).padStart(2,'0')} / {String(total).padStart(2,'0')}

); } // Bottom timecode strip function Timecode({ dark=false }) { const { time } = useTimeline(); const c = dark ? BRAND.darkMute : BRAND.inkMute; const mm = String(Math.floor(time / 60)).padStart(2,'0'); const ss = String(Math.floor(time % 60)).padStart(2,'0'); const ff = String(Math.floor((time*30)%30)).padStart(2,'0'); return (

T — {mm}:{ss}:{ff} rainwater.run

); } // Kinetic reveal line — word-by-word reveal with gentle rise function KineticLine({ words, startDelay = 0, perWord = 0.12, style = {} }) { const { localTime } = useSprite(); return (

{words.map((w, i) => { const t = clamp((localTime - (startDelay + i*perWord)) / 0.5, 0, 1); const eased = Easing.easeOutCubic(t); const isLast = i === words.length - 1; return ( {w} {!isLast && {' '}} ); })}

); } // Counter that tweens from 0 → value function CountUp({ to, start=0, dur=1.2, prefix='', suffix='', decimals=0, style={} }) { const { localTime } = useSprite(); const t = Easing.easeOutCubic(clamp((localTime - start) / dur, 0, 1)); const v = to * t; const formatted = decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString(); return {prefix}{formatted}{suffix}; } // ════════════════════════════════════════════════════════════════════════════ // SCENE 1 — COLD OPEN (0.0 – 9.0s) // "An agent that watches the market so you don't have to." // ════════════════════════════════════════════════════════════════════════════ function Scene1_ColdOpen() { const { localTime } = useSprite(); return (

{/* Center column */}

For savers, not traders

◇ Rainwater · rainwater.run

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 2 — THE TIME PROBLEM (9.0 – 22.0s) // Bloomberg-quiet: opportunity cost of staring at charts. // ════════════════════════════════════════════════════════════════════════════ function Scene2_TimeProblem() { const { localTime } = useSprite(); // Clock hand rotation const angle = localTime * 60; // slow sweep return (

{/* Left: clock */}

{/* outer ring */}

{/* ticks */} {Array.from({length:60}).map((_,i)=>{ const a = (i/60)*360; const major = i % 5 === 0; return (

); })} {/* minute hand */}

{/* hour hand */}

{/* Right: copy — scaled up for the average saver */}

01 — A better way to grow your money

Saving for a home, a car, or retirement shouldn't mean settling for 4%. MISTER goes to work while you do.

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 3 — WHAT RAINWATER IS (22.0 – 36.0s) // MISTER runs the logic on QQQ options. You copy. // ════════════════════════════════════════════════════════════════════════════ function Scene3_WhatItIs() { const { localTime } = useSprite(); return (

{/* Big serif statement */}

02 — Definition

{/* Three spec cards — large, fill the lower half */}

{[ {k:"WHAT IT TRADES", v:"QQQ", sub:"The biggest tech stocks, in one ticker", foot:"◇ the stuff you already know"}, {k:"WHO'S DRIVING", v:"MISTER", sub:"The operator reading the market every second", foot:"◇ logic, not emotion"}, {k:"WHAT YOU DO", v:"Nothing", sub:"Trades show up in your own account", foot:"◇ you keep your money, we send signals"}, ].map((c,i)=>{ const t = clamp((localTime - (3.0 + i*0.25)) / 0.7, 0, 1); const eased = Easing.easeOutCubic(t); return (

{/* corner index */}

0{i+1} / 03

{c.k}

{c.v}

{c.sub}

{c.foot}

); })}

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 4 — HOW IT WORKS, 3 STEPS (36.0 – 58.0s) // Sign in → Connect broker → Trades copy // ════════════════════════════════════════════════════════════════════════════ function Scene4_ThreeSteps() { const { localTime } = useSprite(); const steps = [ { n:"01", label:"SIGN UP", head:"Join the club.", sub:"Sign in with Discord. Takes 10 seconds.", t0:0.3 }, { n:"02", label:"LINK YOUR ACCOUNT", head:"Connect your brokerage.", sub:"Your money stays in your account. We never hold it.", t0:2.2 }, { n:"03", label:"SIT BACK", head:"MISTER does the work.", sub:"When he buys, you buy. Same trade, same second.", t0:4.1 }, ]; return (

03 — Three steps

{/* Horizontal step ladder */}

{steps.map((s, i) => { const t = clamp((localTime - s.t0) / 0.7, 0, 1); const eased = Easing.easeOutCubic(t); return (

{s.n}

{s.label}

{s.head}

{s.sub}

{i === 0 ? "FREE TO JOIN" : i === 1 ? "YOUR MONEY, YOUR BANK" : "AUTOMATIC"}

); })}

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 5 — YOUR FUNDS, YOUR BROKER (58.0 – 78.0s) // No custody. No lock-up. Monthly. Cancel anytime. // ════════════════════════════════════════════════════════════════════════════ function Scene5_NoCustody() { const { localTime } = useSprite(); // Animate signal dots fanning from center to three brokers return (

{/* Headline top-left */}

04 — We never touch your money

{/* Diagram: large, centered lane */}

{/* Three guarantees bar — larger */}

{[ ["YOUR BANK HOLDS IT", "We never touch your money"], ["CANCEL ANYTIME", "Monthly. No contract."], ["$99 / MONTH", "One price. That's it."], ].map(([k,v], i) => { const t = clamp((localTime - (6.5 + i*0.25)) / 0.5, 0, 1); const eased = Easing.easeOutCubic(t); return (

{k}

{v}

); })}

); } function FundsDiagram({ localTime }) { // Single large lane: MISTER → secure link → PUBLIC const active = clamp((localTime - 2.8) / 0.8, 0, 1); const p = clamp((localTime - 3.2) / 1.8, 0, 1); const pEase = Easing.easeInOutCubic(p); const W = 1680, H = 340; const laneStart = 320, laneEnd = W - 320; const midX = (laneStart + laneEnd) / 2; const y = H / 2; const px = laneStart + (laneEnd - laneStart) * pEase; return (

{/* Left node: MISTER */}

◇ MISTER

sends the trade signal

{/* Middle pill */}

secure link

{/* Right node: PUBLIC */}

PUBLIC

your account · your money

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 6 — SUB-SECOND EXECUTION (78.0 – 98.0s) // Everyone fills at the same time. Terminal vibe. // ════════════════════════════════════════════════════════════════════════════ function Scene6_Execution() { const { localTime } = useSprite(); return (

{/* Big mono latency readout */}

05 — Hands-free trading

{/* Terminal log */}

); } function ExecutionLog({ localTime }) { const t0 = 2.5; const rows = [ { d:0.00, who:"MISTER", msg:"Spotted a move in QQQ options · BUYING" }, { d:0.12, who:"AUTO-TRADE", msg:"Executing the trade for you · no action needed" }, { d:0.28, who:"BROKER", msg:"Order placed in your account automatically" }, { d:0.51, who:"FILLED", msg:"Your account → bought at $1.47 · hands-free" , g:true}, { d:0.58, who:"FILLED", msg:"Another user → bought at $1.47" , g:true}, { d:0.71, who:"FILLED", msg:"Another user → bought at $1.47" , g:true}, { d:0.83, who:"DONE", msg:"Everyone is in · you didn't lift a finger"}, ]; return (

◇ LIVE TRADE FEED 4:31 PM ET

{rows.map((r, i) => { const appear = clamp((localTime - (t0 + r.d*1.5)) / 0.25, 0, 1); return (

+{r.d.toFixed(2)}s {r.who} {r.msg}

); })}

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 7 — BACKTEST vs FORWARD TEST (98.0 – 122.0s) // Two equity curves, side by side. Results match. // ════════════════════════════════════════════════════════════════════════════ function Scene7_BacktestVsForward() { const { localTime } = useSprite(); return (

06 — Does it actually work?

{/* Two panels */}

); } function EquityPanel({ title, subtitle, localTime, seed }) { // Deterministic wiggly-but-up equity curve const N = 80; const points = React.useMemo(() => { const pts = []; let v = 0; for (let i = 0; i < N; i++) { // slight randomness by seed but monotonic-ish const noise = Math.sin(i * 0.5 + seed * 2.1) * 0.6 + Math.sin(i * 1.3 + seed) * 0.3; v += 0.35 + noise * 0.18; pts.push(Math.max(0, v)); } const max = Math.max(...pts); return pts.map((p,i) => [i/(N-1), p/max]); }, [seed]); const W = 560, H = 280, pad = 16; const reveal = Easing.easeOutCubic(clamp(localTime / 1.8, 0, 1)); const cutoff = Math.floor(points.length * reveal); const path = points.slice(0, cutoff+1).map(([x,y], i) => { const X = pad + x * (W - pad*2); const Y = H - pad - y * (H - pad*2); return `${i===0?'M':'L'}${X.toFixed(1)},${Y.toFixed(1)}`; }).join(' '); const areaPath = path + ` L${(pad + ((cutoff)/(N-1))*(W-pad*2)).toFixed(1)},${H-pad} L${pad},${H-pad} Z`; return (

{title}

{subtitle}

{/* metric strip */}

{title === "PAST" ? ( <> }/> %}/> }/> ) : ( <> %}/> }/> )}

); } function Metric({ label, value }) { return (

{label}

{value}

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 8 — LIVE TRACK RECORD (122.0 – 148.0s) // 294 trades · 77.2% WR · 3.47 PF · +$24,758 // ════════════════════════════════════════════════════════════════════════════ function Scene8_TrackRecord() { const { localTime } = useSprite(); return (

{/* Label + benchmark */}

07 — What MISTER made so far

{/* Left: headline P&L */}

Money made

across 294 completed trades.

Every single trade is logged and posted daily. These numbers come straight from the brokerage — not a slide.

{/* Right: stat grid */}

{[ {k:"WIN RATE", v:<>%, sub:"227 wins · 67 losses"}, {k:"PROFIT RATIO", v:, sub:"wins vs. losses"}, {k:"BIGGEST DIP", v:<>$, sub:"worst stretch"}, {k:"TRADES", v:, sub:"finished so far"}, ].map((s,i) => { const t = clamp((localTime - (1.3 + i*0.15)) / 0.5, 0, 1); const eased = Easing.easeOutCubic(t); return (

{s.k}

{s.v}

{s.sub}

); })}

{/* Small print */}

◇ updated daily from the brokerage refreshed · 16:15 ET

); } // ════════════════════════════════════════════════════════════════════════════ // SCENE 9 — PRICING & CTA (148.0 – 180.0s) // Free Intel via Discord → Copy Trade $99/mo // ════════════════════════════════════════════════════════════════════════════ function Scene9_CTA() { const { localTime } = useSprite(); return (

{/* Headline */}

08 — Two ways to start

{/* Two plan cards */}

); } function PlanCard({ tag, price, cadence, title, body, cta, appearAt, localTime, dark }) { const t = clamp((localTime - appearAt) / 0.8, 0, 1); const eased = Easing.easeOutCubic(t); const bg = dark ? BRAND.ink : 'rgba(255,255,255,0.6)'; const fg = dark ? BRAND.pearl : BRAND.ink; const mute = dark ? 'rgba(244,242,240,0.6)' : BRAND.inkSoft; const border = dark ? 'rgba(244,242,240,0.16)' : BRAND.accentSoft; return (

{tag} ◇

{price}

{cadence}

{title}

{body}

→ {cta} {dark ? "YOUR MONEY STAYS WITH YOUR BANK" : "NO CREDIT CARD"}

); } // ════════════════════════════════════════════════════════════════════════════ // DISCLAIMER STRIP — always visible bottom, very subtle // ════════════════════════════════════════════════════════════════════════════ // (Disclaimer baked into final scene to stay honest.) // ─── Export scenes map ────────────────────────────────────────────────────── Object.assign(window, { BRAND, FONTS, Scene1_ColdOpen, Scene2_TimeProblem, Scene3_WhatItIs, Scene4_ThreeSteps, Scene5_NoCustody, Scene6_Execution, Scene7_BacktestVsForward, Scene8_TrackRecord, Scene9_CTA, });