Back
RCreddit.com
22
·5 hr ago·Dev community · RSS

Zero After Effects: Claude Code built, animated, and edited a full 60s commercial for my startup.

View original
ClaudeOpen source

Heat trend

Collecting trend data

The percentage is based on available heat signal, not comment count or independent people.

Why it matters

This covers a coding tool or code-capability update — useful for developers assessing workflow changes and reusable value.

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.

Zero After Effects: Claude Code built, animated, and edited a full 60s commercial for my startup. · BuzzRadr