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

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 can composite the generated clips into the final timeline while strictly following the hard rules defined in 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 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 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:

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

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

Edit index.html to implement your animation, then validate and render:

npx --yes hyperframes lint .
npx --yes hyperframes validate .

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

For transparent overlays, use WebM format:

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

References: SKILL.md lines 67-71 and 210-212; install.md line 160.

Remotion Integration (React + FFmpeg)

Remotion slots contain React projects that render compositions via FFmpeg.

Initialize the slot:

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

npx create-video@latest .

Implement your animation in src/Video.tsx, then install dependencies and render:

npm install remotion@latest

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

Verify the output dimensions before adding to the EDL:

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

References: 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:

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:

pip install manim

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

For alpha channel transparency, convert to WebM:

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

References: SKILL.md lines 98-101; skills/manim-video/SKILL.md.

Adding Overlays to the Final Render

After rendering your animation files, populate the EDL (edit/edl.json) with the overlays array:

{
  "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:

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

The helpers/render.py script automatically handles the PTS-shift for alignment and applies subtitles last, ensuring compliance with the hard rules in 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 composites all overlays using PTS-shifting and renders subtitles last according to the rules in 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 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 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 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.

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