{lines.map((l, i) => {
const o = typeof l === 'string' ? { cmd: true, text: l } : l;
return (
{o.cmd && <>➜{prompt} }
{o.text}
);
})}
);
}
// ── Citation + check row ────────────────────────────────────────
function Citation({ children }) {
return {children};
}
function CheckRow({ pass, label, detail, cite }) {
return (
{pass ? '✓' : '✕'}
{label}
{detail &&
{detail}
}
{cite && {cite}}
);
}
// ── End-of-demo card ────────────────────────────────────────────
// Fades in over the last `revealDur` seconds. Shows Next (from
// window.__nextDemo injected by the layout) + Replay. Clicking Next
// navigates the parent frame to /demos// so the marketing copy
// updates too; Replay seeks the stage back to 0 and resumes playing.
const END_CARD_REVEAL = 1.5; // seconds before duration where card starts fading in
function EndCard() {
const { time, duration, setTime, setPlaying } = useTimeline();
const next = (typeof window !== 'undefined' && window.__nextDemo) || null;
const triggerAt = Math.max(0, duration - END_CARD_REVEAL);
if (time < triggerAt) return null;
const o = Math.min(1, (time - triggerAt) / END_CARD_REVEAL);
const onNext = () => {
if (!next) return;
try {
const target = `/demos/${next.slug}/`;
// If embedded in the marketing iframe (same-origin), navigate the
// parent; otherwise navigate self.
if (window.parent && window.parent !== window) window.parent.location.href = target;
else window.location.href = target;
} catch (_) {
window.location.href = `/demos/${next.slug}/`;
}
};
const onReplay = () => {
if (setTime) setTime(0);
if (setPlaying) setPlaying(true);
};
return (
{next ? 'UP NEXT' : 'END OF DEMO'}
{next && (
<>
{next.title}
{next.subtitle && (
{next.subtitle}
)}
)}
{next && (
)}
);
}
// ── Framework Stage wrapper with record mode ────────────────────
// `showCaptions` defaults to false — these demos autoplay without
// voiceover, so burned-in captions fight the on-canvas text. The
// SUBS arrays are kept in the scene files for when voiceover lands.
// Flip to true (here, or per scene via prop) to re-enable.
//
// `loop` defaults to false — the demo ends with an EndCard overlay
// pointing at the next demo in demos.yaml. Pass loop={true} to
// re-enable the old behavior (and the EndCard never gets a chance
// to mount because the stage rewinds before time === duration).
function DemoStage({ duration = 180, children, captions = [], showCaptions = false, loop = false }) {
const record = isRecordMode();
// In record mode: render raw 1920x1080 with no scaler, no playback bar
if (record) {
return {children};
}
return (
{children}
{showCaptions && }
);
}
// Record stage: auto-plays from 0, fills viewport exactly 1920x1080 (set browser to that)
function RawStage({ duration, captions, children, showCaptions = false }) {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
let start = null, raf;
const step = (ts) => {
if (start == null) start = ts;
const t = (ts - start) / 1000;
if (t >= duration) { setTime(duration); return; }
setTime(t);
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [duration]);
const ctx = React.useMemo(() => ({ time, duration, playing: true }), [time, duration]);
return (