How to Turn Claude Animations into Editable After Effects Comps (2026 Guide)

Why Claude animations are hard to edit

When you ask Claude for a motion video, it doesn't render pixels. It writes code: an HTML page where text, shapes and images are animated with CSS, SVG or a library like GSAP. Open the file in Chrome and it plays like a video.

That's great for speed, but it isn't After Effects. There's no timeline, no Graph Editor, no layers to grab. And motion design work is never done after the first version:

• Retiming: the client wants the logo to land half a second later.
• Retyping: the headline changes, or the video needs five language versions.
• Polishing: you want proper easing, motion blur, a camera move or sound design synced to the beat.
• Handing off: the team expects an .aep file, not a web page.

Every option below is a way of getting that HTML animation into After Effects. They differ in how much of it stays editable.

The 4 ways to get a Claude animation into After Effects

1. Record it as an MP4 and import the video

Play the HTML in your browser, record it (or ask Claude for a render script), and drop the MP4 into After Effects. It's quick and it looks exactly like the original.

The catch: it's one flat video layer. You can trim it and put effects on top, but you can't retype a word, move one element or change a single ease. Any change means going back to Claude and recording again.

2. Rebuild it by hand in After Effects

Use the Claude video as a reference and recreate every shape, text layer and keyframe yourself. You end up with a clean, fully editable project.

The catch: it takes hours, often longer than animating from scratch, because you're matching someone else's timing frame by frame. It also throws away most of the speed that made Claude worth using.

3. Ask Claude to write an After Effects script

Claude can write ExtendScript (.jsx) that builds layers and keyframes when you run it in After Effects. For simple scenes this can work.

The catch: it's a second, separate piece of code from the animation you actually liked. Scripts often fail on fonts, masks, easing and nested comps, and fixing them means more back-and-forth (and more tokens) for every scene. What you get rarely matches the HTML version.

4. CodeFlow

CodeFlow is an After Effects extension plus a free Claude skill. Claude writes the video as one HTML file, and the CodeFlow panel reads it frame by frame on your computer and rebuilds it as native After Effects comps: text layers in the right font, shape layers, masks, gradients, real keyframes with Bezier easing, precomps and parented camera moves. Audio and video clips come along as layers too.

The catch: it's an extension you install (a .zxp), and it needs Google Chrome or Microsoft Edge on your computer. It's free to try with free builds on every computer, then a one-time lifetime license, not a subscription.

Side by side

Step by step: Claude to editable After Effects comps with CodeFlow

Setup takes about five minutes the first time. After that, every new video is: ask Claude, drag, Build.

1. Download CodeFlowGet it from the download page. The ZIP contains the installer (.zxp), the Claude skill (codeflow-skill.zip) and a PDF manual.
2. Install the extensionOpen the .zxp with a free ZXP installer, such as the aescripts ZXP Installer, then restart After Effects. Make sure Google Chrome or Microsoft Edge is installed: CodeFlow uses it quietly in the background to read your video.
3. Add the free skill to ClaudeIn the Claude app, open Settings → Capabilities → Skills, click Upload skill and choose codeflow-skill.zip. In Claude Code, run /plugin marketplace add aeflowtools-cpu/codeflow and then /plugin install codeflow@aeflowtools.
4. Ask Claude for your videoDescribe the animation and add "make it for CodeFlow". Claude writes the video as one HTML file and tells you where it saved it. Open it in Chrome to watch it, and ask for changes until you like it.
5. Drop it on the panelIn After Effects, open Window → Extensions → CodeFlow and drag the HTML file onto the panel. It converts on your computer, without AI, and lists anything it couldn't convert exactly.
6. Click BuildCodeFlow installs any missing fonts and builds native comps in their own project folder. Your existing project is never overwritten, so you can keep adding more videos.

Prompts that work well

Be specific about length, size, style and the moments that matter. A few examples:

Because everything lands as layers, you don't need the prompt to be perfect. Get the structure and timing close in Claude, then finish the details in After Effects, where you're fastest.

What converts, and what doesn't

CodeFlow is built to make the After Effects version match what Claude made. In our tests, most videos match the original at 97–99% frame similarity. Here's the honest list:

• Native and editable: text (in the right font), shape layers, images, masks, gradients, blur and drop shadow, precomps, parent layers with camera moves, and keyframes with Bezier easing in the Graph Editor.
• Converted to After Effects equivalents: CSS blend modes become blending modes, and CSS 3D becomes an After Effects camera with 3D layers.
• Come in as pictures that still move with keyframes: canvas and WebGL drawing, gradients with three or more colours, and noise textures.
• Not converted: backdrop blur.
• Watch out for: SVGs exported from Figma with Outline text turned on (Figma's default). Those words are already shapes, so there's no text to recover. Export them again with Outline text unchecked.

The panel tells you exactly which parts came in as pictures, so there are no surprises after the build.

Common problems

• The panel can't read the video: install Google Chrome or Microsoft Edge (both free). CodeFlow uses it in the background.
• CodeFlow asks you to go online: it checks your license or free builds online when it opens and before each build. Your projects and files never leave your computer.
• The text came in as shapes: the source used outlined text, as described above.

FAQ

Can Claude make animations for After Effects?

Claude can't open After Effects, but it can write a motion video as an HTML file. With the free CodeFlow skill, it writes that file in a form the CodeFlow panel can rebuild as native After Effects comps with real layers, text and keyframes.

Is the text editable in After Effects?

Yes. Text arrives as live After Effects text layers in the right font, and the fonts travel with the file and install automatically. The one exception is text that was already turned into outlines before it reached CodeFlow.

Does converting the video use AI or tokens?

No. Claude only writes the video. The conversion runs inside the CodeFlow panel on your own computer, without AI, so it adds no token cost.

Can I convert an HTML animation I already have?

Yes. Any HTML video that plays by itself, made with GSAP, CSS animations, SVG, canvas or plain JavaScript, can be dropped on the panel as it is. It finds the length and size by itself.

Which After Effects versions are supported?

After Effects 2022 or newer, with Google Chrome or Microsoft Edge installed.

The bottom line

If the Claude video is final and nobody will ever ask for changes, record it as an MP4 and move on. For anything a client, a team or future you will want to edit, you need real After Effects layers. Rebuilding by hand gets you there slowly, scripts get you there unreliably, and CodeFlow gets you there in one Build.

I built CodeFlow because Claude kept giving me animations I liked but couldn't touch. Now they land in After Effects the way I'd have built them myself, and I spend my time on the parts that need a motion designer.

Working from Figma instead? Read How to import Figma into After Effects.