Code2Animation

# AgentSaaS Video Editor Skill

A comprehensive video editing and rendering skill that enables AI agents to create code-driven animations with text-to-speech narration and smooth transitions.

## Purpose

This skill allows agents to:
- Create and preview interactive video projects with animations
- Generate TTS audio narration using Microsoft Edge TTS
- Render complete videos with synchronized audio and visual effects
- Support both portrait and landscape video formats
- Apply smooth transition effects between media elements

## Core Capabilities

### 1. Interactive Video Preview
- Real-time preview of video projects in the browser
- Playback controls for testing and debugging
- Support for transitions, media clips, and timing adjustments
- Frame-by-frame seeking for precise editing
- Live transition preview with easing effects

### 2. Transition System
- **transitionIn**: Each media defines its own entrance animation
- **Supported transitions**: fade, zoom, slide2Left, slideUp, none
- **Easing**: Built-in easeOutCubic for smooth slide and zoom animations
- **stayInClip**: Media can persist throughout entire clip duration
- **Cross-clip transitions**: Automatic handling of clip boundaries

### 3. TTS Audio Generation
- Automated text-to-speech using Microsoft Edge TTS (msedge-tts)
- Support for multiple voices (English and Chinese)
- Word-level timing metadata for lip-sync and animations
- Audio file caching for faster previews

### 4. Video Rendering
- Automated frame-by-frame rendering using Puppeteer
- FFmpeg integration for video encoding and audio mixing
- 30 FPS output at 1920x1080 (landscape) or 1080x1920 (portrait)
- Deterministic rendering for consistent results
- Transition effects preserved in final output

## Project Configuration Format

### Media Item Properties
- **src**: HTML filename in the footage directory
- **words**: Trigger phrase from speech that activates this media
- **transitionIn**: Entrance animation type (optional)
- **transitionDuration...

# AgentSaaS Video Editor

Code-driven video creation with TTS narration and automated rendering.

## Features

- Interactive video preview with real-time playback controls
- TTS audio generation using Microsoft Edge TTS
- Automated frame-by-frame rendering (30 FPS, 1920x1080/1080x1920)
- HTML/CSS animation support with deterministic timing
- Portrait and landscape video formats

## Quick Start

**Prerequisites:** Node.js 18+, FFmpeg

```bash
# Install dependencies
pnpm install

# Generate TTS audio
pnpm generate-audio agentSaasPromoVideo

# Preview in browser
pnpm dev

# Render final video
pnpm render agentSaasPromoVideo [--portrait]
```

## Commands

```bash
pnpm dev                          # Start development server
pnpm generate-audio <projectId>   # Generate TTS audio files
pnpm render <projectId>           # Render landscape video (1920x1080)
pnpm render <projectId> --portrait # Render portrait video (1080x1920)
```

## Project Structure

```
public/projects/<projectId>/
├── <projectId>.json      # Project configuration
├── footage/              # HTML/CSS media components
└── audio/                # Generated TTS files (MP3 + timing JSON)

public/video/             # Rendered output videos
```

## Animation Guidelines

**Supported patterns:**
- setTimeout-based style changes
- CSS transitions (auto-converted to frame-based)
- Typewriter effects with character timing
- Fade in/out and slide animations

**Best practices:**
```html
<!-- Auto-detected fade in -->
<div style="opacity: 0;">Content</div>
<script>
setTimeout(() => element.style.opacity = '1', 100);
</script>
```

## System Requirements

- **FFmpeg**: Video encoding and audio mixing
- **Chromium/Chrome**: Headless rendering via Puppeteer
- **Internet**: Microsoft Edge TTS service

## Installation

### FFmpeg
```bash
# macOS
brew install ffmpeg

# Linux
sudo apt-get install ffmpeg
```

### Chromium (if needed)
```bash
npx puppeteer browsers install chrome
# or set custom path
export PUPPETEER_EXECUTABL...