// Solari · Landing · Animated Recipes loop (v2) // Story: capture from 2 sources → land in a RICH recipe overview // → after cooking, leave a voice note → it forks into family's version. // Self-contained; relies on PhoneShell from landing-plan-anim.jsx. const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React; // ─── Tokens ──────────────────────────────────────────────────── const RC = { 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)', }; // ─── Choreography ────────────────────────────────────────────── // Single source (Instagram cacio) → rich recipe overview → voice-note feedback. const RECIPE_SEQUENCE = [ // ── Source: Instagram ── { t: 0, state: 'src1-show', caption: 'You see something good on Instagram…' }, { t: 2600, state: 'src1-import', caption: 'Send it to Solari.' }, { t: 4400, state: 'src1-parsing', caption: 'Solari reads it for you.' }, { t: 7200, state: 'src1-card', caption: 'Saved.' }, // ── The recipe overview · LONG dwell ── { t: 9400, state: 'overview-hero', caption: 'Every recipe, the same beautiful page.' }, { t: 12800, state: 'overview-changed', caption: 'It remembers your tweaks across versions.' }, { t: 16400, state: 'overview-ing', caption: 'Ingredients with your notes inline.' }, { t: 19800, state: 'overview-steps', caption: 'Steps, written like you’d say them.' }, { t: 23000, state: 'overview-feedback', caption: 'Family feedback. Notes. Everything in one place.' }, // ── Feedback / family fork ── { t: 26600, state: 'fb-ask', caption: 'And after you cook it… leave a voice note.' }, { t: 29200, state: 'fb-record', caption: 'Hold to talk.' }, { t: 32200, state: 'fb-transcribe', caption: '“More pepper next time. Salt the water harder.”' }, { t: 35400, state: 'fb-fork', caption: 'Saved to your family’s version. V2 → V3.' }, { t: 38600, state: 'fb-rest', caption: 'The recipe grows up with you.' }, ]; const RECIPE_LOOP = 42000; const useChoreoR = (sequence, duration) => { const [t, setT] = useStateR(0); const startRef = useRefR(performance.now()); useEffectR(() => { 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 || '' }; }; // ─── The 2 incoming recipes ──────────────────────────────────── const RECIPES = [ { src: 'instagram', handle: '@kitchen.notes', title: 'Cacio e pepe', familyName: 'Hartley family cacio', eyebrow: '★ FAMILY · V2', blurb: 'one pot · 20 min · serves 4', time: '20 min', serves: 'serves 4', tag: 'cook', stats: [['20', 'min'], ['4', 'serves'], ['1', 'pot'], ['3×', 'cooked']], story: 'A weeknight one-pot cacio, leaning on more pepper and a generous toss of pasta water. Quick to throw together; everyone in the house eats it.', changed: 'You doubled the pepper. Added pecorino + parm together (Lily). Salted the water more heavily. We kept it.', ingredients: [ ['1 lb', 'bucatini', ''], ['1½ cups','pecorino, finely grated', 'your blend'], ['½ cup', 'parmigiano', 'added'], ['2 tsp', 'black pepper, cracked', 'your double'], ['', 'kosher salt', 'to taste'], ['', 'reserved pasta water', ''], ], steps: [ 'Boil pasta in well-salted water until al dente.', 'Toast cracked pepper in a dry pan until fragrant.', 'Off heat, add a ladle of pasta water + cheeses, whisk to a cream.', 'Toss in pasta, glossing with more pasta water as needed.', ], feedback: [ ['M', 'Mike', 'sage', '"this is the version"', '★★★★★'], ['L', 'Lily', 'amber', '"more pepper, just like that"', '★★★★★'], ['T', 'Theo', 'terracotta', '"can we have it again Friday"', '★★★★'], ], notes: [ ['"reserve a full mug of pasta water, always wish I had more"', 'Mar 12'], ['"grate the cheese fine, like snow"', ''], ], serveWith: ['a sharp green salad', 'lemony broccolini'], leftover: ['fold into a frittata', 'tossed with rocket, lunch'], photo: 'assets/photo-pasta.jpg', }, { src: 'cookbook', book: 'Mom’s recipe binder', title: 'Sunday roast chicken', blurb: 'oven · 90 min · serves 6', time: '90 min', serves: 'serves 6', tag: 'batch', ingredients: [ '1 whole chicken (4 lb)', '2 lemons, halved', '4 cloves garlic', 'rosemary sprigs', 'olive oil', 'salt, pepper', ], steps: [ 'Pat chicken dry. Salt generously, inside and out.', 'Stuff cavity with lemons, garlic, rosemary.', '425\u00b0 for 75 min. Baste twice.', 'Rest 15 min before carving.', ], serveWith: ['roasted potatoes', 'lemony greens', 'pan jus'], leftover: ['Tuesday wraps with yogurt + herbs', 'stock from the carcass'], photo: 'assets/photo-roast-chicken.jpg', }, ]; // ─── Source preview cards ────────────────────────────────────── const SourceCardIG = ({ recipe }) => (
{recipe.handle}
{recipe.handle}{' '} cacio e pepe, weeknight magic. recipe in caption ✨
); const SourceCardCookbook = ({ recipe }) => (
Sunday Roast Chicken
from Mom, est. 1987
1 whole chicken (4 lb)
2 lemons, halved
4 cloves garlic
sprigs of rosemary
olive oil, salt, pepper

425° for 75 min, baste twice…
); // ─── View 1 · Source ─────────────────────────────────────────── const SourceView = ({ recipeIdx, importing }) => { const r = RECIPES[recipeIdx]; const Card = recipeIdx === 0 ? SourceCardIG : SourceCardCookbook; return (
{recipeIdx === 0 ? 'INSTAGRAM' : 'CAMERA'}
{recipeIdx === 0 ? 'Saw it scrolling.' : 'Mom’s binder.'}
S
Send to Solari
save to your cookbook
); }; // ─── View 2 · Parsing (slowed; richer fields) ────────────────── const ParsingView = ({ t, recipeIdx, baseT }) => { const r = RECIPES[recipeIdx]; const elapsed = Math.max(0, t - baseT); const fields = [ { label: 'TITLE', value: r.title, t: 200 }, { label: 'TIME', value: r.time, t: 600 }, { label: 'SERVES', value: r.serves, t: 1000 }, { label: 'INGREDIENTS', value: `${r.ingredients.length} items`, t: 1400 }, { label: 'STEPS', value: `${r.steps.length} steps`, t: 1800 }, { label: 'SERVE WITH', value: `${r.serveWith.length} ideas`, t: 2200 }, ]; return (
SOLARI · READING
Pulling out the recipe…
{fields.map((f) => { const visible = elapsed >= f.t; return (
{f.label}
{f.value}
{visible ? ( ) : (
)}
); })}
); }; // ─── View 3 · "Saved" toast (brief confirm) ──────────────────── const SavedView = ({ recipeIdx }) => { const r = RECIPES[recipeIdx]; return (
SAVED TO COOKBOOK
ready when you are.
{r.title}
{r.blurb}
saved {recipeIdx === 0 ? 'from Instagram' : 'from Mom’s binder'}
); }; // ─── View 4 · Recipe Overview (the rich page) ────────────────── // Scrollable phone view with hero photo, ingredients, steps, and extras. // We "scroll" by translating an inner column based on the sub-state. const OverviewView = ({ subState, recipe, recordingState, t, baseT }) => { const r = recipe; // Scroll positions tuned to the real RecipeDetail layout const scrollMap = { 'overview-hero': 0, 'overview-changed': 220, 'overview-ing': 420, 'overview-steps': 640, 'overview-feedback': 920, 'fb-ask': 340, // scroll back up to the Ask button 'fb-record': 340, 'fb-transcribe': 340, 'fb-fork': 220, // scroll up to show the WHAT'S CHANGED card update 'fb-rest': 220, }; const scrollY = scrollMap[subState] ?? 0; const elapsed = Math.max(0, t - baseT); // Highlight which section the caption is talking about const hi = { changed: subState === 'overview-changed' || subState === 'fb-fork' || subState === 'fb-rest', ask: subState === 'fb-ask' || subState === 'fb-record' || subState === 'fb-transcribe', ing: subState === 'overview-ing', steps: subState === 'overview-steps', feedback: subState === 'overview-feedback', }; const recording = subState === 'fb-record'; const showTranscript = subState === 'fb-transcribe' || subState === 'fb-fork' || subState === 'fb-rest'; const showFork = subState === 'fb-fork' || subState === 'fb-rest'; const isV3 = showFork; // Animated waveform for record state const bars = Array.from({ length: 18 }, (_, i) => { const phase = (elapsed / 80) + i * 0.6; return recording ? (5 + Math.abs(Math.sin(phase)) * 18) : 4; }); return (
{/* scroll column */}
{/* Hero photo full bleed with title overlay */}
{/* nav buttons */}
{['heart','edit'].map(n => (
{n === 'heart' ? : <>}
))}
{/* title overlay */}
{isV3 ? '★ FAMILY · V3' : r.eyebrow}
{r.familyName}
{/* Stats row */}
{r.stats.map(([n, l]) => (
{n}
{l}
))}
{/* Story */}
{r.story}
{/* WHAT'S CHANGED · amber card */}
WHAT’S CHANGED · {isV3 ? 'V2 → V3' : 'V1 → V2'}
{r.changed}
{/* New v3 line — slides in when forked */}
+
More pepper next time. Salt the water harder. just now
{/* Ask Solari button */}
{recording ? ( ) : ( )}
{recording ? (
{bars.map((h, i) => (
))}
) : (
Add your thoughts
subs · scaling · leave a note for next time
)}
{recording ? '0:08' : ''}
{/* Tap pulse on Ask button when fb-ask */} {subState === 'fb-ask' && (
)} {/* Transcript bubble appears under button */}
“More pepper next time. Salt the water harder.”
YOU · just now
{/* INGREDIENTS · 4 SERVINGS */}
INGREDIENTS · 4 SERVINGS
{r.ingredients.map(([q, n, note], i) => (
{q} {n} {note}
))}
{/* METHOD */}
METHOD
{r.steps.map((s, i) => (
{i + 1} {s}
))}
{/* SERVE WITH */}
SERVE WITH
{r.serveWith.map(x => ( + {x} ))}
{/* FAMILY FEEDBACK */}
FAMILY FEEDBACK
{r.feedback.map(([init, name, color, quote, stars]) => { const colorMap = { sage: RC.sage, amber: RC.amberD, terracotta: RC.clay }; return (
{init}
{quote}
{name} · {stars}
); })}
{/* YOUR NOTES */}
YOUR NOTES
{r.notes.map(([note, date], i) => (
{note}{date && · {date}}
))}
{/* Sticky bottom action bar — outside scroll column */}
+ this week
Cook it now →
); }; // ─── View 5 (deprecated) · Feedback now lives inline in OverviewView ── // eslint-disable-next-line no-unused-vars const _FeedbackView_DEAD = ({ subState, recipe, t, baseT }) => { const r = recipe; const elapsed = Math.max(0, t - baseT); const showPrompt = subState !== 'fb-after'; // prompt fades into mic UI quickly const showMic = subState === 'fb-record' || subState === 'fb-transcribe' || subState === 'fb-fork' || subState === 'fb-rest'; const recording = subState === 'fb-record'; const showTranscript = subState === 'fb-transcribe' || subState === 'fb-fork' || subState === 'fb-rest'; const showFork = subState === 'fb-fork' || subState === 'fb-rest'; // Animated waveform for record state const bars = Array.from({ length: 22 }, (_, i) => { const phase = (elapsed / 80) + i * 0.6; const h = recording ? (6 + Math.abs(Math.sin(phase)) * 22) : 4; return h; }); return (
{/* Slim recipe header */}
{r.title}
cooked tonight · 7:42 PM
{/* Prompt */}
HOW WAS IT?
Leave a note for next time.
{/* Mic / waveform */}
{bars.map((h, i) => (
))}
{recording ? '0:08' : '0:00'}
{/* Transcript bubble */}
“Loved this. Next time let’s do bucatini and add a little lemon zest at the end.”
YOU · just now
{/* Fork badge sliding into recipe */}
THE HARTLEY VERSION
+ Add lemon zest at the end · added by you
★ Family loved it · 1st time cooked
); }; // ─── Main ────────────────────────────────────────────────────── const RecipeAnimatedPhone = () => { const { t, state, caption } = useChoreoR(RECIPE_SEQUENCE, RECIPE_LOOP); let view = 'source', recipeIdx = 0, importing = false, parsingBaseT = 0, fbBaseT = 0; const m = state.match(/^src(\d)-(.+)$/); if (m) { recipeIdx = parseInt(m[1], 10) - 1; const phase = m[2]; if (phase === 'show') { view = 'source'; importing = false; } else if (phase === 'import') { view = 'source'; importing = true; } else if (phase === 'parsing') { view = 'parsing'; const ev = RECIPE_SEQUENCE.find(e => e.state === state); parsingBaseT = ev ? ev.t : 0; } else if (phase === 'card') { view = 'saved'; } } else if (state.startsWith('overview') || state.startsWith('fb-')) { view = 'overview'; recipeIdx = 0; const ev = RECIPE_SEQUENCE.find(e => e.state === 'fb-record'); fbBaseT = ev ? ev.t : 0; } return (
{view === 'source' && } {view === 'parsing' && } {view === 'saved' && } {view === 'overview' && } {window.LandingTabBar && }
{/* Caption — lifted out of the phone, editorial italic */}
{caption}
); }; // ─── Mount ───────────────────────────────────────────────────── const mountRecipePhone = () => { const el = document.getElementById('recipe-anim-mount'); if (!el) return; ReactDOM.createRoot(el).render(); }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mountRecipePhone); } else { mountRecipePhone(); } // Keyframes (function injectRecipeKeyframes() { if (document.getElementById('recipe-anim-keyframes')) return; const s = document.createElement('style'); s.id = 'recipe-anim-keyframes'; s.textContent = ` @keyframes rcSpin { to { transform: rotate(360deg); } } @keyframes rcLand { 0% { opacity: 0; transform: translateY(40px) scale(0.85); } 60% { opacity: 1; transform: translateY(-6px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } `; document.head.appendChild(s); })();