Make a launch film for your product with Claude Opus 5.5 writing frame-by-frame HTML, rendered by Playwright and ffmpeg
A student made a 60-second product film for a small web tool by having Claude Code write one HTML file where every frame depends only on time, screenshotting each frame with Playwright, and reviewing contact sheets before the full render.
Evidence: The source shows its work: steps, screenshots, code or data you can inspect.
The business problem
A founder without motion design skills needs a short, polished product video for launch posts, and one-prompt AI video tools tend to produce generic results that cannot be edited precisely.
What was tried
1. Ask Claude Opus 5.5 in Claude Code to write a single HTML page in which every frame is a pure function of time (no clocks, no random numbers, seeded noise only). 2. Keep a CLAUDE.md file in the project and add each fix as a rule so later sessions do not repeat mistakes. 3. Use the real product page (loaded in an iframe) instead of having the model redraw it. 4. Give numbers rather than adjectives in prompts: easing curves, spring damping, frame counts, plus a list of banned defaults. 5. Render stills and contact sheets, score them against a checklist, fix the three worst problems, and repeat two to four times before rendering everything. 6. Freeze each frame with Playwright, save PNGs, and encode to MP4 with ffmpeg (libx264). 7. Add sound from Openverse, recorded effects or generated effects, mixed to about -14 LUFS, and export a GIF version for X. The first version was flat 2D; the author rebuilt it in 3D with three.js and four-subframe motion blur.
What was reported (not reported)
The author produced the film. The first 2D version was judged flat and not engaging, so it was rebuilt in 3D. Renders took about 0.3 seconds per 1080p frame on a laptop GPU, four times longer with motion blur. No views, sign-ups or other launch results for the product are reported, and the author's own API cost is not given.
Limitations
One person, one video, no audience or business results. The cost and view figures quoted in the article come from other creators and were not checked by the author. Library changes broke steps (a three.js shadow setting removed, a Blender engine renamed), so versions must be pinned. A free sound API timed out. The post is tagged as AI-assisted and is partly a showcase for the author's own film. Needs comfort running Node tooling and ffmpeg.
What you need
Claude Code with access to Claude Opus 5.5, Playwright, ffmpeg, and a computer with a GPU for reasonable render times.
Start with a few stills and a contact sheet before any full render; most fixes happen at that stage.
A prompt to try
Write a single self-contained HTML file for a 10-second, 1920x1080, 30 fps product intro. Every visual must be computed from a time variable t only, with no clocks or Math.random. Use an ease-out cubic for entrances over 18 frames and hold each title for 45 frames. Show the product screenshot at [path] sliding in from the right.
Sources
- DEV Community (Arqam Waheed) ↗ Tutorial, published October 26, 2026
Source published: October 26, 2026. Last reviewed here: October 30, 2026. Spot a mistake? Tell us.
Tools in this workflow
- Claude Code: Writes the animation HTML with Claude Opus 5.5Try Claude Code
- FFmpeg: Encodes frames to MP4Try FFmpeg
- Playwright: Freezes and screenshots each frameTry Playwright
- three.js: 3D rebuild of the filmTry three.js
Get new workflows like this by email
A short selection of the most useful new workflows, including the ones that did not work. Free, and you can unsubscribe at any time.
Related workflows
Rank what to build next with an open-source MCP server that scores support tickets and feature requests, then lets Claude write the plan
A product lead built an MIT-licensed MCP server that pulls Help Scout tickets and ProductLift requests, strips personal data, groups them into themes, scores them with a weighted formula and hands the result to Claude, with business KPIs able to reorder the list.
Create coded explainer animations with Claude, visual references and a voiceover before building scenes
A designer describes making short UX explainers with Claude-written animation code: collect visual references, develop the script and voiceover, build scenes, review and revise. The author also sells reusable style skills.
Test five AI SEO agents on live client sites before trusting one with audits
An SEO agency gave five unnamed AI SEO agents the same audit brief on three client sites for two weeks. Chat wrappers were useless, workflow tools saved time but went shallow, and the one browsing agent found real issues but suggested harmful changes.
Make app demo videos with Veo, then switch to motion transfer from your own footage when it fails
A solo builder of a jiu-jitsu training app generated move demo videos with Veo, found it could not do groundwork moves, and switched to filming the moves themselves and transferring the motion onto an AI athlete with Wan 2.2, plus AI voice cues.