Skip to content
Domotion
The word 'domotion' cycling through twenty neon-retro typographic styles

Domotion

For teams shipping product and docs demos: capture real HTML/CSS as one self-contained, animated SVG — not a heavy, fixed-resolution screen recording you re-shoot on every UI change. Accurate, scalable, and embeddable anywhere, with animation and simulated interaction built in, crisp at any size and identical across browsers.
See the showcase Creator recipes Why Domotion Install & quick start View on GitHub

One file. It moves. It scales. It embeds anywhere.

Section titled “One file. It moves. It scales. It embeds anywhere.”

A Domotion output is a single <svg> — no external fonts, images, or scripts. Drop it into a docs site, a landing page, a slide, or a README and it lazy-loads, stays crisp at any zoom, and needs no video file, iframe, or per-device re-encode. In any real browser it plays its CSS animation; on surfaces that sanitize SVG (GitHub READMEs, npm pages, email) it shows a crisp static frame instead — or you export a GIF/MP4.

An analytics dashboard assembling itself in a browser window — KPI cards rise in, a bar chart grows with its peak highlighted, a search query types itself, and a nav item is clicked
A real UI captured and brought to life — staggered entrance, a chart that grows, a search that types itself, a click. One self-contained SVG.

A few things it does

Section titled “A few things it does”

Faithful capture

Reproduces your real HTML/CSS as native SVG — text becomes glyph <path>s, so it looks identical in every browser, crisp at any size.

Animation & simulation

Multi-frame animation with transitions and overlays — plus simulated interaction (recorded clicks and typing) to demo real user flows.

Templates

A few flags become a polished animated SVG — lower-thirds, charts, kinetic text, device mockups, and more.

Compositing

Nest animated layers inside animated layers — a terminal window resizing on a desktop, a scrolling site inside a browser bezel.

A macOS terminal window running git clone, npm install, npm run setup, and npm run dev in one continuous session
A real domotion term capture, composited into window chrome.

A whole product flow — in one SVG

Section titled “A whole product flow — in one SVG”

A single image can demo an entire app, not just a snippet. This is a Domotion recording of Glassbox, an AI code-review tool, walking its whole flow — launch, AI risk triage, a split diff, a line annotation, completing the review, exporting feedback, and an agent applying the fix. Nothing is bundled or running here: it’s a captured walkthrough, faithfully replayed as one infinitely-looping, self-contained SVG you can drop in with an <img> tag.

Glassbox: an animated walkthrough from CLI launch through AI risk triage, a split diff, a line annotation, completing the review, exporting feedback, and a Claude Code agent applying the fix
A real app’s flow, faithfully recorded. See more full-app demos →

Where to go next

Section titled “Where to go next”

Domotion is free & open source — MIT licensed, free for commercial use. · v0.21.1 · GitHub