animation-sections

Create opaque full-frame video sections from JSX overlay files.

25|10|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/theSamPadilla/montaj --skill animation-sections
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-sections
Source: https://github.com/theSamPadilla/montaj/tree/main/skills/animation-sections
Command: npx skills add https://github.com/theSamPadilla/montaj --skill animation-sections

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear, agent-friendly workflow for building animation-only or full-frame opaque overlay sections when a project has no source footage or when you need to fully replace video frames with designed slides, ensuring the render engine can infer duration and produce a consistent output.

Core Features & Use Cases

  • JSX overlay authoring: write one JSX file per section and save into overlays/ to define the visual frame.
  • Opaque full-frame replacements: overlays marked opaque replace the video frame while preserving source audio, ideal for title cards, stat cards, pull quotes, transitions, and outros.
  • Track and timing rules: tracks[0] remains empty for animation projects, primary visuals go in tracks[1], layered elements use higher tracks, and items in the same track must not overlap.
  • Persistence and rendering: write tracks to project.json and ensure the highest end timestamp defines total duration; follow absolute paths and icon usage rules for predictable renders.

Quick Start

Write an opaque JSX overlay, save it to overlays/title-card.jsx, set an opaque overlay item in tracks[1] with absolute src and correct start/end times, and persist tracks to project.json.

Frequently Asked Questions about animation-sections

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create full-frame opaque video overlays from JSX files?

Create full-frame opaque video overlays by writing individual JSX files per section in the overlays/ directory, then defining opaque overlay items with absolute src paths and start/end times in tracks[1]. This fully replaces video frames while preserving source audio.

How do I structure tracks for animation-only video sections?

Structure tracks for animation-only sections by leaving tracks[0] empty, placing primary visual elements in tracks[1], and using higher tracks for layered elements. Items within the same track must not overlap to ensure predictable renders.

How does the render engine infer duration for opaque overlay sections?

The render engine infers duration for opaque overlay sections by identifying the highest end timestamp among all overlay items. You must persist these tracks to project.json to ensure a consistent output.

Can I use animation overlays to fully replace existing video footage?

Yes, you can fully replace existing video footage by marking overlays as opaque:true. This covers the video frame entirely with designed slides for title cards, stat cards, pull quotes, transitions, and outros while preserving source audio.

What are the limitations when using opaque JSX overlays for video editing?

Limitations of opaque JSX overlays include requiring absolute src paths for predictable renders, mandating non-overlapping items per track, and needing manual duration inference validation from the highest end timestamp to ensure correct output.