// Three hero-visual variants, switchable via Tweaks const { useState, useEffect, useRef } = React; // --- Variant 1: "Watcher" — agent observing a workflow timeline --- function WatcherVisual() { const [activeEvent, setActiveEvent] = useState(0); const events = [ { time: "09:14", app: "Gmail", action: "Replied to 12 support tickets", tag: "Repetitive", insight: "Draft template detected" }, { time: "10:02", app: "Figma", action: "Exported 24 assets to Drive", tag: "Automatable", insight: "Export pipeline" }, { time: "11:38", app: "Sheets", action: "Reconciled weekly pipeline data", tag: "Automatable", insight: "4.2 hrs/wk reclaimable" }, { time: "14:21", app: "Slack", action: "Routed 8 questions to #eng-help", agent: true, insight: "Triage agent candidate" }, { time: "15:47", app: "Notion", action: "Compiled team status into doc", agent: true, insight: "Weekly roll-up automation" }, ]; useEffect(() => { const id = setInterval(() => setActiveEvent((e) => (e + 1) % events.length), 2200); return () => clearInterval(id); }, []); return (
{/* Timeline */}
Live shadow · Maria L. · Ops
Tue, Apr 21
{events.map((ev, i) => (
{ev.time}
{ev.app}
{ev.action}
{ev.agent ? "Agent" : ev.tag}
))}
{/* Insight panel */}
Agent observation
"{events[activeEvent].insight}"
); } function Metric({ label, value, accent }) { return (
{label} {value}
); } // --- Variant 2: "Report" — animated sample report preview --- function ReportVisual() { const [progress, setProgress] = useState(0); useEffect(() => { const id = setInterval(() => setProgress((p) => (p + 1) % 100), 80); return () => clearInterval(id); }, []); const findings = [ { task: "Weekly sales report compilation", hours: 4.2, conf: 94, status: "automate" }, { task: "Customer onboarding emails", hours: 3.5, conf: 91, status: "automate" }, { task: "Inventory reconciliation", hours: 2.8, conf: 87, status: "automate" }, { task: "Meeting note distribution", hours: 1.9, conf: 82, status: "draft" }, { task: "Status update collection", hours: 3.1, conf: 78, status: "draft" }, ]; return (
Infrastruct Audit · Q2
Operations Team Report
14 days
{findings.map((f, i) => (
{f.task}
{f.hours} hrs/wk
{f.conf}%
{f.status}
))}
Total reclaimable
15.5h
per employee, per week
Generating recommendations · {progress}%
); } // --- Variant 3: "Network" — agent mesh diagram --- function NetworkVisual() { const [pulse, setPulse] = useState(0); useEffect(() => { const id = setInterval(() => setPulse((p) => p + 1), 1400); return () => clearInterval(id); }, []); const nodes = [ { id: "gmail", x: 12, y: 22, label: "Gmail", color: "var(--pastel-peach)" }, { id: "slack", x: 28, y: 68, label: "Slack", color: "var(--pastel-lilac)" }, { id: "sheets", x: 18, y: 48, label: "Sheets", color: "var(--pastel-mint)" }, { id: "figma", x: 32, y: 18, label: "Figma", color: "var(--pastel-sky)" }, { id: "notion", x: 22, y: 84, label: "Notion", color: "var(--pastel-butter)" }, { id: "salesforce", x: 40, y: 52, label: "Salesforce", color: "var(--pastel-peach)" }, ]; const agents = [ { id: "triage", x: 70, y: 28, label: "Triage agent" }, { id: "report", x: 76, y: 54, label: "Reporting agent" }, { id: "assist", x: 72, y: 80, label: "Assist agent" }, ]; return (
{/* SVG connections */} {nodes.map((n) => agents.map((a, i) => ( )) )} {/* Animated pulse dot traversing */} {agents.map((a, i) => { const src = nodes[(pulse + i) % nodes.length]; return ( ); })} {/* Connector from agents to center output */} {agents.map((a) => ( ))} {/* Employee label column */}
Employee stack
Maria L.
Operations
{/* Nodes */} {nodes.map((n) => (
{n.label}
))} {/* Agents */} {agents.map((a) => (
Agent
{a.label}
))} {/* Output card */}
Delivered
Automation blueprint
); } function HeroVisual({ variant }) { if (variant === "report") return ; if (variant === "network") return ; if (variant === "watcher") return ; return ; } // --- Variant 4: "Combined" — watcher timeline feeding into agent network --- function CombinedVisual() { const [activeEvent, setActiveEventC] = useState(0); const [pulse, setPulseC] = useState(0); const events = [ { time: "09:14", app: "Gmail", action: "Replied to 12 tickets", tag: "Repetitive", agentIdx: 0 }, { time: "10:02", app: "Figma", action: "Exported 24 assets", tag: "Automatable", agentIdx: 2 }, { time: "11:38", app: "Sheets", action: "Reconciled pipeline", tag: "Automatable", agentIdx: 1 }, { time: "14:21", app: "Slack", action: "Routed 8 questions", agent: true, agentIdx: 0 }, { time: "15:47", app: "Notion", action: "Compiled team status", agent: true, agentIdx: 1 }, ]; useEffect(() => { const id = setInterval(() => setActiveEventC((e) => (e + 1) % events.length), 2000); return () => clearInterval(id); }, []); useEffect(() => { const id = setInterval(() => setPulseC((p) => p + 1), 1400); return () => clearInterval(id); }, []); const agents = [ { id: "triage", y: 18, label: "Triage agent", color: "var(--accent)" }, { id: "report", y: 50, label: "Reporting agent", color: "var(--accent)" }, { id: "assist", y: 82, label: "Assist agent", color: "var(--accent)" }, ]; return (
{/* LEFT: Timeline (watcher) */}
Live shadow
Tue, Apr 21
Maria L.
Operations
{events.map((ev, i) => (
{ev.time}
{ev.app} · {ev.action}
{ev.agent ? "Agent" : ev.tag}
))}
{/* MIDDLE: Network routing */}
Routing
{agents.map((a, i) => { const isActive = agents[events[activeEvent].agentIdx].id === a.id; return ( ); })} {/* Animated pulse from timeline-side to active agent */} {/* Agent nodes on right edge */} {agents.map((a, i) => { const isActive = agents[events[activeEvent].agentIdx].id === a.id; return (
Agent
{a.label}
); })}
{/* RIGHT: Live metrics panel */}
Reclaimable
11.4 hrs
per person, per week
); } Object.assign(window, { HeroVisual, WatcherVisual, ReportVisual, NetworkVisual, CombinedVisual });