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

> Explore animation engines HyperFrames Remotion Manim and PIL within video-use. Compare their features and use cases to create dynamic overlay videos for your edits.

- Repository: [Browser Use/video-use](https://github.com/browser-use/video-use)
- Tags: comparison
- Published: 2026-08-06

---

**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`](https://github.com/browser-use/video-use/blob/main/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`](https://github.com/browser-use/video-use/blob/main/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`](https://github.com/browser-use/video-use/blob/main/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.

```bash

# 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.

```bash

# 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.

```python

# 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)

```

```bash

# 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.

```python

# 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`](https://github.com/browser-use/video-use/blob/main/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`](https://github.com/browser-use/video-use/blob/main/README.md) (lines 19-20) | Lists supported animation engines and their roles |
| [`install.md`](https://github.com/browser-use/video-use/blob/main/install.md) (lines 160-161) | Documents optional, lazy installation model |
| [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) (lines 31-33, 203-205) | Defines parallel sub-agent execution and engine selection logic |
| [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/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`](https://github.com/browser-use/video-use/blob/main/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`](https://github.com/browser-use/video-use/blob/main/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`](https://github.com/browser-use/video-use/blob/main/helpers/render.py) handles both formats and performs PTS-shifting to synchronize the overlay with the main edit timeline.