Remotion Scaffold

Remotion Scaffold

Creates the foundational folder structure, configuration files, and organizational framework for Remotion video projects. This skill focuses exclusively on project setup and does NOT generate animation logic or component implementation.

What This Skill Does

Generates project scaffolding for:

1. Directory structure — Organized folder layout for compositions, scenes, assets 2. Configuration files — Base constants.ts, types.ts with empty templates 3. Empty scene templates — Placeholder scene components with TODO markers 4. Asset directories — Organized folders for images, audio, fonts 5. Registration setup — Composition registration in Root.tsx

Scope Boundaries

IN SCOPE:

• Creating folder structure
• Writing empty file templates
• Setting up configuration skeleton
• Directory organization patterns

OUT OF SCOPE:

• Animation implementation (use /remotion-animation)
• Scene component logic (use /remotion-component-gen)
• Sequence composition (use /remotion-composition)
• Component generation (use /remotion-component-gen)

Input/Output Formats

Input Format: Project Requirements

Accepts project setup requirements:

Natural Language:

Create a new Remotion project scaffold for a 30-second video with 4 scenes.

Structured Format:

## Project Requirements

**Project Name:** ProductDemo
**Duration:** 30 seconds
**Frame Rate:** 30 fps
**Dimensions:** 1920x1080 (16:9)
**Number of Scenes:** 4 (Intro, Features, Demo, CTA)
**Asset Types:** Images, Audio (music + SFX)

Output Format: SCAFFOLD_MANIFEST.md

Generates a manifest documenting created structure:

# Scaffold Manifest: ProductDemo

## Status
✅ Directory structure created
✅ Configuration files generated
✅ Scene templates created (empty)
⏳ Ready for implementation

## Generated Structure

src/remotion/compositions/ProductDemo/ ├── index.tsx # ✅ Created - Main composition (empty) ├── constants.ts # ✅ Created - Constants template ├── types.ts # ✅ Created - Type definitions └── scenes/ ├── Scene1Intro.tsx # ✅ Created - Empty template ├── Scene2Features.tsx # ✅ Created - Empty template ├── Scene3Demo.tsx # ✅ Created - Empty template └── Scene4CTA.tsx # ✅ Created - Empty template

public/ ├── images/ # ✅ Created - Empty directory ├── audio/ │ ├── music/ # ✅ Created - Empty directory │ └── sfx/ # ✅ Created - Empty directory └── fonts/ # ✅ Created - Empty directory

## File Templates Created

### Main Composition: `index.tsx`

import { AbsoluteFill, Sequence } from "remotion"; import { SCENE_TIMING } from "./constants"; import { Scene1Intro } from "./scenes/Scene1Intro"; import { Scene2Features } from "./scenes/Scene2Features"; import { Scene3Demo } from "./scenes/Scene3Demo"; import { Scene4CTA } from "./scenes/Scene4CTA"; import type { ProductDemoProps } from "./types";

export function ProductDemo({}: ProductDemoProps) { return ( <AbsoluteFill> {/ TODO: Add composition layout via /remotion-composition /} <Sequence from={SCENE_TIMING.intro.start} durationInFrames={SCENE_TIMING.intro.duration} > <Scene1Intro /> </Sequence>

{/ Additional scenes... /} </AbsoluteFill> ); }

### Constants: `constants.ts`

// TODO: Define color palette export const COLORS = { // Add colors here } as const;

// TODO: Configure spring animations via /remotion-animation export const SPRING_CONFIGS = { // Add spring configs here } as const;

// Scene timing (30fps, 30 seconds total = 900 frames) const FPS = 30;

export const SCENE_TIMING = { intro: { start: 0, duration: 5 FPS }, features: { start: 5 FPS, duration: 10 FPS }, demo: { start: 15 FPS, duration: 10 FPS }, cta: { start: 25 FPS, duration: 5 * FPS }, } as const;

### Types: `types.ts`

