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:

Scene components — Complete TSX implementation for individual scenes Animation integration — Applies spring/interpolate from animation configs Visual layout — Implements positioning, sizing, layout logic Asset integration — StaticFile imports and asset usage 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:

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:

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 subtitleTranslateY = interpolate(subtitleProgress, [0, 1], [20, 0]); const subtitleOpacity = subtitleProgress;

return ( {/ Logo /}

scale(${logoScale}), opacity: logoOpacity, }} >

  {/* Subtitle */}
  <div
    style={{
      position: "absolute",
      top: height / 2 + 250,
      transform: `translateY(${subtitleTranslateY}px)`,
      opacity: subtitleOpacity,
    }}
  >
    <h2
      style={{
        color: COLORS.text,
        fontSize: 48,
        fontWeight: 600,
        margin: 0,
      }}
    >
      Innovation in Motion
    </h2>
  </div>
</AbsoluteFill>

); }

Component Props (if needed) export interface Scene1IntroProps { // Add props here if scene needs customization }

// Update component: export function Scene1Intro({}: Scene1IntroProps) { // ... }

Usage in Composition import { Scene1Intro } from "./scenes/Scene1Intro";

// In main composition: <Sequence from={SCENE_TIMING.intro.start} durationInFrames={SCENE_TIMING.intro.duration}

Assets Required Logo image: public/images/logo.svg (400x400) Animation Summary Logo entrance: Smooth spring scale + fade (0-30 frames) Subtitle reveal: Linear fade + slide up (20-50 frames) Next Steps Add logo asset to public/images/logo.svg Test in preview to verify timing and animation feel Adjust constants if needed (scale values, timing) Move to next scene via another /remotion-component-gen call Checklist Component implemented Animation logic integrated Asset imports configured TypeScript types defined Asset added to project Tested in preview

Component Implementation Patterns

Pattern 1: Simple Entrance Animation

Basic spring-based entrance with scale and fade:

```typescript export function Scene() { const frame = useCurrentFrame(); const { fps } = useVideoConfig();

const progress = spring({ frame, fps, config: SPRING_CONFIGS.smooth, });

const scale = interpolate(progress, [0, 1], [0.8, 1]);

return ( scale(${scale}), opacity: progress, }} > {/ Content /} ); }

Pattern 2: Staggered Elements

Multiple elements with delayed animations:

export function Scene() { const frame = useCurrentFrame(); const { fps } = useVideoConfig();

const items = ['Feature 1', 'Feature 2', 'Feature 3']; const STAGGER_DELAY = 10;

return ( {items.map((item, index) => { const itemProgress = spring({ frame: frame - (index * STAGGER_DELAY), fps, config: SPRING_CONFIGS.snappy, });

    const translateX = interpolate(itemProgress, [0, 1], [-50, 0]);

    return (
      <div
        key={index}
        style={{
          transform: `translateX(${translateX}px)`,
          opacity: itemProgress,
          marginBottom: 20,
        }}
      >
        <h3>{item}</h3>
      </div>
    );
  })}
</AbsoluteFill>

); }

Pattern 3: Text Reveal

Character-by-character or word-by-word reveal:

export function Scene() { const frame = useCurrentFrame(); const text = "Hello World"; const CHARS_PER_FRAME = 2;

const charsToShow = Math.min( text.length, Math.floor(frame / CHARS_PER_FRAME) );

return (

{text.slice(0, charsToShow)} {charsToShow < text.length && ( | )}

Integration Workflow Receive visual direction → Input to this skill Generate scene component → SCENE_COMPONENT.md Create scene file in scenes/ folder Add assets as specified Test in preview Adjust timing/styling if needed Move to next scene Integration with Other Skills

This skill works within the pipeline:

remotion-component-gen (this skill) ↓ outputs: SCENE_COMPONENT.md (per scene) ↓ uses: ANIMATION_CONFIG.md (from remotion-animation) ↓ uses: COMPOSITION_STRUCTURE.md (for timing context)

Works with:

/motion-designer — Visual direction from design specs /remotion-animation — Uses spring configs and timing from this skill /remotion-composition — Scene fits within timing structure from this skill /remotion-scaffold — Components added to scaffolded project /remotion-asset-coordinator — Assets sourced and prepared for import /remotion-spec-translator — Orchestrated by this skill for full translation

This skill generates production-ready scene component implementations that bring motion design specs to life in Remotion.