← 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, a rounded window with a soft shadow, a crisp vector cursor, click pulses, keyboard-shortcut keycaps, and a cinematic push-in that scales the whole window and eases out at the end; HD=1 re-renders the same capture at retina resolution. Also ingests hand-driven takes recorded with the bundled Chrome extension (tab capture + input-event log) into the same pipeline and editor. Use whenever asked to create/record/improve a demo video, walkthrough, feature showcase, or screencast of a web UI.
surajshetty3416/demo-video-skill · ★ 3 · Code & Development · score 74
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 window + shadow, vector cursor, click pulses, shortcut keycaps, whole-window 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 /