newtype.
ArticleMay 15, 2026Free to read

Make AI Animations with Codex and Remotion

Turn natural-language instructions into a Remotion project, preview and revise the animation, and render an MP4. A practical comparison with HyperFrames follows.

Originally published . English translation: . Read the Chinese original.

Original video in Chinese.

Key Takeaways

  • Natural-language prompts let Codex and Remotion handle project setup, dependencies, data collection, code, local preview, and MP4 rendering. My example showed SpaceX launches from 2015 to 2025 with abstract parabolic trajectories.
  • I have used this approach for launch animations and biographical video segments. It lowers the cost and difficulty of creating motion graphics for my videos.
  • Remotion suits complex projects with multiple scenes, synchronized captions, charts, and product UI demonstrations. HyperFrames offers a lighter approach to quick motion graphics; choose according to the project.

Codex and Remotion work particularly well for video projects with multiple scenes, synchronized captions, animated charts, and repeatable rendering. Describe the visuals, timing, and style in natural language. Codex creates the React video project, installs dependencies, finds materials, and changes the code; Remotion provides preview and rendering. Clear requirements and a human check of pacing, facts, and visuals are essential before export.

A real demonstration of making animations with Codex and Remotion

Generate an animation with Codex and Remotion

The simplest approach is to install the Remotion plugin in Codex and describe what you need. For example, I asked:

Animate every SpaceX rocket launch between 2015 and 2025 in chronological order. Show parabolic launch trajectories with a fading trail. Use an abstract, minimalist aesthetic.

Codex created the project, set up its structure, installed dependencies, and searched online for relevant materials.

You do not have to watch the entire process. In my experience, Codex can work through the problems it encounters reasonably reliably.

When it finished, Codex opened a local webpage. Clicking play let me preview the animation. It closely followed the prompt: parabolic trajectories representing ten years of launches in an abstract, minimalist style.

If the quality is satisfactory, select Render. The exported result is an MP4 that you can bring into your video editor for further work.

As I mentioned in the community, I had seriously considered hiring someone to add animation to every episode. I often discuss ideas for which there is no ready-made footage.

With further refinement, this SpaceX animation could illustrate my discussion of Musk and his team’s years of continuous rocket development and testing.

I also made a biographical video with Codex and Remotion. That required a detailed prompt and two rounds of revisions to reach the current result.

Choosing between Remotion and HyperFrames

This is another area of demand that AI can now address. Remotion is not the only option: HyperFrames also has a plugin in Codex that you can install.

Both generate video through code. Remotion uses React; HyperFrames uses HTML, CSS, and JavaScript. In my experience, Remotion is better suited to systematic production, while HyperFrames suits rapid creation with AI assistance.

For complex projects involving multiple scenes, caption synchronization, product UI demonstrations, or animated charts, I recommend Remotion. Its main strength is its engineering structure.

For lightweight motion graphics, such as turning a webpage or document into a video, try HyperFrames. Its main strengths are simplicity and suitability for agents.

I made the example in that part of the video with HyperFrames. Try both and decide based on your own experience.

Test environment and acceptance checks

The workflow was first tested in May 2026 and reviewed on August 24, 2026. The combination was the Codex desktop app, a Remotion project, a local browser preview, and MP4 rendering.

For production, check the timeline duration, font licenses, material sources, caption synchronization, visual overflow, and whether your editing software can read the rendered file. Differences in Node, browser, and encoding environments affect the result; a single successful project is not a universal template.

That is all for this episode. If you want to understand AI, become a more capable independent creator, and meet people with similar interests, join the newtype community. See you next time.