Skip to content

Releases: 45ck/demo-machine

v0.3.0 — Visual Select Dropdown, Verification Suite, 13 New Scripts

25 Mar 05:10
@45ck 45ck
v0.3.0
30caf04

Choose a tag to compare

View all tags
v0.3.0 — Visual Select Dropdown, Verification Suite, 13 New Scripts Latest
Latest

Highlights

Visual Select Dropdown

Native <select> dropdowns are invisible in Playwright video captures — they render as OS-level windows outside the viewport. This release adds visual dropdown overlays so viewers see the full interaction: cursor moves to element → dropdown opens → cursor traverses options with blue highlight → target selected → dropdown closes → value set.

4 approach modes via DM_SELECT_APPROACH env var:

  • C (default) — Polished fake overlay styled like Chrome's native dropdown
  • A — Clone real <select>, expand as listbox with real <option> elements
  • B — Click-open native dropdown + keyboard navigation (opt-in, platform-dependent)
  • D — Custom hook via registerCustomSelectApproach() for extensibility

Verification & Showcase Suite (13 new scripts)

  • golden-frames.mjs — Extract/compare key frame baselines via pixelmatch
  • visual-diff-gate.mjs — Visual regression CI gate with threshold
  • demo-health-dashboard.mjs — Static HTML health dashboard generator
  • perf-flamechart.mjs — Performance breakdown chart per demo
  • proof-captures.mjs — Orchestrator for per-component proof specs
  • chaos-mode.mjs — Mutation testing (9 mutation types, 66.7% kill rate)
  • flaky-detector.mjs — Multi-run structural flakiness detection
  • healing-demo.mjs — Before/after self-healing showcase video
  • feature-highlight-reel.mjs — 2:47 montage of all 27 demos
  • regression-reel.mjs — Side-by-side baseline vs current comparison video
  • cross-browser-matrix.mjs — Multi-browser capture comparison
  • narration-ab.mjs — Voice variant A/B comparison
  • meta-demo-capture.mjs — Capture orchestrator for meta-demo

11 New Specs

  • 10 proof specs in examples/proof/ testing each action type (click, type, scroll, navigate, hover, select, toggle, drag, assert, wait) — all 10/10 pass
  • meta-demo.demo.yaml — demo-machine recording its own review viewer

CI Enhancements

  • Visual regression diff steps added to both PR and nightly capture jobs (warning-only)
  • Visual diff report uploaded as CI artifact

Bug Fixes

  • NarrationOverlapError downgraded to warning — overlaps detected after render no longer fail the pipeline

Stats

  • 954 tests passing | 27 demo specs validated
  • 10/10 action types verified via proof captures
  • 135 golden frame baselines | 54 event+perf baselines refreshed
  • 6/9 chaos mutations detected (66.7% kill rate)

Public API Additions

  • registerCustomSelectApproach(fn) — register custom dropdown visual
  • SelectApproach / SelectApproachFn types
Assets 2
Loading

v0.2.0

11 Mar 01:20
@45ck 45ck
v0.2.0
20b4999

Choose a tag to compare

View all tags
v0.2.0

What's new

MCP server

Claude can now orchestrate demo creation conversationally via the built-in MCP server (demo-machine-mcp binary). Add it to Claude Desktop with one config block — see the README for setup.

5 tools · 3 resources · 2 prompts

New step actions

  • clickFirstVisible — click the first visible match when a selector returns multiple elements
  • selectFirstNonPlaceholder — select the first real option in a <select>, skipping placeholder entries

Pre-steps

  • httpRequest — seed your API before capture starts
  • setCookie — set browser cookies before navigation
  • setLocalStorage — seed localStorage before navigation

Narration

  • Dead-time compression, callout zoom
  • Auto-sync narration mode
  • Voice cloning via ElevenLabs (demo-machine narration clone)

Quality tooling

  • pnpm quality:verify / pnpm quality:verify:strict — machine-readable verification inventory vs example coverage
  • All 18 actions, 3 preSteps, and 8 target strategies now have example proof

15 new example suites

Forms, auth/OTP, overlays, SPA routing, infinite scroll, tables, charts, virtualization, selector disambiguation, drag-sort, file upload, async skeleton, and API pre-seeding.

Capture artifacts

CaptureResult now surfaces artifacts (tracePath, eventLogPath, metadataPath, environmentPath, verificationPath) for programmatic callers.

Bug fix

  • specDir is now accepted as an explicit option in PipelineOptions — programmatic callers with upload steps no longer rely solely on specPath for relative file resolution.

Install

npm install demo-machine@0.2.0

Or via npx (MCP server):

npx demo-machine-mcp
Loading

v0.1.0 - Initial Release

14 Feb 08:48
@45ck 45ck
v0.1.0
40b2c8f

Choose a tag to compare

View all tags
v0.1.0 - Initial Release

demo-machine v0.1.0

Demo as code — turn YAML specs into polished product demo videos.

Highlights

  • Full pipeline: YAML spec → Playwright capture → ffmpeg render → MP4
  • Smooth cursor: Cubic-bezier eased movement with click pulse feedback
  • Natural typing: Character-by-character with configurable delay
  • Polished overlays: Intro/outro cards, chapter titles with fades and semi-transparent backgrounds
  • Configurable pacing: Global and per-step delay controls
  • Auto lifecycle: Spawns dev server, waits for healthcheck, tears down
  • Redaction: Blur selectors and secret pattern scanning
  • Narration ready: OpenAI, ElevenLabs, Piper TTS with VTT/SRT subtitles

Quick Start

git clone https://github.com/45ck/demo-machine.git
cd demo-machine
pnpm install && pnpm build
node dist/cli.js run examples/todo-app.demo.yaml --output ./output --no-narration --no-headless

Requirements

  • Node.js >= 22
  • pnpm
  • ffmpeg on PATH
  • Playwright: pnpm exec playwright install chromium
Loading