Remotion Component Gen

# Rule Sections

## Component Categories
- particle-systems.md — Particle effect patterns and implementations
- text-animations.md — Text reveal, typewriter, and animation patterns
- progress-indicators.md — Progress bars, circles, and loaders
- transitions.md — Fade, slide, wipe, and morph transitions

## Patterns and Guides
- component-props.md — Standard props interface patterns
- component-composition.md — Composing and extending components
- animation-timing.md — Timing and synchronization patterns
- performance-optimization.md — Optimizing component performance


---
name: remotion-component-gen
description: Generates individual Remotion scene components from visual direction. Input is visual/animation description for a specific scene. Output is SCENE_COMPONENT.md with complete TSX implementation. Use when implementing scenes or when asked to "create a scene component", "implement scene from spec", "build Scene1Intro".
---

# Remotion Component Gen

Generates production-ready Remotion scene component implementations from visual direction and animation specifications. This skill focuses on creating complete, working scene components.

## What This Skill Does

Generates scene component code for:

1. **Scene components** — Complete TSX implementation for individual scenes
2. **Animation integration** — Applies spring/interpolate from animation configs
3. **Visual layout** — Implements positioning, sizing, layout logic
4. **Asset integration** — StaticFile imports and asset usage
5. **TypeScript types** — Props interfaces for scene components

## Scope Boundaries

**IN SCOPE:**
- Complete scene component TSX code
- Animation implementation (springs, interpolate)
- Layout and visual styling
- Asset imports and usage
- Component-level logic

**OUT OF SCOPE:**
- Animation config definitions (use `/remotion-animation`)
- Composition sequence layout (use `/remotion-composition`)
- Project scaffolding (use `/remotion-scaffold`)
- Asset sourcing (use `/remotion-asset-coordinator`)

## Input/Output Formats

### Input Format: Visual Direction for Scene

Accepts scene description with visual and animation details:

**From Motion Spec:**
```markdown
## Scene 1: Logo Reveal (0s - 5s)

**Visual Description:**
- Centered logo on dark background
- Logo scales from 0.8 to 1.0 with smooth spring
- Subtitle text fades in below logo
- Background: #0A0A0A (Black)
- Logo color: #FF6B35 (Primary)

**Animation Details:**
- Logo entrance: Frames 0-30
  - Spring config: smooth (damping: 200)
  - Scale: 0.8 → 1.0
  - Opacity: 0 → 1
- Subtitle reveal: Frames 20-50
  - Fade in with slight upward movement
  - TranslateY: 20px → 0
  - Opacity: 0 → 1

**Assets:**
- Logo: public/images/logo.svg
```

**From Natural Language:**
```
Create Scene1Intro with centered logo that springs in from 0.8 scale to 1.0.
Add subtitle text below that fades in after logo.
Use smooth spring animation for logo, linear fade for text.
```

### Output Format: SCENE_COMPONENT.md

Generates complete scene component implementation:

```markdown
# Scene Component: Scene1Intro

## Status
✅ Component implementation complete
⏳ Ready for integration into composition

## Component Code

File: `scenes/Scene1Intro.tsx`

```typescript
import {
  AbsoluteFill,
  spring,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
  Img,
  staticFile,
} from "remotion";
import { COLORS, SPRING_CONFIGS } from "../constants";

export function Scene1Intro() {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  // Logo entrance animation (frames 0-30)
  const logoProgress = spring({
    frame,
    fps,
    config: SPRING_CONFIGS.smooth,
  });

  const logoScale = interpolate(logoProgress, [0, 1], [0.8, 1]);
  const logoOpacity = logoProgress;

  // Subtitle reveal animation (frames 20-50)
  const subtitleProgress = interpolate(
    frame,
    [20, 50],
    [0, 1],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  const subtitleTransla