explainer-videolisted

Create animated, camera-zooming product explainer videos (SVG/HTML style) with voiceover, background music, and synced sound effects. Use when the user wants to turn product screenshots or a screen-recording/demo into an explainer video, an animated walkthrough, a narrated product demo, or a launch/marketing video. The skill interactively interviews the user about design (colors, fonts, scenes, tone), then about the TTS provider (and API key), builds a self-contained animated HTML explainer, renders it to a sharp MP4, and produces separate music & SFX stems. Triggers: "make an explainer video", "animate my product screenshots", "turn this demo into a video", "create a narrated walkthrough", "product launch video".
JagZ999/explainer-video · ★ 1 · Web & Frontend · score 74

Install: claude install-skill JagZ999/explainer-video

# Explainer Video Build a polished, animated **product explainer video** from screenshots and/or a screen recording. The signature look: a dark, modern SVG/HTML UI mockup that the "camera" **zooms and pans** across, with **3D lift** effects on elements as they're named, **ciphertext→plaintext morph** reveals, a typed-prompt → click → result flow, plus **voiceover, background music, and time-synced sound effects**. This skill is **interview-driven**: at every stage you ASK the user with `AskUserQuestion` and wait for answers before building. Never assume design, branding, scenes, or the TTS provider — ask. The user explicitly wants to be asked about colors, fonts, layout, scene order, voice, etc. ## Golden rules - **Gather ALL input files into one working folder BEFORE writing any HTML.** Confirm the folder and its contents with the user first. - **Ask, don't assume** — design, scenes, voice provider, API keys, resolution. One decision per `AskUserQuestion` (or grouped), wait, then proceed. - The example in `assets/example-explainer.html` is the proven **engine + reference**. Copy it and adapt the branding/scenes/content/cues to the user's product. Keep the engine (camera, lifts, morph, chat flow, cue runner, audio-master clock) intact. - Verify visually in the browser preview at each major step (use the preview tools / a local static server). Show the user screenshots; iterate. - Audio tracks (music, SFX) are delivered as **separate files** unless the user asks to mux them