export interface ProductDemoProps { // Add custom props here }

export interface SceneProps { // Common scene props }

### Scene Template: `scenes/Scene1Intro.tsx`

import { AbsoluteFill } from "remotion";

export function Scene1Intro() { return ( <AbsoluteFill> {/ TODO: Implement scene via /remotion-component-gen /} </AbsoluteFill> ); }

## Next Steps

1. **Define animations** → Run `/remotion-animation` to generate animation configs
2. **Build composition** → Run `/remotion-composition` to structure Sequence layout
3. **Implement scenes** → Run `/remotion-component-gen` for each scene
4. **Configure render** → Run `/remotion-render-config` for output settings
5. **Add assets** → Run `/remotion-asset-coordinator` for asset preparation

## Configuration Summary

| Setting | Value |
|---------|-------|
| **Composition ID** | ProductDemo |
| **Duration** | 30 seconds (900 frames) |
| **Frame Rate** | 30 fps |
| **Dimensions** | 1920x1080 (16:9) |
| **Scenes** | 4 (Intro, Features, Demo, CTA) |
| **Status** | Scaffold complete, ready for implementation |

## File Locations

All files created in:
- **Composition:** `/path/to/project/src/remotion/compositions/ProductDemo/`
- **Assets:** `/path/to/project/public/`

## Scaffold Checklist

Creation checklist:
- [x] Create composition folder structure
- [x] Generate main composition file (`index.tsx`) with TODO markers
- [x] Generate constants file (`constants.ts`) as template
- [x] Generate types file (`types.ts`)
- [x] Create empty scene component files
- [x] Create asset directories (`public/images/`, `public/audio/`)
- [x] Add composition registration skeleton
- [ ] Animation implementation (next: `/remotion-animation`)
- [ ] Composition logic (next: `/remotion-composition`)
- [ ] Scene implementation (next: `/remotion-component-gen`)

Directory Structure Patterns

Pattern 1: Simple Project (1-2 scenes)

src/remotion/compositions/VideoName/
├── index.tsx          # Main composition
├── constants.ts       # Configuration constants
└── types.ts           # TypeScript types

Pattern 2: Multi-Scene Project (3+ scenes)

src/remotion/compositions/VideoName/
├── index.tsx           # Main composition
├── constants.ts        # Shared constants
├── types.ts            # Type definitions
└── scenes/
    ├── Scene1.tsx
    ├── Scene2.tsx
    └── Scene3.tsx

Pattern 3: Complex Project (with audio)

src/remotion/compositions/VideoName/
├── index.tsx           # Main composition
├── constants.ts        # Configuration
├── types.ts            # Types
├── audio.ts            # Audio configuration
└── scenes/
    └── ...

Pattern 4: Component Library Project

src/remotion/
├── components/
│   ├── particles/
│   ├── text/
│   ├── progress/
│   └── transitions/
├── compositions/
│   └── VideoName/
└── utils/
    ├── seededRandom.ts
    └── timing.ts

File Templates

Empty Main Composition

import { AbsoluteFill } from "remotion";
import type { VideoNameProps } from "./types";

export function VideoName({}: VideoNameProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition structure via /remotion-composition */}
    </AbsoluteFill>
  );
}

Empty Constants Template

// TODO: Define via /remotion-animation
export const COLORS = {} as const;
export const SPRING_CONFIGS = {} as const;
export const SCENE_TIMING = {} as const;

Empty Types Template

export interface VideoNameProps {
  // Add props here
}

Empty Scene Template

import { AbsoluteFill } from "remotion";

export function Scene1() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

Registration Template

Add to src/remotion/Root.tsx:

import { Composition } from "remotion";
import { VideoName } from "./compositions/VideoName";

// Add to RemotionRoot component:
<Composition
  id="VideoName"
  component={VideoName}
  durationInFrames={900}  // TODO: Calculate based on requirements
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{}}
/>

Video Format Presets

Quick reference for common video formats:

// YouTube (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Instagram Reels / TikTok (9:16)
{ width: 1080, height: 1920, fps: 30 }

// Twitter/X (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Square (1:1)
{ width: 1080, height: 1080, fps: 30 }

