← ClaudeAtlas

demo-videolisted

Produce a polished, ScreenStudio-style 60fps product demo video of a web app with a tiny, dependency-light pipeline — Playwright frame capture + a multiprocess Pillow compositor streaming into ffmpeg (no Node/Remotion). Drives the app one step per frame so playback is true 60fps regardless of capture speed, then renders a gradient background, rounded panel + shadow, a crisp vector cursor, and smooth cinematic zoom/pan that holds steady during the action and eases out at the end; HD=1 re-renders the same capture at retina resolution. Use whenever asked to create/record/improve a demo video, walkthrough, feature showcase, or screencast of a web UI.
surajshetty3416/demo-video-skill · ★ 1 · Code & Development · score 72
Install: claude install-skill surajshetty3416/demo-video-skill
# Demo video (deterministic frames → Pillow compositor → ffmpeg) A lightweight, reproducible way to make a **crisp 60fps ScreenStudio-style** demo of a web app. Two stages, all code, only Python + Pillow + ffmpeg: ``` capture_template.py → frames/f*.jpg + meta.json (Playwright: 1 step per frame + camera/mouse timeline) │ compositor.py → demo.mp4 (multiprocess Pillow render — bg + rounded panel + shadow + crisp vector cursor + zoom/pan — streamed straight into ffmpeg; 60fps H.264, bt709) ``` The compositor renders with a worker pool and pipes frames directly into one ffmpeg process (no intermediate PNGs, no second pass). Default output is the classic panel size; `HD=1 python compositor.py …` re-renders the SAME capture at retina resolution (uses all pixels of a DSF=2 capture) when a crisper deliverable is worth ~3x the composite time. ## Step 0: ask the user for the inputs — don't go discover them The capture needs facts only the user reliably knows. Hunting for them (grepping configs for dev-server URLs, guessing test credentials, probing routes) burns time and tokens and often lands on the wrong instance. Before writing any code, ask for whatever is missing from this list, in ONE batch: 1. **Target URL** — the running app / dev server to record (e.g. `http://myapp.localhost:8000`), and the specific page or route