Recently I attended a workshop on AI-driven video creation at Automattic, and I left wanting to try it myself. I started with a launch video for a site I’d just shipped with the Special Projects team since I had plenty of content to go from in my project recap post.
After prompting Claude to create the video, I realized I didn’t want to record the screen captures myself. I have Loom and Screen Studio, but I didn’t want to spend an afternoon clicking through the site and redoing every take I fumbled. I literally just didn’t want to spend the time doing it.
I asked Claude to capture the clips. They were okay, but they didn’t have what I love about Screen Studio: the smooth movement and the push-ins on every click.
Claude can’t drive Screen Studio, so I asked it to build something it could.
We ended up with capture director. I tell Claude what I want in the video, and it writes a shot list for itself, like open this page, click this tab, scroll to that button. I let Claude drive itself this time, but I could give it more specific steps, or I could just provide general guidance and let Claude decide what to show, because on some projects it knows as much about my work as I do. Once Claude has the shot list, it records the video in headless Chrome, with a clean cursor and a zoom on key interactions and clicks.
Claude is getting so much better at video, so this is the perfect time to make a tool like this. Plus, this is one more task to take off my plate to let me continue to orchestrate Claude (and Codex) through my daily tasks.
After the capture director tool was created and tested on one project, I wanted another site I didn’t mind testing on. I’ve been loving post formats on my blog, so a “launch” video for those updates sounded fun. Here’s the raw footage from capture director:
It’s fine, but it’s not really a launch video. This is where I got to put the lessons from the AI video workshop to use. Here’s the same footage after using HyperFrames, in my blog’s typeface and colors:
The two pair well. Capture director gets real footage of the live site, and HyperFrames turns it into a story with titles, type, and motion. They run on the same setup (Node and Chrome), so if you can run one, you can run the other. HyperFrames is really cool; this was my first time using it, and I plan to play with it more.
I keep thinking about client work. On the Special Projects team, we hand sites to partners with walkthrough videos. These take a lot of time to create for each site, so experimenting with AI creating the videos could be a nice change to our process. Basic browser recordings come across pretty bland, so my hope is that the zooms and motion make those look more professional, and when a template changes after launch, I can rerun the shot list instead of recording it again. The same setup could make short hype or launch videos for clients, too.
It’s early, and I’ve only tested it on macOS. The code is on GitHub at dhanson-wp/capture-director, and it has a landing page at capture-director.space.fast.1 Try it out!
Leave a Reply