Asset Directory Organization

Standard asset directory structure:

public/
├── images/
│   ├── logos/
│   ├── backgrounds/
│   └── icons/
├── audio/
│   ├── music/
│   └── sfx/
└── fonts/
    └── [custom-fonts].woff2

Scaffold Workflow

1. Parse requirements → Extract project name, duration, scenes, format 2. Create directories → Generate folder structure 3. Write empty templates → Create files with TODO markers 4. Setup registration → Add composition to Root.tsx 5. Generate manifest → Document created structure in SCAFFOLD_MANIFEST.md 6. Hand off → Direct to specialized skills for implementation

Integration with Other Skills

This skill is the FIRST STEP in the pipeline:

remotion-scaffold (this skill)
    ↓ outputs: SCAFFOLD_MANIFEST.md
remotion-animation
    ↓ outputs: ANIMATION_CONFIG.md
remotion-composition
    ↓ outputs: COMPOSITION_STRUCTURE.md
remotion-component-gen (per scene)
    ↓ outputs: SCENE_COMPONENT.md
remotion-render-config
    ↓ outputs: RENDER_CONFIG.md

Works with:

• /motion-designer — Project requirements may come from design specs
• /remotion-animation — Next step for animation configuration
• /remotion-composition — Next step for composition structure
• /remotion-component-gen — Next step for scene implementation
• /remotion-render-config — Final step for render settings

---

This skill provides clean, minimal project scaffolding that serves as the foundation for the Remotion implementation pipeline.

Remotion Template Creator Rules

Sections

Structure

Rules for organizing composition files and folders.

• composition-structure.md — File and folder organization
• scene-patterns.md — Scene component structure

Configuration

Rules for constants and registration.

• constants-organization.md — Organizing colors, springs, timing
• registration.md — Registering compositions in Root.tsx

Composition Structure

Impact: HIGH

Proper file organization makes compositions maintainable and scalable.

Folder Structure Pattern

src/remotion/compositions/
└── VideoName/
    ├── index.tsx           # Main composition (entry point)
    ├── constants.ts        # Colors, springs, timing
    ├── types.ts            # TypeScript interfaces
    ├── audio.ts            # Audio configuration (if needed)
    └── scenes/             # Scene components (for multi-scene)
        ├── Scene1Name.tsx
        ├── Scene2Name.tsx
        └── ...

When to Use Each Pattern

Single file (simple videos):

• Duration < 15 seconds
• 1-2 scenes
• Minimal animations

Multi-file with scenes/ folder:

• Duration > 15 seconds
• 3+ distinct scenes
• Complex animations
• Team collaboration

Good Example

// index.tsx - Clean entry point
import { AbsoluteFill, Sequence } from "remotion";
import { COLORS, SCENE_TIMING } from "./constants";
import { IntroScene } from "./scenes/IntroScene";
import { ContentScene } from "./scenes/ContentScene";
import { OutroScene } from "./scenes/OutroScene";

export function ProductDemo() {
  return (
    <AbsoluteFill style={{ backgroundColor: COLORS.background }}>
      <Sequence from={SCENE_TIMING.intro.start} durationInFrames={SCENE_TIMING.intro.duration}>
        <IntroScene />
      </Sequence>
      <Sequence from={SCENE_TIMING.content.start} durationInFrames={SCENE_TIMING.content.duration}>
        <ContentScene />
      </Sequence>
      <Sequence from={SCENE_TIMING.outro.start} durationInFrames={SCENE_TIMING.outro.duration}>
        <OutroScene />
      </Sequence>
    </AbsoluteFill>
  );
}

Bad Example

// Everything in one massive file
export function ProductDemo() {
  // 500+ lines of code
  // All scenes inline
  // Hardcoded colors and timing
  // No separation of concerns
}

Naming Conventions

Checklist

• [ ] Composition has its own folder
• [ ] Entry point is index.tsx
• [ ] Constants extracted to constants.ts
• [ ] Types defined in types.ts
• [ ] Scenes in scenes/ folder if 3+ scenes
• [ ] Scene files follow naming convention

