# How to Integrate Animation Overlays from HyperFrames, Remotion, or Manim in video-use

> Learn how to integrate animation overlays from HyperFrames, Remotion, or Manim into video-use. Easily add dynamic visuals to your projects with this guide.

- Repository: [Browser Use/video-use](https://github.com/browser-use/video-use)
- Tags: how-to-guide
- Published: 2026-07-07

---

**The browser-use/video-use repository treats every animation as a stand-alone "slot" that installs the engine locally, renders to `render.mp4`, and references the result in the EDL `overlays` array.**

The `video-use` project provides a containment-based workflow for adding motion graphics to video edits without polluting the main repository. To integrate animation overlays from **HyperFrames**, **Remotion**, or **Manim**, you create isolated directories under the edit folder that handle scaffolding, dependency installation, and rendering independently. This architecture ensures that [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py) can composite the generated clips into the final timeline while strictly following the hard rules defined in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md).

## The Slot-Based Animation Architecture

`video-use` organizes animations as **slots** inside the edit directory:

```

edit/animations/slot_<id>/

```

Each slot functions as a self-contained workspace. When you need an animation, the workflow:

1. **Creates the slot** directory if it does not exist.
2. **Installs the chosen engine** locally within that slot—HyperFrames, Remotion, or Manim—leaving the rest of the repository untouched.
3. **Builds the animation** using HTML/GSAP for HyperFrames, React components for Remotion, or Python scripts for Manim.
4. **Renders the output** to a short video file (`render.mp4` or `render.webm`).
5. **References the file** in the EDL (`overlays` array) so [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py) can splice it into the final output.

The rendering pipeline applies **PTS-shift** (`setpts=PTS-STARTPTS+T/TB`) to align overlay first frames with their start times, and burns subtitles **after** all overlays, as specified in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) lines 24-26.

## HyperFrames Integration (HTML + GSAP)

HyperFrames slots scaffold HTML/CSS/JavaScript projects ideal for kinetic typography and UI mock-ups.

Create and scaffold the slot:

```bash
mkdir -p edit/animations/slot_3
cd edit/animations/slot_3

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

```

Edit [`index.html`](https://github.com/browser-use/video-use/blob/main/index.html) to implement your animation, then validate and render:

```bash
npx --yes hyperframes lint .
npx --yes hyperframes validate .

npx --yes hyperframes render . -o render.mp4

```

For transparent overlays, use WebM format:

```bash
npx --yes hyperframes render . --format webm -o render.webm

```

References: [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) lines 67-71 and 210-212; [`install.md`](https://github.com/browser-use/video-use/blob/main/install.md) line 160.

## Remotion Integration (React + FFmpeg)

Remotion slots contain React projects that render compositions via FFmpeg.

Initialize the slot:

```bash
mkdir -p edit/animations/slot_4
cd edit/animations/slot_4

npx create-video@latest .

```

Implement your animation in [`src/Video.tsx`](https://github.com/browser-use/video-use/blob/main/src/Video.tsx), then install dependencies and render:

```bash
npm install remotion@latest

npx remotion render . <CompositionId> 0 10 -o render.mp4

```

Verify the output dimensions before adding to the EDL:

```bash
ffprobe -v error -show_entries stream=width,height,duration \
    -of default=noprint_wrappers=1:nokey=1 render.mp4

```

References: [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) lines 67-71 and 212-213.

## Manim Integration (Mathematical Animations)

Manim slots use Python for diagrammatic and mathematical animations.

Create the slot and copy the starter template:

```bash
mkdir -p edit/animations/slot_5
cd edit/animations/slot_5

cp ../../skills/manim-video/example_scene.py scene.py

```

Install Manim locally (first-time only) and render:

```bash
pip install manim

manim scene.py MyScene -pql -o render.mp4

```

For alpha channel transparency, convert to WebM:

```bash
ffmpeg -i render.mp4 -c:v libvpx-vp9 -pix_fmt yuva420p render.webm

```

References: [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) lines 98-101; [`skills/manim-video/SKILL.md`](https://github.com/browser-use/video-use/blob/main/skills/manim-video/SKILL.md).

## Adding Overlays to the Final Render

After rendering your animation files, populate the EDL ([`edit/edl.json`](https://github.com/browser-use/video-use/blob/main/edit/edl.json)) with the `overlays` array:

```json
{
  "overlays": [
    {
      "file": "edit/animations/slot_3/render.mp4",
      "start_in_output": 12.3,
      "duration": 5.0
    },
    {
      "file": "edit/animations/slot_4/render.mp4",
      "start_in_output": 30.0,
      "duration": 8.0
    }
  ]
}

```

Run the final composite:

```bash
python helpers/render.py edit/edl.json -o final.mp4

```

The [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py) script automatically handles the **PTS-shift** for alignment and applies subtitles last, ensuring compliance with the hard rules in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md).

## Summary

- **Animation slots** live in `edit/animations/slot_<id>/` and isolate engine dependencies from the main repository.
- **HyperFrames** uses HTML/GSAP with `npx hyperframes render` supporting both MP4 and alpha-enabled WebM outputs.
- **Remotion** requires React components rendered via `npx remotion render` with FFmpeg backend processing.
- **Manim** executes Python scripts generating MP4s, with optional FFmpeg conversion to WebM for transparency.
- **[`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py)** composites all overlays using PTS-shifting and renders subtitles last according to the rules in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md).

## Frequently Asked Questions

### Do I need to install HyperFrames, Remotion, or Manim globally?

No. The slot workflow installs engines locally within the specific slot directory, keeping the main repository clean and avoiding version conflicts, as documented in [`install.md`](https://github.com/browser-use/video-use/blob/main/install.md) lines 59-60.

### What video format should I use for transparent overlays?

Render to **WebM with alpha channel** (VP9 codec). For HyperFrames, use `--format webm`. For Manim or Remotion, use FFmpeg with `-c:v libvpx-vp9 -pix_fmt yuva420p` to convert MP4 outputs to transparent WebM.

### How does video-use handle timing synchronization for overlays?

The [`helpers/render.py`](https://github.com/browser-use/video-use/blob/main/helpers/render.py) pipeline applies `setpts=PTS-STARTPTS+T/TB` to shift overlay video streams so the first frame aligns exactly with the `start_in_output` timestamp defined in the EDL, as specified in [`SKILL.md`](https://github.com/browser-use/video-use/blob/main/SKILL.md) Rule 4.

### Can I combine multiple animation engines in a single project?

Yes. Create separate slots for each engine (e.g., `slot_3` for HyperFrames, `slot_4` for Remotion, `slot_5` for Manim) and reference all rendered files in the EDL `overlays` array. The renderer composites them sequentially in the order defined.