Zero After Effects: Claude Code built, animated, and edited a full 60s commercial for my startup.
热度趋势
趋势数据积累中
百分比基于当前可用热度信号,而非评论数或独立用户人数。
这条记录涉及编程工具或代码能力更新,适合开发者评估工作流变化和可复用价值。
I built a job-hunt platform with Claude Code that I'm genuinely proud of, but as a full-stack engineer, promotion is definitely not my forte. The platform does too much to explain in a quick paragraph, so I needed a high-paced video that shows the entire user flow in 60 seconds.
Inspired by u/BiosRios ' post , I decided to see if Claude Code could just make the commercial for me. No After Effects, no Premiere, no motion software. The entire video is a web composition (HTML/JS/CSS) that Claude wrote, and it even handled the screen recording and the final video edit itself.
Claude handled the scene structure, the animation timing, and the typography. I just acted as the director and giving notes beat by beat and scene by scene like a standard review round, and having it recut the parts that weren't landing.
At one point, two takes came back with the exact same visual glitch at the same timestamp. Claude actually debugged its own video output, figured out it was causing the rendering issue through its own recording script, and re-wrote the take to shoot it a different way so the glitch couldn't happen again.
The animation plays as one continuous real-time animation in the browser broken into multiple scenes. It's done in code.
- Pin the stack in the prompt. One self-contained HTML file, all motion as CSS keyframes, a small vanilla JS timeline (scenes with start/end seconds) that toggles scenes on and off, SVG for rings and graphs, no libraries, no canvas. Have it author a fixed 16:9 stage that scales to the window — that's what makes it recordable as video later.
- Define the visual language up front. This is what makes it read as a commercial instead of a webpage. Give it a few rules like: body text is never real text, it's rounded grey bars; real text only for headlines, captions and scores; one accent color for what matters; a fake cursor that taps things. If you have a product, you can instead point Claude at a few real screens and ask it to abstract them into that vocabulary.
- Storyboard before code. Ask for a markdown storyboard: numbered scenes, seconds, captions, and open decisions for you to call. Argue with the doc, not the code.
- Ask for draft aids in the build: a scene-number badge, a dot pager to jump to any scene, and a URL param that hides all of it. Review rounds become "scene 4: cursor misses the button" — fix, re-click, done.
- Record: hide the draft chrome, screen-capture just the stage, trim in ffmpeg. Claude did this part itself on my machine, but any screen recorder works.