/* global React, ReactDOM, useTime, useTimeline, Sprite, Stage, Easing, interpolate, animate, clamp */ const { useMemo } = React; const NAVY = '#0e203b', YELLOW = '#FACC15', WHITE = '#fff'; const G50 = '#F8FAFC', G100 = '#F1F5F9', G200 = '#E2E8F0', G300 = '#CBD5E1', G400 = '#94A3B8', G500 = '#64748B', G600 = '#475569', G700 = '#334155'; const FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"; const MONO = "'SF Mono', 'Roboto Mono', ui-monospace, monospace"; // ─── Helpers ─── const typeOut = (text, t0, t1, currentT) => { if (currentT <= t0) return ''; if (currentT >= t1) return text; const p = (currentT - t0) / (t1 - t0); const n = Math.floor(text.length * p); return text.slice(0, n); }; // ─── Soundwave mark ─── const OM = ({ size = 28 }) => ( ); const BarsAnimated = ({ listening }) => { const t = useTime(); const bars = [{ x: 52, base: 16, off: 0 }, { x: 60, base: 32, off: 1.2 }, { x: 68, base: 20, off: 2.4 }, { x: 76, base: 8, off: 3.6 }]; return ( {bars.map((b, i) => { const extra = listening ? Math.abs(Math.sin(t * 6 + b.off)) * 8 : 0; const h = b.base + extra * 2; return ; })} ); }; const DotPulse = () => { const t = useTime(); const o = 0.45 + Math.abs(Math.sin(t * 6)) * 0.55; return
; }; // ─── Mic button (canonical mark) ─── const MicBig = ({ listening, pressed }) => (
); const MicDock = ({ listening }) => (
); const Pressable = ({ pressed, children, style }) => (
{children}
); // ─── Phone shell ─── const PhoneShell = ({ children }) => (
7:14
{children}
); const Header = ({ title, back = true }) => (
‹
{title}
); const Progress = ({ step, total, label, pct }) => (
Step {step} of {total} {label}
); // ─── Scenes ─── const HomeScreen = ({ tapping }) => ( <>
OscarMic
SK
Good morning, Sam
Maple Roofing · West Roof section
Today
No check-in yet
Last check-in
Yesterday, 6:48 AM
Start a check-in
); const ContextScreen = ({ tapping }) => ( <>
Job / site
West Roof section
Change
Maple St renovation · 123 Maple St, Toronto
Crew
Roofing crew A · 3 workers
Change
Continue
); const RecordTypeScreen = ({ tapping }) => ( <>
What are you recording?
Pick the type. You just talk — OscarMic builds the record.
Pre-job hazard review
The pre-work check your crew already does — captured by voice.
›
Or another update
{['Start-of-day check-in', 'Site note', 'Progress note', 'Reported concern', 'Delay note'].map((t, i, a) => (
{t}›
))}
Start
); // Speak the update — voice transcript types out word by word const SpeakScreen = ({ phase, tapping, local }) => { const transcript = '"Okay, day five on the west roof. Got the ladders up and the boom lift going. Wind\'s picking up though, gusting maybe 28."'; // local 1.5–4.5 = listening; type out 1.6→4.4 const visibleText = typeOut(transcript, 1.7, 4.4, local); const showTranscript = local >= 1.7; return ( <>
Tell us about today's work
Tap the mic and say it in your own words.
{!showTranscript && (
ⓘ Mention the task, where on site, equipment, conditions, and anything different from yesterday.
)} {showTranscript && (
What you said
{visibleText}
)}
{phase === 'listening' && } {phase === 'idle' && 'Tap to speak'} {phase === 'listening' && 'Listening…'} {phase === 'done' && 'Tap to redo'}
{phase === 'done' && (
Continue
)}
); }; const Caret = ({ on }) => { const t = useTime(); if (!on) return null; const v = Math.sin(t * 8) > 0 ? 1 : 0; return ; }; // Baseline Q2 — voice answers the question. Show mic listening, transcript "Yes" then highlights button const BaselineQ2 = ({ tapping, local }) => { const listening = local >= 0.4 && local < 2.0; const answered = local >= 2.0; const transcript = '"Yep, went over it all at the truck this morning."'; const visible = typeOut(transcript, 0.8, 1.9, local); return ( <>
Safety baseline
Have hazards been reviewed before work started?
Yes
No
N/A
{listening && (
Listening…
{visible}
)}
Next
); }; // Guided question (Jesse-A) — voice answers with transcript building word-by-word const GuidedQ = ({ tapping, local }) => { const listening = local >= 0.4 && local < 2.5; const answered = local >= 2.5; const transcript = '"Yeah, harnesses are on and everyone\'s tied off. Checked all the anchors."'; const visible = typeOut(transcript, 0.7, 2.4, local); return ( <>
Question 2 of 3
Is fall protection set up and checked?
{(listening || answered) && (
{listening ? 'Listening…' : 'Your answer'}
{visible}{listening && }
)}
Next
); }; const ReviewScreen = ({ tapping }) => ( <>
Pre-job hazard review In progress
West Roof section · Day 5
Roofing crew A · 3 workers
OM-2026-0517-014
Your notes
"Okay, day five on the west roof. Wind's picking up though, gusting maybe 28."
Cleaned up by OscarMic
Day 5 pre-job hazard review at the west roof section. Roofing crew A continuing with ladders and the boom lift. Wind gusts to 28 km/h. Tailgate done, PPE in use, fall protection set up and checked.
Safety baseline · 6 of 6
{[ ['Hazards reviewed?', 'Yes'], ['PPE in use?', 'Yes'], ['Crew informed?', 'Yes'], ['Damaged equipment?', 'No'], ['Anything changed?', 'Yes — wind'], ].map(([q, a], i, arr) => (
{q} {a}
))}
A few details
{[ ['Weather / surface', 'Wind gusts 28 km/h'], ['Fall protection?', 'Yes — anchors confirmed'], ['Blocking the start?', 'No'], ].map(([q, a], i, arr) => (
{q}
{a}
))}
Send
); const LoggedScreen = ({ local }) => { const scale = Math.min(1, 0.85 + (1 - Math.cos(Math.min(local, 0.6) * Math.PI / 0.6)) / 2 * 0.15); return (
✓
Logged
Your pre-job hazard review is logged.
OM-2026-0517-014
); }; // ─── Admin desktop view ─── const AdminDesktop = ({ local }) => { // Beat A: 0–4.5 — the record-detail card lands (matching report screen quality) // Beat B: 4.5–10 — "Admins decide what gets logged" — show the template list const phase = local < 4.8 ? 'detail' : 'templates'; return (
{/* Sidebar */}
OscarMic
Maple Roofing Inc.
{[ ['Today', phase === 'detail'], ['Records', false], ['Concerns', false], ['Follow-ups', false], ['Templates', phase === 'templates'], ['Settings', false], ].map(([label, active]) => (
{label}
))}
JR
Jamie Reyes
Owner
{/* Main */}
{phase === 'detail' && } {phase === 'templates' && }
); }; const AdminDetailView = ({ local }) => { // Pop in with a slight up-from-bottom slide; record from Sam highlighted at top const cardOp = Math.min(1, local / 0.5); const cardTy = (1 - Math.min(1, local / 0.5)) * 20; const liveOp = local > 0.6 ? Math.min(1, (local - 0.6) / 0.4) : 0; return ( <>
‹ Today OM-2026-0517-014
● Just logged
{/* Record header card — mirrors worker review */}
Pre-job hazard review Logged Today, 7:14 AM
West Roof section · Day 5
Sam Khoury · Roofing crew A · 3 workers Maple St renovation · 123 Maple St
{/* Notes + cleaned-up — same pattern as worker review */}
What Sam said
"Okay, day five on the west roof. Got the ladders up and the boom lift going. Wind's picking up though, gusting maybe 28."
Cleaned up by OscarMic
Day 5 pre-job hazard review at the west roof section. Roofing crew A (3 workers) continuing with ladders and the boom lift. Wind gusts to 28 km/h. Tailgate done, PPE in use, fall protection set up and checked.
); }; const AdminTemplatesView = ({ local }) => { const types = [ { name: 'Pre-job hazard review', tag: 'Safety', on: true }, { name: 'Start-of-day check-in', tag: 'Operations', on: true }, { name: 'Site note', tag: 'Operations', on: true }, { name: 'Delay note', tag: 'Billing', on: true }, { name: 'End-of-day summary', tag: 'Operations', on: true }, { name: 'Material & equipment need', tag: 'Billing', on: true }, { name: 'Reported concern', tag: 'Compliance', on: true }, { name: 'Follow-up item', tag: 'Operations', on: false }, ]; const tagColor = { Safety: YELLOW, Operations: G200, Billing: '#DBEAFE', Compliance: NAVY }; const tagText = { Safety: NAVY, Operations: G700, Billing: '#1E40AF', Compliance: '#fff' }; return ( <>
Templates
What your crews can log
+ New template
Template
Used for
On
{types.map((t, i) => { // Stagger each row in const rowT = i * 0.12; const rowOp = Math.min(1, Math.max(0, (local - rowT) / 0.4)); const rowTy = (1 - rowOp) * 8; return (
{t.name}
{t.tag}
); })}
You pick what matters — safety, billing, compliance, or anything else.
); }; // ─── Sam character ─── const SamFigure = ({ local }) => { const hands = null; const t = useTime(); const enter = Math.min(1, Math.max(0, (local - 0.1) / 0.6)); const e = Easing.easeOutCubic(enter); const bob = Math.sin(t * 2.2) * 3; const blink = (local % 3.1) > 2.95 ? 0.15 : 1; const hot = !hands && local >= 2.8; const busy = !hands && local >= 4.3; const shake = 0; const droop = busy ? Easing.easeInOutCubic(Math.min(1, (local - 4.3) / 0.8)) : 0; const lid = busy ? 1 - 0.55 * droop : (hands ? 0.8 : 1); const gx = hands ? 3 : 0, gy = hands ? 3 : 0; const dropT = hot ? ((local - 2.8) % 1.6) / 1.6 : 0; const NAVY2 = '#1a2d4d'; const SKIN = '#D49C74', SKIN2 = '#B98058', CAP = '#2F3A4A', CAP2 = '#232C39', TEE = '#E9EDF2', TEE2 = '#D3DAE3', STRAP = '#E5B712'; return ( {/* torso: t-shirt */} {/* harness */} {/* neck */} {/* ears */} {/* head, squarer jaw */} {/* stubble */} {/* brows */} {/* eyes */} {busy && } {/* safety glasses */} {/* nose + mouth */} {/* ball cap */} {hot && } ); }; // ─── Coffee + phone hands ─── const HandsFigure = ({ local, cupAt = 0.15, phoneAt = 0.7, liveAt = 1.4 }) => { const t = useTime(); const cupE = Easing.easeOutCubic(Math.min(1, Math.max(0, (local - cupAt) / 0.7))); const phE = Easing.easeOutCubic(Math.min(1, Math.max(0, (local - phoneAt) / 0.7))); const live = local >= liveAt; const liveE = Math.min(1, Math.max(0, (local - liveAt) / 0.35)); const floatC = Math.sin(t * 1.4) * 5, floatP = Math.sin(t * 1.4 + 1.6) * 5; const CUP = '#B91C2C'; return (
{/* cup */}
{[0, 1, 2].map(i => { const p = (t * 0.5 + i / 3) % 1; return (
); })}
{/* phone */}
{live && (
Pre-job safety check
Listening…
)}
); }; // ─── Intro: meet Sam ─── const IntroScene = ({ local }) => { const lines = [ { t: 0.2, txt: 'Meet Sam.', size: 96 }, { t: 1.5, txt: 'Foreman at Maple Roofing.', size: 42 }, { t: 2.8, txt: 'Worked 10 hours yesterday in 30° heat.', size: 31 }, { t: 4.3, txt: 'Sam has no time for admin.', size: 62, yellow: true }, ]; return (
{lines.map((l, i) => { const visible = local >= l.t; const opacity = visible ? Math.min(1, (local - l.t) / 0.4) : 0; const ty = visible ? (1 - Math.min(1, (local - l.t) / 0.4)) * 14 : 14; return (
{l.txt}
); })}
); }; // ─── "What if" promise scene ─── const WhatIfScene = ({ local }) => { const opacity = Math.min(1, local / 0.6); const ty = (1 - Math.min(1, local / 0.6)) * 16; const op2 = local >= 1.4 ? Math.min(1, (local - 1.4) / 0.5) : 0; const ty2 = local >= 1.4 ? (1 - Math.min(1, (local - 1.4) / 0.5)) * 16 : 16; return (
What if Sam could keep
the office informed
just by talking?
); }; // ─── Coffee/phone setup scene ─── const CoffeeScene = ({ local }) => { const op1 = Math.min(1, local / 0.5); const ty1 = (1 - Math.min(1, local / 0.5)) * 16; const op2 = local >= 1.4 ? Math.min(1, (local - 1.4) / 0.5) : 0; const ty2 = local >= 1.4 ? (1 - Math.min(1, (local - 1.4) / 0.5)) * 16 : 16; return (
Coffee in one hand.
Phone in the other.
OscarMic does the rest.
); }; // ─── Outro ─── const OutroScene = ({ local }) => { const op1 = Math.min(1, local / 0.6); const sc1 = 0.92 + Math.min(1, local / 0.6) * 0.08; const op2 = local >= 0.9 ? Math.min(1, (local - 0.9) / 0.4) : 0; const ty2 = local >= 0.9 ? (1 - Math.min(1, (local - 0.9) / 0.4)) * 10 : 10; const op3 = local >= 1.5 ? Math.min(1, (local - 1.5) / 0.4) : 0; const op4 = local >= 2.3 ? Math.min(1, (local - 2.3) / 0.4) : 0; return (
OscarMic
Admin on the move.
); }; // ─── Script ─── const SCENES = [ { id: 'intro', start: 0.0, end: 6.0, Comp: IntroScene, tapAt: [], desktop: true, noPhone: true }, { id: 'whatif', start: 6.0, end: 9.5, Comp: WhatIfScene, tapAt: [], desktop: true, noPhone: true }, { id: 'coffee', start: 9.5, end: 13.0, Comp: CoffeeScene, tapAt: [], desktop: true, noPhone: true }, { id: 'home', start: 13.0, end: 16.0, Comp: HomeScreen, tapAt: [{ t: 15.1 }] }, { id: 'ctx', start: 16.0, end: 19.0, Comp: ContextScreen, tapAt: [{ t: 18.3 }] }, { id: 'type', start: 19.0, end: 22.0, Comp: RecordTypeScreen, tapAt: [{ t: 21.3 }] }, { id: 'speak', start: 22.0, end: 28.5, Comp: SpeakScreen, tapAt: [{ t: 23.2 }, { t: 27.8 }] }, { id: 'q2', start: 28.5, end: 32.5, Comp: BaselineQ2, tapAt: [{ t: 31.5 }] }, { id: 'guided', start: 32.5, end: 37.0, Comp: GuidedQ, tapAt: [{ t: 36.0 }] }, { id: 'review', start: 37.0, end: 41.0, Comp: ReviewScreen, tapAt: [{ t: 40.2 }] }, { id: 'logged', start: 41.0, end: 44.0, Comp: LoggedScreen, tapAt: [] }, { id: 'admin', start: 44.0, end: 54.0, Comp: AdminDesktop, tapAt: [], desktop: true }, { id: 'outro', start: 54.0, end: 59.0, Comp: OutroScene, tapAt: [], desktop: true, noPhone: true }, ]; const SceneSprite = ({ scene }) => { const t = useTime(); if (t < scene.start || t >= scene.end) return null; const local = t - scene.start; let tapping = false; if (scene.tapAt && scene.tapAt.length > 0) { for (const ta of scene.tapAt) { const localTaT = ta.t - scene.start; if (Math.abs(local - localTaT) < 0.18 && local >= localTaT - 0.08) tapping = true; } } let extraProps = { tapping, local }; if (scene.id === 'speak') { let phase = 'idle'; if (local >= 1.2 && local < 4.5) phase = 'listening'; else if (local >= 4.5) phase = 'done'; extraProps.phase = phase; } const Comp = scene.Comp; if (scene.desktop) return ; return ; }; const Caption = () => { const t = useTime(); const captions = [ { start: 0, end: 6.0, text: '' }, { start: 6.0, end: 9.5, text: '' }, { start: 9.5, end: 13.0, text: '' }, { start: 13.0, end: 16.0, text: 'He pulls up to the site.' }, { start: 16.0, end: 19.0, text: 'He picks his site and crew.' }, { start: 19.0, end: 22.0, text: 'And the update — set up by his admin.' }, { start: 22.0, end: 28.5, text: 'He walks the site, talking through the day\'s work.' }, { start: 28.5, end: 37.0, text: 'OscarMic asks smart follow-ups.' }, { start: 37.0, end: 41.0, text: 'It cleans the whole thing into a record.' }, { start: 41.0, end: 44.0, text: 'Logged in seconds.' }, { start: 44.0, end: 48.8, text: 'His admin sees the record the moment it lands.' }, { start: 48.8, end: 54.0, text: 'Admins pick what gets logged. Safety. Billing. Compliance.' }, { start: 54.0, end: 59.0, text: '' }, ]; const active = captions.find(c => t >= c.start && t < c.end); if (!active) return null; const local = t - active.start; const localEnd = active.end - t; const inDur = 0.35, outDur = 0.35; let opacity = 1; if (local < inDur) opacity = Easing.easeOutCubic(local / inDur); else if (localEnd < outDur) opacity = Easing.easeInCubic(localEnd / outDur); return (
{active.text}
); }; const Chrome = () => ( <>
OscarMic
Admin on the move
); const App = () => ( {SCENES.map(s => )} ); ReactDOM.createRoot(document.getElementById('root')).render(); requestAnimationFrame(() => requestAnimationFrame(() => document.body.classList.add('ready')));