Documentation

Code Video to Editable After Effects: HTML & Remotion | ArbiFX

Rebuild HTML, Remotion and Hyperframe code videos as editable After Effects projects with ArbiFX and Code2AE. Skill folders for Codex and Claude Code, setup, example request and AE verification.

Questions and answers

How can I turn an HTML animation into an editable After Effects project?

Give an AI assistant with Code2AE the complete HTML animation project and assets after setting up ArbiFX. Ask it to rebuild the visuals and motion, check and correct differences in AE, then save the project. Keep the source files; renaming a rendered video is not project reconstruction.

Sources: Code video to AE project · Five-minute start

Next step: What do I need to turn code videos into editable AE projects with Codex or Claude Code?

Can I turn a Remotion animation into an AE project for further editing?

ArbiFX with Code2AE supports rebuilding Remotion code animations as editable After Effects projects. Provide the complete Remotion project and its assets, request faithful visuals and motion, and ask for verification in AE before saving. The deliverable is an editable reconstruction rather than only an imported render.

Sources: Code video to AE project

Next step: What source assets should I give AI for code-to-AE work, and how do I verify the result?

How do I deliver a Hyperframe code video as an editable AE project?

With ArbiFX configured, give the Hyperframe source project and assets to an assistant using Code2AE. Specify an editable After Effects project as the deliverable, and request source inspection, reconstruction of visuals and motion, comparison inside AE and saving. Retain the original project for review.

Sources: Code video to AE project

Next step: What source assets should I give AI for code-to-AE work, and how do I verify the result?

What source assets should I give AI for code-to-AE work, and how do I verify the result?

Provide the full source project and required assets so the assistant can inspect the code and observe its output. With ArbiFX configured, request a Code2AE reconstruction and comparison inside AE, followed by corrections and saving. Project creation and visual verification are separate checks.

Sources: Code video to AE project

Next step: What do I need to turn code videos into editable AE projects with Codex or Claude Code?

Code video to After Effects: prepare, rebuild and verify

A code video here means an animation source project such as HTML, Remotion or Hyperframe. Before using the Code2AE workflow in this guide, you must install the ArbiFX plugin, verify and save your API Key, and apply AFX to an AE layer. You must provide the complete source and required assets, then check the reconstruction inside AE before delivery.

Complete the Windows plugin and connection setup, including verification and saving of your account API Key. Keep AE open with ArbiFX → AFX applied to a layer.
Download the complete Skill from the public Code2AE repository and name its folder code2ae. Place it in ~/.codex/skills/code2ae/ for Codex or ~/.claude/skills/code2ae/ for Claude Code.
Give the assistant the full HTML, Remotion or Hyperframe source project and required assets. Specify that the visuals and animation should remain editable. Adapt the request below to your project.
Ask the assistant to inspect the source and observe its output before rebuilding. Compare the result inside AE, correct differences and save. Check project creation and visual verification separately.

Example request for your AI assistant

Use code2ae with the source project and assets I provide.
Deliver an editable After Effects project.
Inspect the original code and output, then rebuild the visuals and motion.
Compare inside AE, correct differences and save the project.

For the distinction between tool connections and animation reconstruction, read AE MCP and code-video workflows. The answer source links above point to the original instructions.

Sources: Public Code2AE instructions

🔥New feature

Code video to AE project

ArbiFX now supports working with Code2AE Skill to rebuild AI-generated HTML, Remotion, Hyperframe and other code-based videos as editable After Effects projects, faithfully reproducing their visuals and motion.

Tell your AI

Please install https://github.com/Oxoxxidane/Code2AE_skill

Follow the five-minute start to install ArbiFX and configure your API Key. Keep AE open and make sure ArbiFX → AFX has been applied to any layer.
Give your AI assistant the complete original code-based video project and required assets, then ask: “Use code2ae to rebuild this code-based video as an editable AE project. Faithfully reproduce the visuals and motion, check and correct any differences in AE, then save the project.”

Five-minute start

Follow these steps in order to complete your first generation.

Go to arbifx.com, click Log in in the top-right corner, then create an account and verify your email. New accounts receive 1200 credits.
Back on the home page, choose Windows X64 in the Download section, then download and run the installer.
On the website, open Dashboard → API Keys, click Create New Key and copy the key.
Open After Effects and select a layer (a new adjustment layer is a good choice). In the Effects & Presets panel, find ArbiFX → AFX and apply it to the layer.
In the Effect Controls panel, click the Start button on the AFX row to open the Start window.
Click API Setting in the top-right corner of the Start window, paste your key and click Verify and Save.
In Effect description, write what you want, for example “a black hole accretion disk with hot orange gas swirling around the center”, then click Send.
Wait a moment. When you see Applied., the effect is on your layer. Adjust its parameters in Effect Controls, or keep describing changes in the Start window.