DemoStudio

Learn to build a premium, fully-animated product demo video, step by step. The kind of launch film with camera moves, real UI mockups, and satisfying sound design. No After Effects, no motion designer, no stock footage. It is all HTML + CSS + a little JavaScript, rendered to MP4, with a complete original sound-effect kit included.

This repo is a guided build kit. Follow the four steps below and you go from an empty terminal to a finished, sound-designed demo video for your own product. The techniques come from a real launch film built this way (watch an example on YouTube), but the kit is general purpose: you bring your own product, your own story, and your own brand. Nothing here assumes what your product does.

MIT licensed · works on macOS and Linux · you drive it yourself or hand it to an AI coding agent.

---

The path (do these in order)

New here? Start at Step 1. Each step links to a short doc. Total time to your first rendered video: about 20 minutes, most of it the one-time install.

Step 1 — Set up your machine → docs/SETUP.md

Install the three things this uses (Node, ffmpeg, Python), then run one script. Copy-paste and go:

git clone https://github.com/LucaXav/DemoStudio.git
cd DemoStudio
./setup.sh            # checks + installs Node / ffmpeg / Python deps, then verifies everything

Step 2 — Understand how it works → docs/HOW-IT-WORKS.md

A 5-minute read so nothing downstream is magic: what HyperFrames is, why the whole video is a single timeline that gets "seeked" frame by frame, how the sound layer is a separate data file, and the shape of the render pipeline. Read this once and the rest clicks.

Step 3 — Build your first video → docs/TUTORIAL.md

The main event. A hands-on walkthrough that starts from the working example, renders it, then teaches you to re-skin it to your brand, rewrite the scenes for your product, add a camera move, and design the sound. Every command is included.

Step 4 — Go deeper (reference, dip in as needed)

• docs/ARCHITECTURE.md — every animation set-piece with the actual code (typewriter, avatar floods, 3D fly-ins, the "camera is just scale" trick, the context web, the explosion endcard, real GitHub-style UI in pure HTML).
• docs/SOUND.md — the sound-design playbook: which noise goes on which animation, the mixing rules, and why the kit is synthesized.
• docs/BRANDING.md — the token set and the rules that make it look expensive.

---

What's in the box

DemoStudio/
├── setup.sh               one-command environment setup (Step 1)
├── docs/
│   ├── SETUP.md           install + setup walkthrough
│   ├── HOW-IT-WORKS.md    how the platform + pipeline work (read this)
│   ├── TUTORIAL.md        step-by-step: build your first demo video
│   ├── ARCHITECTURE.md    every set-piece, with real GSAP code
│   ├── SOUND.md           sound-design playbook + motion->SFX table
│   └── BRANDING.md        re-skin tokens + "why it looks premium" rules
├── example/
│   └── index.html         a complete, working 4-scene film. Start from this.
├── sfx/                   25-sound kit, EVERY sound synthesized (100% original, MIT)
├── templates/
│   ├── make_kit.py        regenerates the whole sound kit from numbers
│   └── build_audio_kit.py places the sound cues onto your timeline
├── scripts/
│   └── render.sh          render + re-encode + build sound + mux, in one command
└── SKILL.md               agent playbook (drop the repo into your AI coding agent and ask it to build)

Using it with an AI coding agent (optional, faster)

If you use an AI coding agent (Cursor or similar), you don't have to write the scenes by hand. Open this repo and say:

"Read SKILL.md. Build me a DemoStudio product demo video for my product. Here is what it does: ..."

SKILL.md is written as an agent playbook. The agent reads the docs, copies the example, re-skins it to your product, renders, and designs the sound, following the exact same steps as the tutorial.

What you'll make

One seamless ~30-50s film of full-screen scenes with camera moves. You choose the story. The tutorial walks through a few arcs that work for almost any product:

• problem → your product → payoff
• before (messy) → your product → after (clean)
• a flood of inputs → your product turns them into one output
• a short tour of the features people care about

The bundled example/index.html is a compact 11.5s reference film with four scenes (intro, a flood of items, a product surface with a camera push and count-up, an explosion endcard). It uses generic placeholder copy on purpose, so it demonstrates the techniques without prescribing a story. It renders and sounds great out of the box, so you always have a working reference to compare against. Want to see the ceiling? Watch a full launch film built with this method.

Sound-kit license

Every file in sfx/ is generated by templates/make_kit.py using numpy alone. No samples or third-party audio are included or required, so the kit is original work under this repo's MIT license. Reuse it in anything.

License

MIT. Built by Xander Minzenmay.