remotion-video

Build short-form video content (10-60 seconds) that explains Skill Stack concepts with a distinctive risograph-inspired aesthetic. Videos are code, so they're version-controlled, reproducible, and infinitely editable.

• Creating explainer videos for Skill Stack concepts
• Building animated social content (vertical 9:16, square 1:1, landscape 16:9)
• Visualizing technical workflows or progressive disclosure
• Any video where precise timing and typography matter

Not for:

• Live footage editing (use traditional video tools)
• Complex 3D graphics (Remotion is 2D-focused)
• Quick one-off graphics (use Figma or Canva)

---

Quick Start

```bash

# Create new Remotion project

npx create-video@latest my-video

# Install dependencies

cd my-video && npm install

# Add Google Fonts

npm install @remotion/google-fonts

# Start studio

npm run start # Opens http://localhost:3000

```

File Structure

```

my-video/

├── src/

│ ├── Root.tsx # Composition definitions

│ ├── Main.tsx # Main video component

│ └── components/ # Reusable elements

├── package.json

├── remotion.config.ts

└── out/ # Rendered videos

```

Composition Setup (Root.tsx)

Always create multiple aspect ratios for each video:

```tsx

import { Composition, Folder } from "remotion";

import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => (

<>

id="MyVideo-Vertical"

component={MyVideo}

durationInFrames={600} // 20 seconds at 30fps

fps={30}

width={1080}

height={1920} // 9:16

/>

id="MyVideo-Square"

component={MyVideo}

durationInFrames={600}

fps={30}

width={1080}

height={1080} // 1:1

/>

id="MyVideo-Landscape"

component={MyVideo}

durationInFrames={600}

fps={30}

width={1920}

height={1080} // 16:9

/>

);

```

---

Color Palette

```tsx

const C = {

paper: "#FAF8F5", // Warm off-white background

coral: "#D4694A", // Accent, CTAs, highlights

teal: "#1E4D4D", // Headers, selected states

ink: "#1C1C1C", // Body text

muted: "#666666", // Secondary text

dimmed: "#AAAAAA", // Tertiary, disabled

white: "#FFFFFF", // Cards, containers

};

```

Typography

```tsx

import { loadFont as loadInter } from "@remotion/google-fonts/Inter";

import { loadFont as loadPlayfair } from "@remotion/google-fonts/PlayfairDisplay";

import { loadFont as loadJetBrains } from "@remotion/google-fonts/JetBrainsMono";

// Body text, UI labels

const { fontFamily: inter } = loadInter("normal", {

weights: ["400", "500", "600"],

subsets: ["latin"],

});

// Headlines, quotes, emotional text

const { fontFamily: playfair } = loadPlayfair("normal", {

weights: ["400", "500", "600", "700"],

subsets: ["latin"],

});

// Code, technical content, skill names

const { fontFamily: mono } = loadJetBrains("normal", {

weights: ["400", "500"],

subsets: ["latin"],

});

```

Font Size Guidelines

Minimum readable sizes for video:

| Element | Square (1080) | Vertical (1080w) | Landscape (1920w) |

|---------|---------------|------------------|-------------------|

| Headlines | 64-84px | 64-84px | 72-96px |

| Skill names | 36-40px | 36-40px | 40-48px |

| Body text | 28-32px | 28-32px | 32-36px |

| Labels | 24-28px | 24-28px | 28-32px |

| Annotation | 22-24px | 22-24px | 24-28px |

Key lesson: Always larger than you think. Video compresses detail.

Grain Overlay

```tsx

const GrainOverlay: React.FC = () => {

const frame = useCurrentFrame();

return (

style={{

pointerEvents: "none",

opacity: 0.04,

mixBlendMode: "multiply",

}}

>

type="fractalNoise"

baseFrequency="0.8"

numOctaves="4"

seed={Math.floor(frame / 4)} // Animate grain

/>

);

};

```

---

Core Tools

```tsx

import {

useCurrentFrame,

useVideoConfig,

AbsoluteFill,

interpolate,

spring,

Sequence,

} from "remotion";

```

Fade In/Out

```tsx

const fadeIn = interpolate(frame, [0, 30], [0, 1], {

extrapolateLeft: "clamp",

extrapolateRight: "clamp",

});

const fadeOut = interpolate(frame, [150, 180], [1, 0], {

extrapolateLeft: "clamp",

extrapolateRight: "clamp",

});

// Combine for scene opacity