--- name: remotion-animator description: "Create animated videos programmatically using Remotion. Triggered only when the user explicitly asks to (1) make, edit, render, or build an animated video or motion graphics, (2) animate text, numbers, progress bars, or components, (3) render a composition to MP4/ProRes/WebM, (4) programmatically generate video content via an agent, (5) scaffold a video project and render it, or (6) convert an existing project into an animated explainer, intro, or social clip. Does not trigger on general discussion, search, or information requests about video tools. **Permission boundaries:** This skill scaffolds Node.js projects in the agent workspace and runs Node/npm/Remotion shell commands. The agent only creates files within the specified project directory. No networking, no external file access outside the workspace, no sudo. **Proactivity rules:** The agent may offer to create a video once (per request) when user content clearly matches a template type. The agent must ask before scaffolding. Declined offers are never repeated for the same content. **Cron/recurring automation:** Not enabled by default. If the user requests recurring renders, the agent must confirm: schedule, output directory, file retention policy, and a disable method before creating any cron job. No unattended background rendering without explicit consent." --- # Remotion Animator Your agent builds animated videos with components. No After Effects needed — write code, preview in browser, render to MP4. ## Showcase Your agent scaffolds, builds, and renders videos on demand. Templates for intros, explainers, data visualizations, and dialogue videos. A library of animation components your agent composes and customizes for each task. 📹 [Watch the showcase video](https://github.com/PratyushChauhan/PratyushChauhan/releases/download/remotion-showcase-v1/remotion-showcase-agent.mp4) ## Quick Start ### 1. Scaffold a project ```bash python /path/to/skill/scripts/new-project.py my-video ``` ### 2. Install dependencies ```bash cd my-video && npm install ``` ### 3. Preview in studio ```bash npm run dev # Open http://localhost:3000 ``` ### 4. Render to video ```bash npm run render # Or use the render helper: python /path/to/skill/scripts/render.py --output out/video.mp4 --quality high ``` ## Templates Scaffold with a pre-built template instead of the starter: ```bash python scripts/new-project.py my-intro --template intro python scripts/new-project.py my-stats --template data-kinetic python scripts/new-project.py my-tutorial --template explainer python scripts/new-project.py my-podcast --template conversation ``` | Template | Use Case | Duration | |----------|----------|----------| | **starter** | Blank canvas with animation primitives | 6s | | **intro** | Logo + title + tagline reveal | 5s | | **data-kinetic** | Animated metrics, count-ups, progress bars | 8s | | **explainer** | Step-by-step feature walkthrough | 10s | | **conversation** | Multi-speaker dialogue with colored bubbles | Variable | Set dimensions for vertical video: ```bash python scripts/new-project.py my-reel --template intro --width 1080 --height 1920 ``` ## Animation Components Import from `./components` in any project scaffolded from this skill: ```tsx import { FadeIn, SlideIn, ScaleIn, Typewriter, CountUp, ProgressBar } from "./components"; ``` | Component | Effect | |-----------|--------| | `` | Opacity tween | | `` | Directional slide with opacity | | `` | Scale up with easing overshoot | | `` | Character-by-character text reveal | | `` | Number counter animation | | `` | Animated progress bar | | `` | Drifting CSS grid background | | `` | Ambient floating orb | | `` | Expanding attention ring | | `` | Staggered child animations | **Usage example:** ```tsx export const MyVideo: React.FC = () => { return (

Hello World

Animated with code

); }; ``` ## Customizing Templates ### Change colors Edit gradient backgrounds or component color props: ```tsx background: "linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%)" ``` ### Change timing All animations are frame-based. At 30fps: - 30 frames = 1 second - 15 frames = 0.5 seconds ### Add audio Place audio in `public/audio.mp3`, then: ```tsx import { Audio, staticFile } from "remotion";

Remotion Animator

Description

Latest Changes

Install Remotion Animator with One Click