Skip to content

mregamerz/reporeel

v1.0.0MIT

Agent plugin and skill suite that turns any active web project or repository into a polished promotional video (MP4 or MOV) with motion, music, SFX, poster frame, and share copy.

GitHubOpen Website

RepoReel

License: MIT Stars PRs Welcome

You built the project. Now turn it into a reel.

RepoReel (/reporeel and /reporeel-slim) is an agent plugin and skill that turns any active web project, repository, or live URL into a polished, shareable promotional video in MP4 or MOV format, complete with motion graphics, music, sound effects, a baked frame-0 poster thumbnail, and social share copy.

You do not need to clone RepoReel into your web project or configure paid LLM/video API keys. Install the plugin once in your coding agent, open any project you are working on, and run /reporeel.

Install RepoReel as a plugin

Google Antigravity (agy)

git clone https://github.com/MrEGAMERZ/RepoReel.git /tmp/reporeel && agy plugin install /tmp/reporeel

Cursor, Gemini CLI, Codex, Copilot, opencode (via skills.sh)

npx skills add https://github.com/MrEGAMERZ/RepoReel --skill reporeel -g
npx skills add https://github.com/MrEGAMERZ/RepoReel --skill reporeel-slim -g

Claude Code

/plugin marketplace add MrEGAMERZ/RepoReel
/plugin install reporeel@reporeel

Codex CLI

codex plugin marketplace add MrEGAMERZ/RepoReel
codex plugin add reporeel@reporeel

Zero-config discovery paths

RepoReel exposes its skills at every standard agent discovery path via symlinks:

AgentDiscovery path
Google Antigravity~/.gemini/config/plugins/reporeel/ (plugin) or .agents/skills/reporeel/
Cursor.cursor-plugin/plugin.json or ~/.cursor/skills/reporeel/
Claude Code.claude-plugin/plugin.json or .claude/skills/reporeel/
Codex CLI.codex-plugin/plugin.json or .agents/skills/reporeel/
opencode.opencode/skills/reporeel/

Usage

From inside any active web project or repository, ask your coding agent:

/reporeel

Choose MP4 or MOV output (--container)

/reporeel --container mp4
/reporeel --container mov
/reporeel --container both

Choose a video archetype (--type) and tone (--tone)

/reporeel --type launch-video --tone polished
/reporeel --type twitter-promo --tone chaotic --format vertical
/reporeel --type explainer --tone cinematic --container mov
/reporeel --type release-notes --tone app-store
/reporeel --type readme-embed

Options reference

OptionValuesDefault
--containermp4, mov, bothmp4
--typelaunch-video, explainer, twitter-promo, release-notes, readme-embedlaunch-video
--tonedefault, polished, yc-parody, chaotic, deadpan, cinematic, app-store, or freeforminferred
--formatlandscape (1920x1080), vertical (1080x1920), square (1080x1080)landscape
--durationsecondsauto (15-25s, or per --type)
--voiceflag (enables Kokoro narration via Hyperframes)off
--no-musicflagmusic on
--no-sfxflagsfx on
--fullflag (forces full Hyperframes workflow on frontier models)auto

Two engines: /reporeel and /reporeel-slim

RepoReel ships with two complementary workflows that share the same creative rules, tone presets, and output deliverables:

  1. /reporeel-slim (Model-native zero-dependency engine, automatic on Claude Opus 4.6/5.5 and Gemini 3.1 Pro):
    • A single-file skill (skills/reporeel-slim/SKILL.md) where the model inspects your project's real DOM/CSS/components (or a live website URL), builds a deterministic frame-by-frame animation using local headless browser/Canvas tools, synthesizes or mixes audio, verifies mid-transition and settled stills, and encodes reporeel.mp4 and/or reporeel.mov via FFmpeg.
  2. /reporeel --full (Hyperframes + bundled CC0 music, beat cues, and Kenney SFX):
    • Full 4-step pipeline (skills/reporeel/SKILL.md) with 5 bundled CC0 music tracks (assets/music/), precomputed beat and strong-cue JSON grids (assets/music/cues/), 200+ CC0 UI/impact/casino/keyboard sound effects (assets/sfx/), Python beat analysis (scripts/analyze_music_cues.py), and npx hyperframes check WCAG contrast and layout verification.

