// scenes-3-4.jsx — DeftForge scenes 3 (4 steps) + 4 (split-screen: old way vs new way) // ── Scene 3 — Four steps ─────────────────────────────────────────────────── function Scene3FourSteps() { const { localTime } = useSprite(); const steps = [ { n: '01', title: 'discover', desc: '30-min call. We map the manual work eating your hours.', accent: COLORS.ember }, { n: '02', title: 'build', desc: 'End-to-end. No status meetings. No slideware.', accent: COLORS.ember }, { n: '03', title: 'refine', desc: 'Your team uses it. We iterate fast. No ceremony.', accent: COLORS.ember }, { n: '04', title: 'decide', desc: 'Pay only if it earned its place. Walk away anytime.', accent: COLORS.ember }, ]; const stepDur = 2.0; const idx = Math.min(steps.length - 1, Math.floor(localTime / stepDur)); const stepT = (localTime - idx * stepDur) / stepDur; const step = steps[idx]; const enterT = clamp(stepT / 0.25, 0, 1); const exitT = clamp((stepT - 0.85) / 0.15, 0, 1); return (
{steps.map((s, i) => { const isPast = i < idx; const isCur = i === idx; const fillPct = isPast ? 1 : isCur ? clamp(stepT, 0, 1) : 0; return (
{s.n} · {s.title}
); })}
↳ {step.n}
{step.title} .
{step.desc}
process · {step.n}/04
no retainer · no contract
); } // ── Scene 4 — Split screen: the old way vs the new way ──────────────────── // Designed for small-business viewers: the painful left side shows late-night // manual work (overflowing inbox, sticky notes, growing spreadsheet, clock). // The clean right side shows their forged system handling it calmly. // // Beats: // 0.0 → 0.4s "the old way" / "the new way" labels appear // 0.4 → 4.5s Both sides animate; left grows chaotic, right stays calm // 4.5 → 6.5s Hold on the contrast; closing line appears function Scene4SplitScreen() { const { localTime, progress } = useSprite(); const dur = 6.5; const labelsT = clamp(localTime / 0.4, 0, 1); const contentT = clamp((localTime - 0.4) / 0.4, 0, 1); const closingT = clamp((localTime - 4.8) / 0.6, 0, 1); // Left side chaos intensity (builds over time) const chaosT = clamp((localTime - 0.4) / 4.0, 0, 1); return (
{/* ── LEFT: The old way ─────────────────────────────────────────── */}
{/* Red tint that intensifies */}
{/* ── RIGHT: The new way ────────────────────────────────────────── */}
{/* Subtle ember halo */}
{/* Center divider — animated vertical line */}
{/* Closing line — bottom center */}
same work · 1/40th the time
Built for small teams. Built around you.
); } function SideLabel({ eyebrow, title, color, opacity, mono }) { return (
▸ {eyebrow}
{title}.
); } // ── OLD WAY ──────────────────────────────────────────────────────────────── // Visual cocktail of small-business pain: // - Overflowing inbox counter (climbs) // - Spreadsheet rows piling up with errors // - Sticky notes scattered with "do this", "remember", "URGENT" // - Wall clock ticking past hours function OldWayPanel({ chaosT, localTime }) { // Inbox counter climbs aggressively const unread = 47 + Math.floor(localTime * 32); // Hours worked counter const hours = (localTime * 0.95).toFixed(1); // Sticky notes — fixed positions, shake intensity grows const stickies = [ { x: 60, y: 280, rot: -6, color: '#f4d35e', text: 'reconcile\nstripe vs.\nledger', urgent: false }, { x: 250, y: 340, rot: 4, color: '#ee9b6b', text: 'follow up\n— sarah?', urgent: false }, { x: 70, y: 480, rot: 8, color: '#f4d35e', text: 'tax docs\nDUE FRI', urgent: true }, { x: 240, y: 520, rot: -4, color: '#fbb13c', text: 'invoice\n#0427\nlate', urgent: true }, { x: 130, y: 660, rot: 2, color: '#f4d35e', text: 'call vendor\nre: PO mix-up', urgent: false }, { x: 290, y: 720, rot: -10, color: '#ee9b6b', text: 'send Q3\nreport', urgent: false }, ]; const shake = chaosT * 1.5; return (
{/* Inbox card — top right */}
inbox · unread
{unread}
↑ growing
{/* Wall clock — bottom right */}
hours this week
{62 + Math.floor(localTime * 1.2)}
on manual work
{/* Sticky note pile — left side */}
{stickies.map((s, i) => { const appearT = clamp((localTime - 0.6 - i * 0.25) / 0.4, 0, 1); if (appearT <= 0) return null; const wobble = Math.sin(localTime * (3 + i * 0.7) + i) * shake * 0.5; return (
{s.text}
); })}
); } // ── NEW WAY ──────────────────────────────────────────────────────────────── // One clean automation panel showing tasks flowing in and being handled // calmly. Same task names as OldWayPanel pain points — direct comparison. function NewWayPanel({ localTime }) { const TASKS_PER_SECOND = 1.2; const completedCount = Math.floor(localTime * TASKS_PER_SECOND); const taskNames = [ 'reconcile-stripe', 'inbox-triage', 'invoice-followup', 'vendor-po-check', 'tax-doc-collect', 'q3-report-draft', 'lead-tag', 'send-followup', ]; // Slot system — newest task at top, exactly N visible const SLOTS = 5; const activeWindow = SLOTS / TASKS_PER_SECOND; const activeTasks = []; const newestIdx = Math.floor(localTime * TASKS_PER_SECOND); for (let k = 0; k < SLOTS; k++) { const i = newestIdx - k; if (i < 0) continue; const startTime = i / TASKS_PER_SECOND; const t = (localTime - startTime) / activeWindow; if (t < 0 || t > 1) continue; activeTasks.push({ i, t, slot: k, name: taskNames[i % taskNames.length] }); } return (
{/* Header card */}
your system
ops/automated
running
{/* Task stream */}
{activeTasks.map(({ i, t, slot, name }) => { const opacity = t < 0.08 ? t / 0.08 : t > 0.92 ? (1 - t) / 0.08 : 1; const isDone = t > 0.5; const animSlot = slot - (1 - Easing.easeOutCubic(Math.min(1, t / 0.15))) * 1; const rowH = 60; return (
{name}
{isDone ? 'DONE' : `${String(Math.floor((t / 0.5) * 100)).padStart(2, '0')}%`}
); })}
{/* Bottom stat row */}
); } function SmallStat({ label, value, accent }) { return (
{label}
{value}
); } // Backwards-compat alias (in case anything still imports the old name) const Scene4Working = Scene4SplitScreen; Object.assign(window, { Scene3FourSteps, Scene4SplitScreen, Scene4Working, OldWayPanel, NewWayPanel, SideLabel, SmallStat, });