How to use Claude to make a 3D product film
The author used Claude Code to rebuild a Slabwatch animation in 3D, then rendered browser frames with Playwright and assembled them with ffmpeg.
dev.to
Suggested prompt
Suggested prompt written by Agents In Use, not the source author. Replace bracketed inputs and review tool permissions first.
Create a product film for [product] in one self-contained HTML file using [pinned libraries]. Expose window.renderAt(t) so every frame depends only on time, with seeded noise and no carried state. Use [duration], [frame rate] and [numerical visual direction]. Write a Playwright renderer that waits for fonts, captures PNG frames and uses ffmpeg to encode an MP4. Produce review stills before the full render.
Reach people exploring AI agents
See placements →Evidence at a glance
Sourced account- Source poster / publisher
- arqamwd
- Original account
- Read the source ↗
- Published
- Source link checked
- Reported result
- The author reports producing a 3D Slabwatch product film with lighting, depth of field, a mirror floor and synthesised soundtrack, rendering at about 0.3 seconds per frame on a laptop RTX 2050.
- Human involvement
- The author rejected the first version, describes reviewing stills before full renders, and checked matching hashes for repeated frame renders.
A linked account supports attribution. It does not mean we independently reproduced its result.
Report an issue with this case
Open correction emailOpens your email app with the case link included. Nothing is sent automatically.
How the agent did it
- Set up a motion design agent in Claude Code using Opus 5.5 for the Slabwatch film.
- Created a flat 2D version and rejected its visual direction.
- Rebuilt the film in 3D with a modelled electricity meter and synthesised soundtrack.
The author needed a product film for Slabwatch despite having no motion design background or experience with After Effects. They set up a motion design agent in Claude Code using Opus 5.5. Their first version was a flat 2D animation they disliked, so they moved to a full 3D rebuild.
The reported rebuild included a modelled electricity meter, lighting, depth of field, a mirror floor and a synthesised soundtrack. Claude produced code rather than video pixels. The author's approach used a self-contained HTML file, adding three.js for 3D, with each frame calculated from a supplied time. Playwright captured individual frames, and ffmpeg assembled the PNG images into an MP4. Claude also wrote the rendering script.
The author checked repeatability by rendering one frame twice and comparing file hashes, which matched. They describe reviewing still frames before committing to a full render and replacing vague visual adjectives with numerical direction. The film reportedly rendered on a laptop RTX 2050 at about 0.3 seconds per frame.
Who it's for: Builders who want to direct a product animation through code and can review intermediate frames.
Prompt
Suggested prompt (written by Agents In Use, not the author's)
Source: dev.to · arqamwd
Frequently asked questions
How were Claude's outputs turned into a video?
Claude wrote an HTML animation. Playwright captured frames at specified times, and ffmpeg stitched the resulting PNG images into an MP4.
What did the author check before rendering?
The author describes reviewing stills before a full render and checked repeatability by rendering one frame twice; the file hashes matched.
More details
Remaining steps
- Captured timed browser frames with Playwright and assembled PNGs into an MP4 using ffmpeg.
About this account
Claude wrote the animation program and rendering script; the author directed the visual approach and iteration.
Platform: dev.to. Attribution: https://dev.to/arqamwd/how-i-make-motion-videos-with-claude-opus-55-the-full-setup-prompts-and-numbers-2g09. Prompt: Suggested (written by Agents In Use, not the author's). Sourced by the Agents In Use pipeline.
Credit: arqamwd on dev.to
Source published
Added to Agents In Use
Source checked
Tools and topics
Claude Code · three.js · Playwright · ffmpeg · Chromium
Product films · 3D animation · Browser rendering
Editorial completeness: 100/100. Measures documented fields, not agent performance or verified outcomes.