// dashboard-tour.jsx — Auto-playing animated dashboard tour. // A self-running mockup that cycles through scenes so visitors *see* the // product working: new order arrives, AI generates description, loyalty // member joins, revenue chart grows, campaign sends. Built to convert. const DT_INK = '#1C1009'; const DT_AMBER = '#F97316'; const DT_AMBER_DEEP = '#C2410C'; const DT_AMBER_TINT = '#FFE4CC'; const DT_AMBER_SOFT = '#FFF1E4'; const DT_CREAM = '#FFFBF5'; const DT_PAPER = '#F3E4C8'; const DT_MUTED = '#5C4A3F'; const DT_DIM = '#7B6A5F'; const DT_BORDER = 'rgba(28,16,9,0.08)'; const DT_FOREST = '#16A34A'; const DT_BERRY = '#DB2777'; const DT_FN = '"Nunito", system-ui, sans-serif'; const DT_FB = '"DM Sans", system-ui, sans-serif'; const DT_FM = '"JetBrains Mono", ui-monospace, monospace'; const SCENES = [ { id: 'orders', label: 'New order, live', duration: 5200 }, { id: 'ai', label: 'AI menu studio', duration: 5400, soon: true }, { id: 'loyalty', label: 'Loyalty in action', duration: 4800, soon: true }, { id: 'revenue', label: 'Sales analytics', duration: 5000 }, { id: 'campaign', label: 'Promotions in 3 taps', duration: 5200, soon: true }, ]; // ── Hook: typewriter ─────────────────────────────────────────────────────── function useTypewriter(text, active, speed = 22) { const [out, setOut] = React.useState(''); React.useEffect(() => { if (!active) { setOut(''); return; } let i = 0; setOut(''); const t = setInterval(() => { i++; setOut(text.slice(0, i)); if (i >= text.length) clearInterval(t); }, speed); return () => clearInterval(t); }, [active, text, speed]); return out; } // ── Hook: animated number with easing ────────────────────────────────────── function useAnimatedNumber(target, active, duration = 1400) { const [v, setV] = React.useState(0); React.useEffect(() => { if (!active) { setV(0); return; } let raf, start; const tick = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(eased * target); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [active, target, duration]); return v; } // ── The tour container ──────────────────────────────────────────────────── function DashboardTour() { const [sceneIdx, setSceneIdx] = React.useState(0); const [progress, setProgress] = React.useState(0); const [paused, setPaused] = React.useState(false); // Auto-advance with progress bar React.useEffect(() => { if (paused) return; const duration = SCENES[sceneIdx].duration; let raf, start; const tick = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / duration); setProgress(p); if (p < 1) { raf = requestAnimationFrame(tick); } else { setSceneIdx((i) => (i + 1) % SCENES.length); setProgress(0); } }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [sceneIdx, paused]); const goTo = (idx) => { setSceneIdx(idx); setProgress(0); }; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} > {/* ── Window chrome ─────────────────────────────────── */}
app.robinrun.com / golden-karahi
Sample data
{/* ── Scene area ────────────────────────────────────── */}
{SCENES.map((s, i) => (
{s.id === 'orders' && } {s.id === 'ai' && } {s.id === 'loyalty' && } {s.id === 'revenue' && } {s.id === 'campaign' && }
))}
{/* ── Scene chips + progress ────────────────────────── */}
{SCENES.map((s, i) => { const active = i === sceneIdx; return ( ); })}
{paused ? 'Paused · hover to control' : 'Auto-tour'}
); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 1 — Orders coming in live // ═══════════════════════════════════════════════════════════════════════════ function SceneOrders({ active, progress }) { // Simulate a new order arriving at ~30% of the scene const newOrderVisible = active && progress > 0.20; const queueOpen = active && progress > 0.05; const baseRows = [ { id: '#A2917', cust: 'Diego P.', items: '1× Smashburger · Mac', total: '$27.00', status: 'preparing', eta: '12m' }, { id: '#A2916', cust: 'Sara L.', items: 'Truffle flatbread · Caesar', total: '$38.00', status: 'preparing', eta: '4m' }, { id: '#A2915', cust: 'Priya N.', items: '2× Pancakes · Benedict', total: '$51.50', status: 'ready', eta: '—' }, { id: '#A2914', cust: 'Tom O.', items: '4× Cookie · Risotto', total: '$37.00', status: 'delivery', eta: '6m' }, ]; const newOrder = { id: '#A2918', cust: 'Maya R.', items: '2× Honey-butter chicken · Lemonade', total: '$47.50', status: 'new', eta: '35m' }; const statusStyles = { new: { bg: '#FFE4CC', fg: '#9A3412', dot: '#F97316', label: 'New' }, preparing: { bg: '#FEF3C7', fg: '#92400E', dot: '#F59E0B', label: 'Preparing' }, ready: { bg: '#DCFCE7', fg: '#166534', dot: '#16A34A', label: 'Ready' }, delivery: { bg: '#EDE9FE', fg: '#5B21B6', dot: '#8B5CF6', label: 'Completed' }, }; return (
{/* Queue */}
Order queue Live
{/* New order row — slides in */}
{newOrder.id}
JUST IN
{newOrder.cust}
{newOrder.items}
{newOrder.total}
New {newOrder.eta}
{/* Existing rows shift down */} {baseRows.map((r, i) => { const s = statusStyles[r.status]; return (
{r.id}
{(i+2)*4}m ago
{r.cust}
{r.items}
{r.total}
{s.label} {r.eta}
); })}
{/* Side panel: notification + stats */}
{/* Notification card — slides in */}
🔔 Order incoming
Maya R. · $47.50 · delivery · ETA 35 min
{/* Today summary */}
Today · so far
); } function Row({ k, v, pop }) { return (
{k} {v}
); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 2 — AI generating menu description // ═══════════════════════════════════════════════════════════════════════════ function SceneAI({ active, progress }) { const startTyping = active && progress > 0.18; const text = "Buttermilk stack, fluffy in the middle, lacy on the edges, layered with caramelised banana and Vermont maple. Comes with soft butter on the side — the way it should."; const typed = useTypewriter(text, startTyping, 18); const done = typed.length >= text.length; return (
{/* Left: source item */}
Source item
Maple-banana pancakes
Brunch · $13.50
{['Sweet', 'Comfort', 'Local syrup'].map(t => ( {t} ))}
"fluffy pancakes with banana and maple syrup, butter on side"
CURRENT DESCRIPTION · 1 LINE
Voice
{['Warm', 'Plain', 'Bold'].map((v, i) => ( ))}
{/* Right: AI generation */}
✦
AI · drafting (warm) {startTyping && !done && ( )}

{typed} {startTyping && !done && ( )}

{done && (
Generated in 1.4s
)}
); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 3 — Loyalty member growth // ═══════════════════════════════════════════════════════════════════════════ function SceneLoyalty({ active, progress }) { const members = useAnimatedNumber(1247, active && progress > 0.1, 2200); const newJoinVisible = active && progress > 0.55; return (
{/* Member chart */}
Loyalty members
{Math.round(members).toLocaleString()}
↑ +47 this week
{['7d', '30d', '90d'].map((v, i) => ( {v} ))}
{/* Bar chart */}
{[18, 22, 19, 28, 32, 26, 38, 42, 36, 48, 52, 47, 58, 64].map((h, i) => (
{i === 13 && ( +47 )}
))}
Apr 14Apr 21Apr 28
{/* Right: member card + just-joined */}
RobinRun loyalty · gold
Maya R.
1,240 pts
760 pts to Platinum
{/* Just joined card */}
EM
Elena M. just joined
+50 welcome points · QR scan
🎉
); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 4 — Revenue chart growing // ═══════════════════════════════════════════════════════════════════════════ function SceneRevenue({ active, progress }) { const revenue = useAnimatedNumber(4847, active && progress > 0.1, 2000); const chartProgress = active ? Math.min(1, progress * 2.5) : 0; // Build path const points = [ [0, 78], [60, 72], [120, 70], [180, 60], [240, 58], [300, 50], [360, 42], [420, 38], [480, 32], [540, 24], [600, 18], [660, 14], [720, 10], [780, 6], ]; const fullPath = `M ${points.map(p => p.join(' ')).join(' L ')}`; const fillPath = `M 0 90 L ${points.map(p => p.join(' ')).join(' L ')} L 780 90 Z`; return (
{/* Top stat row */}
{[ { k: 'Today', v: `$${Math.round(revenue).toLocaleString()}`, delta: '+18%', emph: true }, { k: 'Online', v: '$2,184', delta: '+24%' }, { k: 'Dine-in', v: '$1,847', delta: '+8%' }, { k: 'Pickup', v: '$816', delta: '+12%' }, ].map((s, i) => (
{s.k}
{s.v}
{s.delta} vs yesterday
))}
{/* Chart */}
30-day revenue ↑ 32% vs last month
{/* End dot */} {chartProgress > 0.95 && ( )}
); } // ═══════════════════════════════════════════════════════════════════════════ // SCENE 5 — Sending a campaign // ═══════════════════════════════════════════════════════════════════════════ function SceneCampaign({ active, progress }) { const sentVisible = active && progress > 0.65; const recipients = useAnimatedNumber(284, sentVisible, 1200); const revenueEst = useAnimatedNumber(942, sentVisible, 1400); return (
{/* Left: builder */}
Campaign · brunch regulars
Brunch regulars · ordered ≥3× in 30d 284 Push Right now
RobinRun now
Saturday brunch is back at Golden Karahi 🥞 Free naan with your usual — today only.
{/* Right: results */}
Live results
Delivered
{Math.round(recipients)}
Opened
{Math.round(recipients * 0.48)} 48%
Est. revenue impact
${Math.round(revenueEst).toLocaleString()}
tracked to this campaign in 24h
); } function Field({ label, children }) { return (
{label}
{children}
); } // ── Scene caption (consistent across all 5) ──────────────────────────────── function SceneCaption({ eyebrow, title, sub, active, soon }) { return (
{eyebrow}
{soon && ( Coming soon )}

{title}

{sub}

); } // ── Inject scene animations ──────────────────────────────────────────────── if (typeof document !== 'undefined' && !document.getElementById('dt-anims')) { const s = document.createElement('style'); s.id = 'dt-anims'; s.textContent = ` @keyframes dt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } } @keyframes dt-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } } @keyframes dt-caret { 50% { opacity: 0; } } @keyframes dt-fadein{ from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } `; document.head.appendChild(s); } Object.assign(window, { DashboardTour });