// Solari · Landing · Animated Plan loop (self-contained) // Empty week → tiles populate → tap Wed → audible sheet → swap → restart. // No external React component dependencies. Reads CSS vars from the landing page. const { useState, useEffect, useRef, useMemo } = React; // ─── Animation timeline ──────────────────────────────────────── const PLAN_SEQUENCE = [ { t: 0, state: 'empty', caption: 'A blank week.' }, { t: 1100, state: 'fill-1', caption: 'Solari drafts a week\u2026' }, { t: 1450, state: 'fill-2' }, { t: 1800, state: 'fill-3' }, { t: 2150, state: 'fill-4' }, { t: 2500, state: 'fill-5' }, { t: 2850, state: 'fill-6' }, { t: 3300, state: 'full', caption: 'Done. Seven nights, planned.' }, { t: 5000, state: 'tap-wed', caption: 'Not feeling salmon Wednesday?' }, { t: 5500, state: 'sheet-open', caption: 'Tap the night. Swap it.' }, { t: 7300, state: 'pick-pasta', caption: 'Pick the pantry meal.' }, { t: 8200, state: 'sheet-close', caption: 'Wednesday updated.' }, { t: 9200, state: 'rest', caption: 'Wednesday updated.' }, { t: 10800, state: 'drag-press', caption: 'Hold a meal to move it…' }, { t: 11400, state: 'drag-lift', caption: 'Hold a meal to move it…' }, { t: 12000, state: 'drag-move', caption: 'Drop it on another day to swap.' }, { t: 13400, state: 'drag-drop', caption: 'Drop it on another day to swap.' }, { t: 13900, state: 'drag-done', caption: 'Wednesday ↔ Thursday. Done.' }, ]; const LOOP_DURATION = 16500; const useChoreography = (sequence, duration) => { const [t, setT] = useState(0); const startRef = useRef(performance.now()); useEffect(() => { let raf; const tick = (now) => { const elapsed = (now - startRef.current) % duration; setT(elapsed); 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 || '' }; }; // ─── Color tokens (read from landing page CSS, with fallbacks) ── const C = { 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)', amberD: 'var(--amber-700, #c77a1f)', amberS: 'var(--amber-100, #f5e3c2)', clay: 'var(--terra-600, #b8542e)', moment: 'var(--terra-700, #9a3f24)', }; const TILE_TYPES = { cook: { word: 'Cook', bg: C.sage, fg: '#FAF6E9', tone: 'dark' }, batch: { word: 'Batch', bg: C.amberD, fg: '#FAF6E9', tone: 'dark' }, encore: { word: 'Repeat', bg: C.amberS, fg: C.amberD, tone: 'light' }, order: { word: 'Order In', bg: C.clay, fg: '#FAF6E9', tone: 'dark' }, out: { word: 'Going Out',bg: C.ink, fg: '#FAF6E9', tone: 'dark' }, easy: { word: 'Easy', bg: '#dde7c8', fg: C.sage, tone: 'light' }, moment: { word: 'Moment', bg: C.moment, fg: '#FAF6E9', tone: 'dark' }, }; const TypeTile = ({ kind = 'cook', size = 56 }) => { const s = TILE_TYPES[kind] || TILE_TYPES.cook; const isTwoWord = s.word.includes(' '); const radius = Math.max(6, Math.round(size * 0.22)); // Scale font to tile size; reference is size=56 → 15px (1-word) or 12px (2-word) const baseFs = isTwoWord ? 12 : (s.word.length >= 6 ? 13 : 15); const fs = Math.max(8, Math.round(baseFs * (size / 56))); return (
{isTwoWord ? s.word.split(' ').map((w, i) =>
{w}
) : s.word}
); }; // ─── The week being drafted ──────────────────────────────────── const WEEK = [ { day: 'SUN', date: '04', kind: 'batch', name: 'Sunday roast chicken', time: '40 min', sub: 'feeds Mon too' }, { day: 'MON', date: '05', kind: 'encore', name: 'Roast wraps', time: '10 min', sub: 'from Sunday' }, { day: 'TUE', date: '06', kind: 'cook', name: 'Cacio e pepe', time: '25 min', sub: 'pasta night' }, { day: 'WED', date: '07', kind: 'cook', name: 'Sheet-pan salmon', time: '30 min', sub: 'sage & lemon' }, { day: 'THU', date: '08', kind: 'easy', name: 'Stir-fry & rice', time: '20 min', sub: 'pantry meal' }, { day: 'FRI', date: '09', kind: 'order', name: 'Pizza night', time: '35 min', sub: 'the usual' }, { day: 'SAT', date: '10', kind: 'moment', name: 'Mom\u2019s birthday dinner', time: '7pm', sub: 'candles + cake' }, ]; const WED_SWAP = { kind: 'easy', name: 'Pasta with pantry pesto', time: '15 min', sub: 'fridge raid' }; // ─── Audible sheet options ───────────────────────────────────── const AUDIBLE_OPTIONS = [ { ic: 'simpler', t: 'Cook something else', s: 'browse a different recipe' }, { ic: 'batch', t: 'Eat the batch', s: 'Sunday\u2019s chicken' }, { ic: 'pantry', t: 'Pantry / pasta night', s: 'pesto from the freezer' }, { ic: 'order', t: 'Order in', s: 'mark dinner handled' }, { ic: 'eatout', t: 'Eat out', s: 'going out tonight' }, ]; const AudIcon = ({ kind, size = 22 }) => { const p = { width: size, height: size, viewBox: '0 0 32 32', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (kind) { case 'simpler': return ; case 'batch': return ; case 'pantry': return ; case 'order': return ; case 'eatout': return ; default: return null; } }; // ─── Animated week row ───────────────────────────────────────── const VISIBLE_AT = { empty: 0, 'fill-1': 1, 'fill-2': 2, 'fill-3': 3, 'fill-4': 4, 'fill-5': 5, 'fill-6': 6, full: 7, 'tap-wed': 7, 'sheet-open': 7, 'pick-pasta': 7, 'sheet-close': 7, rest: 7, 'drag-press': 7, 'drag-lift': 7, 'drag-move': 7, 'drag-drop': 7, 'drag-done': 7, }; const PlanWeekRow = ({ idx, state, isSwapped, isTapped, justSwapped, dragPhase, isDragSource, isDropTarget, dragSwapped, dragJustDone, isLast }) => { // Resolve which meal renders in this row based on swap/drag state let meal = WEEK[idx]; if (idx === 3 && isSwapped && !dragSwapped) meal = { ...WEEK[3], ...WED_SWAP }; else if (idx === 3 && dragSwapped) meal = WEEK[4]; // Wed shows old Thu (stir-fry) else if (idx === 4 && dragSwapped) meal = { ...WEEK[3], ...WED_SWAP }; // Thu shows pasta else if (idx === 3 && isSwapped) meal = { ...WEEK[3], ...WED_SWAP }; const visibleCount = VISIBLE_AT[state] ?? 0; const isVisible = idx < visibleCount; const isFresh = isVisible && idx === visibleCount - 1 && state.startsWith('fill-'); // Drop-target highlight (Thu when dragging over) const dropHighlight = isDropTarget; // Source row goes "ghost" while being dragged const isGhost = isDragSource && (dragPhase === 'lift' || dragPhase === 'move'); let bg = 'transparent'; let ring = 'none'; if (dragJustDone && (idx === 3 || idx === 4)) { bg = '#f5e3c2'; ring = `inset 0 0 0 1.5px ${C.amberD}`; } else if (dropHighlight) { bg = C.sageWash; ring = `inset 0 0 0 1.5px ${C.sage}`; } else if (justSwapped) { bg = '#f5e3c2'; ring = `inset 0 0 0 1.5px ${C.amberD}`; } else if (isTapped) { bg = C.sageWash; } return (
{/* Day / date */}
{WEEK[idx].day}
{WEEK[idx].date}
{/* Tile slot — dashed placeholder until visible */}
{/* Name / sub */}
{meal.name || '—'}
{meal.time} · {meal.sub}
); }; // ─── Audible sheet ───────────────────────────────────────────── const AudibleSheet = ({ open, pickedIdx }) => (
Wednesday. Call an audible?
swap the salmon for…
{AUDIBLE_OPTIONS.map((opt, i) => { const isPicked = pickedIdx === i; return (
{opt.t}
{opt.s}
{isPicked && ( )}
); })}
); // ─── Tap indicator (no arrow cursor — just a clean ripple at the touch point) ── const Cursor = ({ x, y, visible, tapping }) => (
{/* Outer ripple */}
{/* Solid touch dot */}
); // ─── Phone shell (custom for landing) ────────────────────────── const PhoneShell = ({ children, w = 340, h = 720 }) => (
{/* Notch */}
{/* Status time */}
9:41
{children}
); // ─── Hero · Plan Steady (mirrors PlanSteady from A-plan.jsx) ─── const SteadyDayRow = ({ day, date, kind, name, time, sub, past, today, rating, first }) => (
{today &&
}
{day}
{date}
{name}
{past && ✓} {time} · {sub} {rating && · {rating}}
); const SteadyStackedDay = ({ day, date, items, past }) => (
{day}
{date}
{items.map((it, i) => (
{it.name}
{past && ✓} {it.time} · {it.sub}
))}
); const HeroPlanSteadyView = () => (
WEEK · MAY 4 → MAY 10
This week.
4 cook · 1 batch · 1 encore · 1 order in · 1 going out
SUN → SAT seven nights, planned
tap any day to swap · plans are alive
{window.LandingTabBar && }
); // ─── Main animated phone ─────────────────────────────────────── const PlanAnimatedPhone = ({ hero = false }) => { if (hero) return ; const live = useChoreography(PLAN_SEQUENCE, LOOP_DURATION); const { state, caption } = hero ? { state: 'full', caption: 'Done. Seven nights, planned.' } : live; const sheetOpen = state === 'sheet-open' || state === 'pick-pasta'; const isPicked = state === 'pick-pasta' || state === 'sheet-close' || state === 'rest' || state === 'drag-press' || state === 'drag-lift' || state === 'drag-move' || state === 'drag-drop' || state === 'drag-done'; const isSwapped = state === 'sheet-close' || state === 'rest' || state === 'drag-press' || state === 'drag-lift' || state === 'drag-move' || state === 'drag-drop' || state === 'drag-done'; const justSwapped = state === 'sheet-close'; // brief warm highlight when row updates const wedTapped = state === 'tap-wed' || state === 'sheet-open' || state === 'pick-pasta'; // Drag-and-drop demo state const dragPhase = state === 'drag-press' ? 'press' : state === 'drag-lift' ? 'lift' : state === 'drag-move' ? 'move' : state === 'drag-drop' ? 'drop' : state === 'drag-done' ? 'done' : null; const dragSwapped = state === 'drag-done'; const dragJustDone = state === 'drag-done'; // Row Y positions inside the week list (measured from live DOM) const WED_Y = 390; const THU_Y = 454; const TILE_X = 75; // tile center x // Floating ghost tile coords (drag pickup → drop on Thu) let ghostY = WED_Y; let ghostScale = 1; let ghostOpacity = 0; if (dragPhase === 'press') { ghostY = WED_Y; ghostScale = 1; ghostOpacity = 0; } else if (dragPhase === 'lift') { ghostY = WED_Y - 4; ghostScale = 1.06; ghostOpacity = 1; } else if (dragPhase === 'move') { ghostY = THU_Y; ghostScale = 1.06; ghostOpacity = 1; } else if (dragPhase === 'drop') { ghostY = THU_Y; ghostScale = 1; ghostOpacity = 0; } // Cursor positions (relative to phone screen, ~324x704) // Wed (row idx 3) center‑y ≈ 390. Phone center‑x ≈ 162. Tile center‑x ≈ 75. let cursor = { x: 0, y: 0, visible: false, tapping: false }; if (state === 'full' || state === 'tap-wed') { cursor = { x: 162, y: 390, visible: true, tapping: state === 'tap-wed' }; } else if (state === 'sheet-open') { cursor = { x: 162, y: 390, visible: true, tapping: false }; } else if (state === 'pick-pasta') { // Pantry option (index 2) inside the sheet cursor = { x: 110, y: 565, visible: true, tapping: true }; } else if (dragPhase === 'press') { cursor = { x: TILE_X, y: WED_Y, visible: true, tapping: true }; } else if (dragPhase === 'lift') { cursor = { x: TILE_X, y: WED_Y - 4, visible: true, tapping: true }; } else if (dragPhase === 'move') { cursor = { x: TILE_X, y: THU_Y, visible: true, tapping: true }; } else if (dragPhase === 'drop') { cursor = { x: TILE_X, y: THU_Y, visible: true, tapping: false }; } return (
{/* Header */}
WEEK · MAY 4 → MAY 10
This week.
{/* Week body */}
SUN → SAT
{WEEK.map((_, i) => ( ))}
{/* Floating drag ghost (the pasta tile being dragged from Wed → Thu) */} {dragPhase && dragPhase !== 'done' && (
)} {!hero && } {window.LandingTabBar && }
{/* Caption — lifted out of the phone, editorial italic */}
{caption}
); }; // ─── Mount ───────────────────────────────────────────────────── const HeroPlanPhone = () => (
); const mountPlanPhone = () => { const el = document.getElementById('plan-anim-mount'); if (el) ReactDOM.createRoot(el).render(); const heroEl = document.getElementById('hero-phone-mount'); if (heroEl) ReactDOM.createRoot(heroEl).render(); }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mountPlanPhone); } else { mountPlanPhone(); } // Expose shared shell + tokens for sibling Babel scripts Object.assign(window, { PhoneShell, PlanColors: C });