What is Domotion?
And when (and when not) to reach for it.
Domotion is a Node tool that takes a piece of HTML rendered in headless Chromium and converts it into a single self-contained SVG file. If you capture several HTML states, it can stitch them together into one SVG with CSS keyframe animations between frames. The output renders pixel-faithfully in Chromium, scales crisply at any size, and embeds without external assets.
Most users start with the CLI:
npm install -g domotion-svg
domotion capture https://example.com -o example.svg
In practice that means you can author a marketing or documentation animation
the same way you build the rest of your product — plain HTML, plain CSS,
inside your real component library — and ship the result as a single
.svg file that drops into an <img> tag.
When you outgrow the CLI's vocabulary, the same engine is available as a
TypeScript API.
The problem it solves
The usual ways to put a moving demo on a marketing or docs page each have a real cost:
| Approach | Trade-off |
|---|---|
| MP4 / WebM video | Heavy bytes, fixed resolution, awkward to lazy-load, no inline embedding, captions are extra work. |
Live <iframe> of the real app |
Slow first paint, requires the source app to be online, breaks for users on flaky networks, accessibility regressions. |
| Hand-authored SVG / Lottie | Pixel-accurate but enormously time-consuming for anything beyond a couple of frames; drifts out of sync with the real product. |
| Animated GIF | Limited color palette, large file size, no native scaling. |
Domotion is the option you reach for when you want the fidelity of "show the real thing" without the runtime cost of an embed and without the authoring cost of hand-rolling an animation.
What you get out
- One file. A self-contained SVG with text as glyph paths or
<text>elements, backgrounds and borders as native SVG primitives, gradients translated to<linearGradient>/<radialGradient>, and any rasterized pieces (emoji, bitmap glyphs) embedded as base64 PNG. - No external dependencies at runtime. Everything the SVG needs to paint is inside the file.
- Cross-browser consistency. The path-rendered text mode bakes glyph outlines into the SVG, so the result looks identical in Firefox, Safari, and Chromium even though the capture was Chromium-only.
- Optional CSS animations — cross-fades, push-left transitions, scroll, and per-frame typing / tap overlays — composed across multiple captured frames.
When to use Domotion
- Marketing landing pages that need a polished hero animation of your product UI.
- Documentation walk-throughs ("here's what happens when you click X").
- Changelog entries showing before/after behavior.
- Teaching material that needs to scale crisply on retina displays and at zoom.
- Anywhere you'd otherwise embed a screen recording but care about file size and embedding ergonomics.
When not to use Domotion
- You need true 60fps motion or video playback. Domotion produces frame-by-frame transitions, not real-time animations. For game-feel motion or video content, stick with an MP4 / WebM.
- You need cross-engine pixel matching at capture time. Domotion captures Chromium. If you need exactly the Firefox or Safari layout to be your source of truth, that engine isn't supported.
- You need a fully interactive embed. The output is a static SVG. It can play CSS animations on a loop but it can't respond to clicks or typing.
Origin: Domotion was extracted from the
slicekit project in 2026-04, where it had been in use as
tools/svg-demo-gen. APIs may still shift while the standalone
surface stabilises — see the API reference for the current export list.
Next
Head to Installation to set up Node and Playwright, then jump into the Quick start for a five-minute end-to-end capture.