What happens when you run /reporeel

  1. Step 1: Inspect (references/step-1-inspect.md). Reads index.html, CSS custom properties (:root colors and typography), routes (app/, pages/), interactive components, and README.md to capture the real product flow (entry -> key action -> result) and answer the 9-question planning rubric.
  2. Step 2: Plan & Storyboard (references/step-2-plan.md). Writes reporeel-output/reporeel-plan.md with the hook (first 2–3 seconds), centerpiece product moments, reading-time floors (0.8s settled for short labels, 0.3s per word for sentences), audio direction, and beat-locked cue timestamps.
  3. Step 3: Compose (references/step-3-compose.md). Writes reporeel-output/composition-brief.md and builds the animated composition using your project's real colors, fonts, and UI elements, syncing major reveals to strongCues (±0.15s) and staggered items to beats[] (±0.10s).
  4. Step 4: Validate, Render & Deliver (references/step-4-deliver.md). Renders reporeel.mp4 (libx264 / yuv420p) and/or reporeel.mov (QuickTime .mov), extracts the strongest settled frame to reporeel.jpg, bakes reporeel.jpg into frame 0 so X/Twitter, Slack, Discord, and LinkedIn display the poster automatically, and writes share-copy.txt.

Output folder (reporeel-output/)

reporeel-output/
├── reporeel.mp4            # H.264 MP4 video with frame-0 poster baked in
├── reporeel.mov            # QuickTime MOV video (when --container mov or both)
├── reporeel.jpg            # Settled poster frame for <video poster> and custom thumbnails
├── reporeel-plan.md        # Product rubric, creative angle, and scene-by-scene storyboard
├── composition-brief.md    # Visual identity, beat cues, and composition contract
├── share-copy.txt          # Ready-to-post social caption matched to the video tone
└── composition/            # Self-contained HTML/CSS/audio composition

Repository structure

RepoReel/
├── plugin.json                             # Portable Agent Plugins & Antigravity manifest
├── .claude-plugin/                         # Claude Code plugin & marketplace manifests
├── .codex-plugin/                          # Codex CLI plugin manifest
├── .cursor-plugin/                         # Cursor plugin manifest
├── .agents/skills/                         # Symlinks -> skills/ (Antigravity, Codex, opencode)
├── .claude/skills/                         # Symlinks -> skills/ (Claude Code)
├── .opencode/skills/                       # Symlinks -> skills/ (opencode)
├── scripts/
│   └── check-plugin.mjs                    # Deterministic plugin & skill verification script
└── skills/
    ├── reporeel-slim/
    │   └── SKILL.md                        # Zero-dependency model-native skill (MP4 & MOV)
    └── reporeel/
        ├── SKILL.md                        # Main /reporeel skill entrypoint
        ├── slim.md                         # Bundled copy of /reporeel-slim for automatic handoff
        ├── assets/
        │   ├── music/                      # 5 CC0 music tracks + precomputed beat/cue JSONs
        │   └── sfx/                        # 200+ CC0 SFX (interface, impact, casino, ui, keyboard)
        ├── scripts/
        │   └── analyze_music_cues.py       # Custom track beat & strong-cue analyzer (uv / librosa)
        └── references/
            ├── step-1-inspect.md           # Project inspection & 9-question rubric
            ├── step-2-plan.md              # Storyboard, reading-time floors, and beat planning
            ├── step-3-compose.md           # Hyperframes brief, Kokoro TTS, and beat-grid locking
            ├── step-4-deliver.md           # MP4/MOV encoding, frame-0 poster bake, and share copy
            ├── audio.md                    # CC0 music/SFX catalog and moment-to-sound heuristics
            ├── tones.md                    # 7 tone presets (default, polished, yc-parody, chaotic, etc.)
            └── formats/                    # 5 video archetypes (launch-video, explainer, twitter-promo, etc.)

Verify the plugin

Run the verification script to check all plugin manifests, skill files, bundled assets, and discovery symlinks:

node scripts/check-plugin.mjs

Credits & license