html-explainer-video
Turn a product, a feature or an idea into a finished one-minute explainer video in any look: a script (hook, benefit, quick tutorial, try it), a voice whose words are the clock, HTML scenes drawn from that one clock and rendered frame by frame at 2×, and an edit in Fil's video editor over MCP with captions, music, sound effects and chapters. The look is an input, read from the person's site or a named style, so the same film can wear any type, colour, corners and motion. The shape is an input (4:3, 16:9, 1:1, 9:16). No camera by default: a voice-led film whose scenes fill the frame; ask for a camera and it adds record slots, layouts by keyframes and a teleprompter. Use when someone wants an explainer, a feature video, a product walkthrough, an onboarding video, a how-it-works video or a launch video, wants one in their own brand, or wants it without filming anything.
Pinned to revision ecc7753bd32f, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/html-explainer-video/SKILL.md
- skills/html-explainer-video/agents/openai.yaml
- skills/html-explainer-video/demo/PROMPT.md
- skills/html-explainer-video/demo/film.css
- skills/html-explainer-video/demo/film.html
- skills/html-explainer-video/demo/film.js
- skills/html-explainer-video/demo/index.html
- skills/html-explainer-video/demo/looks/night.css
- skills/html-explainer-video/demo/looks/paper.css
- skills/html-explainer-video/demo/looks/poster.css
- skills/html-explainer-video/demo/looks/terminal.css
- skills/html-explainer-video/demo/looks/terminal.md
- skills/html-explainer-video/demo/pictures/box.webp
- skills/html-explainer-video/demo/pictures/fil.png
- skills/html-explainer-video/demo/pictures/ridge.webp
- skills/html-explainer-video/demo/preview.jpg
- skills/html-explainer-video/demo/script.txt
- skills/html-explainer-video/demo/voice.mp3
- skills/html-explainer-video/demo/words.js
- skills/html-explainer-video/demo/words.json
- skills/html-explainer-video/references/camera.md
- skills/html-explainer-video/references/checks.md
- skills/html-explainer-video/references/fil-editor.md
- skills/html-explainer-video/references/format.md
- skills/html-explainer-video/references/looks.md
- skills/html-explainer-video/references/sound.md
- skills/html-explainer-video/scripts/check-film.mjs
- skills/html-explainer-video/scripts/explainer.css
- skills/html-explainer-video/scripts/explainer.js
- skills/html-explainer-video/scripts/preview.mjs
- skills/html-explainer-video/scripts/read-look.mjs
- skills/html-explainer-video/scripts/render.mjs
- skills/html-explainer-video/scripts/sfx.mjs
- skills/html-explainer-video/scripts/words.py
- skills/html-explainer-video/sounds/LICENSE.txt
- skills/html-explainer-video/sounds/bell_A4.mp3
- skills/html-explainer-video/sounds/bell_C5.mp3
- skills/html-explainer-video/sounds/bell_E5.mp3
- skills/html-explainer-video/sounds/click-confirm_1.mp3
- skills/html-explainer-video/sounds/click_1.mp3
- skills/html-explainer-video/sounds/click_2.mp3
- skills/html-explainer-video/sounds/drop_1.mp3
- skills/html-explainer-video/sounds/hit_1.mp3
- skills/html-explainer-video/sounds/key-return_1.mp3
- skills/html-explainer-video/sounds/key_1.mp3
- skills/html-explainer-video/sounds/key_2.mp3
- skills/html-explainer-video/sounds/key_3.mp3
- skills/html-explainer-video/sounds/kit.json
- skills/html-explainer-video/sounds/land-light_1.mp3
- skills/html-explainer-video/sounds/land_1.mp3
- skills/html-explainer-video/sounds/land_2.mp3
- skills/html-explainer-video/sounds/pop_1.mp3
- skills/html-explainer-video/sounds/pop_2.mp3
- skills/html-explainer-video/sounds/riser_1.mp3
- skills/html-explainer-video/sounds/snap_1.mp3
- skills/html-explainer-video/sounds/swell_1.mp3
- skills/html-explainer-video/sounds/tick-crisp_1.mp3
- skills/html-explainer-video/sounds/whoosh-long_1.mp3
- skills/html-explainer-video/sounds/whoosh-short_1.mp3
- skills/html-explainer-video/sounds/whoosh-short_2.mp3
Every link opens the file at its source, pinned to the revision this page describes.