Demo videos

Product demos are built from the real production components — the same ReadOnlyChatView, RequirementsPanel, TaskPanel, and TestResultsPanel the application ships — driven by a controlled timeline instead of live state. The scrubbable player below is a Remotion composition; the identical component renders the homepage’s auto-playing showcase and exports to MP4.

How it works

The demo kit lives in apps/editor-web/src/demos. Its core idea: the visible room state is a pure function of elapsed time.

• A DemoScenario is plain data — a sequence of beats (DemoStep), each pinning a full DemoRoomState (chat messages, planning tasks, requirements, test results, preview URL, active tab, caption) to a startMs.
• demoStateAt(scenario, timeMs) resolves the state for any moment, so the same scenario can be driven by a looping animation-frame clock on the web (useDemoClock) or by Remotion’s frame clock ((useCurrentFrame() / fps) * 1000).
• DemoRoomStage paints that state through the production components, pixel-for-pixel.

Authoring a new demo

1. Write a scenario in apps/editor-web/src/demos/scenarios/ — mock the domain data with the same shapes the components consume and lay out beats with startMs (see hero-journey.ts for the reference).
2. Register a composition in apps/editor-docs/src/demo-videos/Root.tsx — duration, fps, and canvas size come from the scenario itself.
3. Preview and export with pnpm --filter editor-docs demos:studio (live scrubber) or pnpm --filter editor-docs demos:render <id> (MP4).
4. Embed it in these docs with @remotion/player inside a /preview/* route, or as an auto-playing loop with useDemoClock like the homepage showcase.