// Solari · Landing · Animated "Tonight" loop
// Story: Today hero (salmon) → Start cooking → Brief → Mise en place → Bake (timer) → Done + voice note
// Self-contained; relies on PhoneShell from landing-plan-anim.jsx and window.LandingTabBar.
const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;
// ─── Tokens ────────────────────────────────────────────────────
const TC = {
ink: 'var(--ink-900, #1f1f1c)',
ink2: 'var(--ink-700, #3b3b35)',
ink3: 'var(--ink-500, #76736a)',
ink4: 'var(--ink-400, #a39f93)',
paper: 'var(--paper-50, #faf6e9)',
paper2: 'var(--paper-100, #f3ecd6)',
paper3: 'var(--paper-200, #e8dfcc)',
paper4: 'var(--paper-300, #d8cfb8)',
sage: 'var(--sage-700, #4f7a3a)',
sageWash: 'var(--sage-100, #e8efd9)',
amber: 'var(--amber-500, #e29831)',
amberD: 'var(--amber-700, #c77a1f)',
amberS: 'var(--amber-100, #f5e3c2)',
clay: 'var(--terra-600, #b8542e)',
dark: '#1f1f1c',
};
// ─── Choreography ──────────────────────────────────────────────
const TONIGHT_SEQUENCE = [
{ t: 0, state: 'today-rest', caption: 'It’s 5:18. You haven’t thought about dinner.' },
{ t: 2400, state: 'today-tap-cook', caption: 'Solari already has a plan.' },
{ t: 4200, state: 'brief-show', caption: 'The brief. Everything in one glance.' },
{ t: 7600, state: 'brief-tap-begin', caption: 'Begin · the screen stays awake.' },
{ t: 9000, state: 'mise', caption: 'Set yourself up. Three things ready.' },
{ t: 12600, state: 'bake-tick', caption: 'In the oven. Solari watches the clock.' },
{ t: 16400, state: 'bake-meanwhile', caption: 'Boil water. Set the table. Pour something.' },
{ t: 19400, state: 'done-rest', caption: 'Plated in 26 minutes. Bon appétit.' },
{ t: 22000, state: 'done-record', caption: 'A thought from the cook. Saved for next time.' },
{ t: 24800, state: 'done-saved', caption: '“Double the recipe next time. Great leftovers to top a salad.”' },
];
const TONIGHT_LOOP = 28000;
const useChoreoT = (sequence, duration) => {
const [t, setT] = useStateT(0);
const startRef = useRefT(performance.now());
useEffectT(() => {
let raf;
const tick = (now) => { setT((now - startRef.current) % duration); raf = requestAnimationFrame(tick); };
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [duration]);
let current = sequence[0];
for (const ev of sequence) { if (ev.t <= t) current = ev; else break; }
return { t, state: current.state, caption: current.caption || '' };
};
// ─── Tiny glyphs ───────────────────────────────────────────────
const ChevR = ({ size = 13, color = 'currentColor' }) => (
);
const Bell = ({ size = 16, color = 'currentColor' }) => (
);
const Clock = ({ size = 11, color = 'currentColor' }) => (
);
const Mic = ({ size = 14, color = 'currentColor' }) => (
);
// ─── View 1 · Today (mirrors A-today TodayDefault) ─────────────
const TodayView = ({ tapping }) => (
{/* Header row */}
{/* Hero text */}
Tonight, the salmon.
Saved last Sunday. You have everything.
{/* Hero card */}
MON · DINNER
v3
Smith Family Salmon
30 min · serves 4 · everything's in the fridge
✦ Lily-approved · from Mike's mom
Recipe
Start cooking →
{tapping && (
)}
{/* Audible CTA */}
Need to call an audible?
{/* Header */}
‹ Tonight
THE BRIEF · BEFORE YOU START
30 min
{/* Title */}
TONIGHT
Smith family salmon.
30 min·serves 4·sheet-pan
{/* You need / tools */}
YOU NEED
4 · salmon fillets
2 · lemons
2 Tbsp · honey
3 · garlic
· olive oil, salt
+ parsley · half a bunch from Sun
TOOLS
· oven
· sheet pan
· small bowl
· microplane
{/* Lily's plate */}
LILY'S PLATE
Not eating salmon tonight. Pasta · butter · parm, separate.
{/* Begin button */}
Begin · screen stays awake
{tapping && (
)}
‹ Tonight
STEP 1 OF 5
0:02
{/* Progress dots */}
STEP 1 · MISE EN PLACE
Set yourself up.
{items.map((r, i) => {
const done = elapsed >= r.doneAt;
return (
{done ? '✓' : ''}
{r.q}
{r.n}
{r.s &&
{r.s}}
);
})}
WHILE YOU PREP
Oven on · 425°. ~7 min to preheat.
);
};
// ─── View 4 · Bake (timer) ─────────────────────────────────────
const BakeView = ({ t, baseT, showMeanwhile }) => {
const elapsed = Math.max(0, t - baseT);
// Tick the timer down from 8:00 over the dwell
const totalSec = Math.max(0, 480 - Math.floor(elapsed / 1000) * 12);
const mm = Math.floor(totalSec / 60);
const ss = String(totalSec % 60).padStart(2, '0');
const fillFrac = 1 - (totalSec / 480) * 0.55; // appears partially filled
const dashOffset = 276 * (1 - fillFrac);
return (
‹ Tonight
STEP 4 · BAKE
0:12 in
{[0,1,2,3,4].map(i => (
))}
{/* Timer ring */}
TIME LEFT
{mm}:{ss}
of 14 min total
{/* Meanwhile / Watch-for */}
MEANWHILE
Boil water for Lily's pasta. Set the table. Pour yourself something.
WATCH FOR
Edges browning. Pull at 12 min if it looks done.
);
};
// ─── View 5 · Done · chef notes + voice ────────────────────────
const DoneView = ({ recording, showSaved, t, baseT }) => {
const elapsed = Math.max(0, t - baseT);
const bars = Array.from({ length: 20 }, (_, i) => {
const phase = (elapsed / 80) + i * 0.6;
return recording ? (5 + Math.abs(Math.sin(phase)) * 18) : 4;
});
return (
‹ Tonight
STEP 5 · DONE
0:26 total
{[0,1,2,3,4].map(i => (
))}
YOU DID IT
Bon appétit.
26 minutes, start to plate.
{/* Chef's notes card */}
CHEF'S NOTES · FOR NEXT TIME
{/* Mic / waveform / saved transcript */}
{recording ? (
{bars.map((h, i) => (
))}
) : showSaved ? (
"Double the recipe next time as these would be great leftovers to top a salad."
SAVED TO RECIPE · v3 → v4
) : (
Hold the mic. Tell us how it went.
)}
{recording ? '0:08' : ''}
);
};
// ─── Main ──────────────────────────────────────────────────────
const TonightAnimatedPhone = () => {
const { t, state, caption } = useChoreoT(TONIGHT_SEQUENCE, TONIGHT_LOOP);
// View routing
let view = 'today';
if (state.startsWith('today')) view = 'today';
else if (state.startsWith('brief')) view = 'brief';
else if (state === 'mise') view = 'mise';
else if (state.startsWith('bake')) view = 'bake';
else if (state.startsWith('done')) view = 'done';
// Base times for sub-animations
const miseBase = TONIGHT_SEQUENCE.find(e => e.state === 'mise')?.t ?? 0;
const bakeBase = TONIGHT_SEQUENCE.find(e => e.state === 'bake-tick')?.t ?? 0;
const doneBase = TONIGHT_SEQUENCE.find(e => e.state === 'done-record')?.t ?? 0;
// Tab-bar transition pulse (today→cook means we leave the tab bar, fades w/ view)
const tabActive = view === 'today' ? 'today' : null;
// Caption gradient base color depends on theme
const isDark = view !== 'today';
return (
{view === 'today' && }
{view === 'brief' && }
{view === 'mise' && }
{view === 'bake' && }
{view === 'done' && }
{/* Tab bar (only on Today; cook mode is full-screen) */}
{view === 'today' && window.LandingTabBar && }
{/* Caption — lifted out of the phone, editorial italic */}
{caption}
);
};
// ─── Mount ─────────────────────────────────────────────────────
const mountTonightPhone = () => {
const el = document.getElementById('tonight-anim-mount');
if (!el) return;
ReactDOM.createRoot(el).render();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', mountTonightPhone);
} else {
mountTonightPhone();
}