Interactive Product Demo — Design skill for Claude Code

Interactive Product Demo — a Claude Code skill for animated product demos without video

[](LICENSE) [](CHANGELOG.md) [](https://claude.com/claude-code) [](#requirements)

**Interactive Product Demo is an open-source [Claude Code](https://claude.com/claude-code) skill that builds a landing-page product demo out of live DOM and CSS instead of a screen recording.** It replicates a screen of your React app with your own components, then animates a scripted cursor and a panning, spotlighting camera through one task. No video, GIF, Lottie, or canvas. It adds about 40 KB of plain TypeScript and CSS source and no runtime dependencies.

**In short:** a code-based, auto-playing alternative to a hero video, a Loom, or an animated GIF of your UI. Text stays sharp, layout stays responsive, and when your product changes, the TypeScript compiler tells you the demo needs updating.

You point Claude at a screen in your app. It builds a replica from your own components fed fixture data, then scripts a cursor through one task while a camera pans, pushes in, and holds on the result. Nothing is pre-rendered — no video, no GIF, no Lottie, no canvas. The demo is your product, running.

You:    /interactive-product-demo — hero animation for the landing page,
        the leave-approval screen
Claude: [asks 2–4 questions] → [writes a brief, you confirm]
        → [shows you the beat script, you confirm]
        → [builds it, verifies it in a browser]

---

Why build a product demo in code instead of a video?

A coded demo weighs nothing beyond the page, renders sharp text at any size, reflows to fit its container, and is edited like any other component. A video has to be re-recorded every time the c