Constants Organization

Impact: HIGH

Well-organized constants make videos easy to customize and maintain.

Constants File Structure

// constants.ts

// =============================================================================
// COLORS
// =============================================================================

export const COLORS = {
  // Brand colors
  primary: "#FF6B35",      // Ember Orange
  secondary: "#4ECDC4",    // Teal
  accent: "#FFE66D",       // Yellow

  // Backgrounds
  background: "#0A0A0A",   // Near black
  surface: "#171717",      // Card background
  overlay: "rgba(0, 0, 0, 0.5)",

  // Text
  text: "#FFFFFF",
  textMuted: "#A3A3A3",
  textSubtle: "#525252",

  // Semantic
  success: "#10B981",
  warning: "#F59E0B",
  error: "#EF4444",
} as const;

// =============================================================================
// SPRING CONFIGURATIONS
// =============================================================================

export const SPRING_CONFIGS = {
  // Standard animations
  smooth: { damping: 200 },
  snappy: { damping: 20, stiffness: 200 },
  bouncy: { damping: 8 },

  // Specialized
  gentle: { damping: 30, stiffness: 80 },
  elastic: { damping: 12, stiffness: 150 },
  heavy: { damping: 40, stiffness: 60 },
} as const;

// =============================================================================
// TIMING
// =============================================================================

const FPS = 30;

export const SCENE_TIMING = {
  intro: {
    start: 0,
    end: 5 * FPS,
    duration: 5 * FPS,
  },
  content: {
    start: 5 * FPS,
    end: 20 * FPS,
    duration: 15 * FPS,
  },
  outro: {
    start: 20 * FPS,
    end: 25 * FPS,
    duration: 5 * FPS,
  },
} as const;

// Animation micro-timing
export const ANIMATION = {
  staggerDelay: 5,        // Frames between staggered elements
  fadeInDuration: 15,     // Standard fade duration
  holdDuration: 60,       // How long to hold before transition
  exitBuffer: 10,         // Frames before scene end to start exit
} as const;

// =============================================================================
// LAYOUT
// =============================================================================

export const LAYOUT = {
  padding: 80,
  gutter: 40,
  maxContentWidth: 1600,
} as const;

// =============================================================================
// TYPOGRAPHY
// =============================================================================

export const TYPOGRAPHY = {
  fontFamily: "Inter, -apple-system, system-ui, sans-serif",
  sizes: {
    headline: 72,
    title: 56,
    subtitle: 36,
    body: 24,
    caption: 18,
  },
  weights: {
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
} as const;

Good Example

// Using constants throughout composition
import { COLORS, SPRING_CONFIGS, TYPOGRAPHY } from "./constants";

<div
  style={{
    backgroundColor: COLORS.background,
    color: COLORS.text,
    fontFamily: TYPOGRAPHY.fontFamily,
    fontSize: TYPOGRAPHY.sizes.headline,
    fontWeight: TYPOGRAPHY.weights.bold,
  }}
>

Bad Example

// Hardcoded values
<div
  style={{
    backgroundColor: "#0A0A0A",  // Magic string
    color: "#FFFFFF",            // Magic string
    fontFamily: "Inter",         // Not standardized
    fontSize: 72,                // Magic number
    fontWeight: 700,             // Magic number
  }}
>

Type Safety with as const

Always use as const for constants:

// With as const - TypeScript knows exact values
export const COLORS = {
  primary: "#FF6B35",
} as const;

// Type is: { readonly primary: "#FF6B35" }
// Can use COLORS.primary safely

// Without as const - TypeScript only knows it's a string
export const COLORS = {
  primary: "#FF6B35",
};

// Type is: { primary: string }
// Loses specific value information

Checklist

• [ ] Colors grouped and commented
• [ ] Spring configs named descriptively
• [ ] Timing uses FPS multiplier (not hardcoded frames)
• [ ] All values use as const
• [ ] No magic numbers in component code
• [ ] Section separators for organization