Animation Engines in video-use: HyperFrames, Remotion, Manim, and PIL Compared

video-use supports four optional animation engines—HyperFrames, Remotion, Manim, and PIL—that run as parallel sub-agents to generate overlay videos composited onto your main edit.

The browser-use/video-use repository provides a modular animation system where each overlay is produced by a per-animation slot running independently. When the LLM proposes an animation strategy, it selects one of four animation engines based on the visual style and technical requirements. Understanding these animation engines and their use cases helps you choose the right tool for each overlay.

---

How Animation Engines Work in video-use

Animation overlays in video-use follow a slot-based architecture. According to SKILL.md (lines 31-33 and 203-205), each animation runs in a parallel sub-agent that executes independently of the main edit pipeline.

The workflow works as follows:

1. The LLM writes a slot description in edit/animations/slot_<id>/
2. The slot elects its animation engine based on the desired output style
3. The sub-agent renders the overlay to render.mp4 or render.webm
4. helpers/render.py composites the overlay onto the main edit with PTS-shifting so frame 0 aligns with the overlay window start

All four engines are optional dependencies—they are not installed during the initial setup. As documented in install.md (lines 160-161), you install engines lazily per-slot as needed.

---

The Four Animation Engines

HyperFrames: Browser-Native HTML/CSS/GSAP Compositions

HyperFrames generates video overlays using standard web technologies—HTML, CSS, and GSAP (GreenSock Animation Platform).

Best for:

• Web-style UI motion and micro-interactions
• Kinetic typography and landing-page promos
• UI mock-ups requiring deterministic frame capture
• Animations that need browser-based validation before rendering

HyperFrames operates as a browser-native environment, making it ideal when your source material or design system already lives in CSS.

# Create a new HyperFrames slot

mkdir -p edit/animations/slot_01
cd edit/animations/slot_01

# Initialize minimal project

npx --yes hyperframes init . --example blank --non-interactive --skip-skills

# Edit index.html with HTML + GSAP animations

# ...

# Render the overlay

npx --yes hyperframes render . -o render.mp4   # Use --format webm for alpha channel

---

Remotion: React-Based Video Rendering

Remotion brings React components into the video pipeline, treating video frames as a function of time (useCurrentFrame).

Best for:

• React component demos and documentation
• Data-driven UI animations with dynamic props
• Projects where a React application already exists
• Component-based design systems that need video export

Remotion is the natural choice when your team already builds UIs in React and wants to reuse those components for video overlays.

# Create the slot directory

mkdir -p edit/animations/slot_02
cd edit/animations/slot_02

# Scaffold official Remotion project

npx create-video@latest .

# Write React component animations using <Composition> and <Sequence>

# ...

# Build final video

npx remotion render . MyVideo --output render.mp4

---

Manim: Programmatic Mathematical Animation

Manim (Mathematical Animation engine) excels at precise, code-driven animations for technical and educational content.

Best for:

• 3Blue1Brown-style explainer videos
• Algorithm visualizations and step-through demonstrations
• Geometric constructions and equation-driven scenes
• Mathematical concepts that are easier to script than draw

Manim's Python API provides fine-grained control over vectors, graphs, and transformations—ideal when precision matters more than design iteration speed.

# File: edit/animations/slot_03/scene.py

from manim import *

class Intro(Scene):
    def construct(self):
        title = Text("Welcome", font_size=72)
        self.play(Write(title))
        self.wait(2)

# Render quick-low quality for testing

manim edit/animations/slot_03/scene.py Intro -ql

# Move output to expected location

mv media/videos/scene/Intro.mp4 render.mp4

---

PIL: Low-Level Image Generation

PIL (Python Imaging Library) provides the lightest-weight option, generating frame sequences stitched with ffmpeg.

Best for:

• Simple overlay cards and counters
• Typewriter text effects and progress indicators
• Bar reveals and progressive draws
• Rapid iteration without heavy runtime dependencies

PIL requires no additional services or browsers—just Python and ffmpeg—making it optimal for simple graphics where setup overhead should be minimized.

# File: edit/animations/slot_04/generate.py

from PIL import Image, ImageDraw, ImageFont

width, height = 1280, 720
frames = []
font = ImageFont.truetype("arial.ttf", 80)

for i in range(30):
    img = Image.new("RGBA", (width, height), (0, 0, 0, 0))
    draw = ImageDraw.Draw(img)
    draw.text((width//2, height//2), f"Step {i+1}", font=font, anchor="mm", fill="white")
    frames.append(img)

frames[0].save("render.mp4", save_all=True, append_images=frames[1:],
               duration=100, loop=0, codec="mpeg4")

---

Choosing the Right Animation Engine

Engine	Learning Curve	Dependencies	Strength
HyperFrames	Low (web tech)	Node.js, browser	CSS animations, UI motion
Remotion	Medium (React)	Node.js, React ecosystem	Component reuse, data-driven
Manim	High (Python API)	Python, LaTeX, ffmpeg	Mathematical precision
PIL	Low (Python)	Python, ffmpeg	Speed, simplicity, no bloat

The engine selection happens at the slot level in SKILL.md (lines 203-205). The LLM evaluates:

• Visual style requirements—Does the animation need complex typography, mathematical notation, or web-native rendering?
• Team expertise—Is the implementer stronger in React, Python, or CSS?
• Performance constraints—Does the slot need fast iteration (PIL) or pixel-perfect output (Manim)?
• Integration context—Does the overlay need to match an existing design system?

---

Key Implementation Files

File Path	Purpose
README.md (lines 19-20)	Lists supported animation engines and their roles
install.md (lines 160-161)	Documents optional, lazy installation model
SKILL.md (lines 31-33, 203-205)	Defines parallel sub-agent execution and engine selection logic
helpers/render.py	Implements final compositing with PTS alignment

---

Summary

• video-use offers four animation engines—HyperFrames, Remotion, Manim, and PIL—each optimized for different visual and technical requirements.
• Engines run as parallel sub-agents in per-animation slots under edit/animations/slot_<id>/, rendering independently before compositing.
• HyperFrames suits web-native UI motion; Remotion leverages React components; Manim handles mathematical precision; PIL enables fast, lightweight overlays.
• All engines are optional and installed per-slot, reducing base dependency weight.
• Final compositing occurs in helpers/render.py, which aligns overlay frame 0 with the correct timeline position.

---

Frequently Asked Questions

How do I install an animation engine in video-use?

You install engines lazily per-slot rather than globally. When creating a slot, run the engine's standard initialization command—npx hyperframes init, npx create-video@latest, pip install manim, or ensure PIL is available in your Python environment. The repository does not bundle these dependencies to keep the base installation lightweight.

Can I use multiple animation engines in the same video edit?

Yes. Each animation slot runs as an independent sub-agent, so you can mix engines across slots. For example, you might use HyperFrames for a UI demo, Manim for a mathematical explanation, and PIL for a simple progress counter—all composited onto the same video edit.

Why does video-use use parallel sub-agents for animations?

Parallel execution prevents animation rendering from blocking the main edit pipeline. As documented in SKILL.md (lines 31-33), this architecture allows long-running renders (particularly Manim or complex Remotion compositions) to proceed asynchronously while the main agent continues other work.

What file format should I use for animation overlays?

Use render.mp4 for standard overlays or render.webm when you need an alpha channel for transparency. The compositing pipeline in helpers/render.py handles both formats and performs PTS-shifting to synchronize the overlay with the main edit timeline.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}