![\"Domotion](\"examples/output/domotion-word-demo.svg\")
\n\n \n
\n 🌐 Website & docs\n · \n Showcase\n · \n Quick start\n · \n GitHub\n
\n\n**Domotion turns real HTML/CSS into one self-contained, animated SVG** — an accurate reproduction of the rendered page, with optional animation and simulated interaction built in. It embeds the exact captured glyph data and positioning, so playback never falls back to a viewer's system fonts; the output scales crisply at any size and embeds anywhere with a plain `\n ![\"An](\"examples/output/hero-product-demo.svg\")
\n
A real UI captured and brought to life — one self-contained SVG. More demos →
\n\n## Why\n\nAnimated demos for product marketing and documentation usually mean either:\n\n- A bundle of MP4s — heavy, hard to scale, no inline embedding.\n- A live iframe — slow, requires the source app to be online, breaks accessibility.\n- Hand-authored SVG animations — accurate but enormously time-consuming for anything beyond a couple of frames.\n\nDomotion captures real HTML/CSS as it renders in Chromium, then emits a single inline-embeddable SVG that replays the same pixels with CSS keyframe transitions. Author the demo as plain HTML/CSS in your real app, capture frames, and ship the result as a `![](\"demo.svg\")
` that loads lazily and scales without artifacts.\n\n## Status\n\nActively developed, with a broad shipped surface — capture, multi-frame animation (transitions, overlays, simulated interaction), the template library, terminal capture, nested compositing, and the video/image exports — exercised by an extensive visual-regression suite. The CLIs and the animate-config schema are stable in practice.\n\n## Platform support\n\nDomotion runs on **macOS, Linux, and Windows**, and all three are calibrated. It renders text by extracting the glyphs Chromium selected on the platform you run it on (CoreText on macOS, fontconfig on Linux, DirectWrite on Windows), then embeds those glyphs instead of asking the viewer's machine to perform font fallback. macOS is held to pixel-exact parity; Linux and Windows match Chromium's glyph selection and metrics within a documented native-hinting margin. Linux fidelity is a required CI check; Windows has first-class native validation and release checks, with its slower broad suites dispatched on demand.\n\nIssues, fixes, and platform feedback are welcome on [GitHub](https://github.com/brianwestphal/domotion).\n\n## Quick start\n\n```bash\nnpm install domotion-svg\nnpx domotion capture https://example.com -o example.svg\n```\n\nOpen `example.svg` in a browser. You should see a self-contained, scalable\ncapture of the page with no external fonts, images, or scripts.\n\nDomotion installs Playwright's Chromium binary on first use. CI jobs can run\n`npx playwright install chromium` ahead of time to keep capture runtime\npredictable. For a zero-install trial, run\n`npx -p domotion-svg domotion capture https://example.com -o example.svg`.\n\n## Choose your task\n\n- **Capture one page:** use `domotion capture`; see the\n [capture guide](https://brianwestphal.github.io/domotion/usage/capture/).\n- **Animate a product flow:** use `domotion animate`; follow the\n [animation guide](https://brianwestphal.github.io/domotion/usage/animate/).\n- **Generate a polished asset from flags:** use `domotion template`; browse the\n [template guide](https://brianwestphal.github.io/domotion/usage/templates/).\n- **Author and review a versioned project visually:** use `domotion-studio`; see\n the [Studio guide](https://brianwestphal.github.io/domotion/usage/studio/).\n\nThe [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/)\nwalks through the first capture and animation end to end.\n\n## More capture inputs\n\nAfter the first capture works, the same CLI accepts local files, stdin, element\nselection, custom viewports, optimization, and scrolling pages:\n\n```bash\n# Capture one element from a local file at a specific viewport.\ndomotion capture ./demo.html \\\n --width 1200 --height 600 \\\n --selector \".hero\" \\\n --optimize \\\n -o hero.svg\n\n# Capture HTML from stdin.\ncat demo.html | domotion capture - -o demo.svg\n\n# Capture a long page as one animated scrolling SVG (scrolls to the bottom over 8s).\ndomotion capture https://example.com --scroll \"down:bottom/8s\" -o scroll.svg\n```\n\nNavigation waits for the page's `load` event, then Domotion applies its normal\nfont/image/paint readiness checks. Pages with a finite request chain can opt\ninto Playwright's stricter network-idle heuristic with `--network-idle`; it is\noff by default because analytics, long polling, and streaming requests may\nnever become idle.\n\nSame-origin `