// dashboard-scenes.jsx: the four scenes of the Overview demo (23.5 s loop).
// 0.0 to 5.0 SceneOverview the Overview: company header, Legal Coverage, the assistant
// 5.0 to 11.5 SceneAsk a question in plain English, answered with template cards
// 11.5 to 16.5 SceneContext five sources pool into what we know about the company
// 16.5 to 22.5 SceneDispute the free dispute viability check
// (The review scene moved to the Document Review demo, and the closing tagline
// went: the card beside this demo already says "Your company at a glance".)
/* global OV, Icon, useLiveAnchor, Appear, OverviewPage, ConversationPanel, DockedComposer,
UserBubble, AgentText, TypingDots, StepLine, FileChip, TemplateCard, IntakeChips, Assessment, OutlineButton, IndigoButton, SceneCaption,
useSprite, Easing, interpolate, clamp */
// Entry and exit fades shared by every scene.
function fadeInOut(t, duration, { fadeIn = true, fadeOut = true } = {}) {
const enter = fadeIn ? Easing.easeOutCubic(clamp(t / 0.4, 0, 1)) : 1;
const exit = fadeOut ? 1 - clamp((t - (duration - 0.4)) / 0.4, 0, 1) : 1;
return enter * exit;
}
// The app's arrow cursor, drawn at the stage's 2x scale.
function BigCursor({ x, y, clicking = false, opacity = 1 }) {
return (
}
>
{QUESTION}
{t > 3.3 && t < 3.85 && }
Most first hires start with one of these two agreements.
If you are looking to hire someone, these templates are free to use. We can prepare one with you here.
{t >= 4.3 && (
)}
)}
0.3 && t < duration - 0.3} placement={inThread ? 'top' : 'bottom'}>ASK IN PLAIN ENGLISH
);
}
// ─── Scene 3: what we know about the company ──────────────────────────────
// Five sources pool into one company knowledge card (the company brief and
// company memory behind the Overview assistant).
const WEB_CENTRE = { x: 960, y: 530 };
const SOURCES = [
{ id: 'docs', at: 0.5, angle: -90, icon: 'fileText', title: 'Your documents',
fact: 'Shareholders agreement, 3 employment agreements, lease' },
{ id: 'site', at: 1.1, angle: -18, icon: 'globe', title: 'Your website',
fact: 'Sells software subscriptions to customers in Australia' },
{ id: 'chat', at: 1.7, angle: 54, icon: 'messageSquare', title: 'What you tell us',
fact: 'Raising a seed round in the first quarter' },
{ id: 'registry', at: 2.3, angle: 126, icon: 'building2', title: 'Company registry',
fact: 'Pty Ltd, 2 directors, registered in Queensland' },
{ id: 'dates', at: 2.9, angle: 198, icon: 'calendarClock', title: 'Your deadlines',
fact: 'Annual review due 14 November' },
];
const RING = { rx: 620, ry: 400 };
function sourcePos(angle) {
const a = (angle * Math.PI) / 180;
return { x: WEB_CENTRE.x + Math.cos(a) * RING.rx, y: WEB_CENTRE.y + Math.sin(a) * RING.ry };
}
function SourceNode({ source, t }) {
const k = Easing.easeOutCubic(clamp((t - source.at) / 0.4, 0, 1));
const p = sourcePos(source.angle);
return (
{source.title}
);
}
// The threads from each source into the centre, drawn in, with a spark that
// travels along each one as it connects.
function WebThreads({ t }) {
return (
);
}
function KnowledgeCard({ t }) {
const k = Easing.easeOutCubic(clamp(t / 0.5, 0, 1));
const known = SOURCES.filter((s) => t >= s.at + 0.75);
const pulse = SOURCES.some((s) => t >= s.at + 0.72 && t < s.at + 0.95);
return (