Create Remotion Geist Video

Create Remotion videos styled with Vercel's Geist design system - dark backgrounds, spring animations, Geist fonts, and the 10-step color scale.

When to Use

• Creating any Remotion video that should look like Vercel

• Building motion graphics with Geist's dark theme aesthetic

• Making animated content using Geist typography and colors

• Producing videos that need the polished Vercel visual style

Critical Rules

• NEVER use emojis - Use proper Geist icons from @geist-ui/icons package

• Use official brand assets - Download from official sources, don't hand-craft SVGs

• Entry point must be .tsx - Use src/index.tsx with registerRoot(), not .ts

• Use prism-react-renderer for code - Do NOT use regex-based syntax highlighting

Quick Start

-

Scaffold the project:

mkdir -p src/{scenes,components,utils} out

npm init -y

npm install remotion @remotion/cli @remotion/tailwind react react-dom

npm install -D tailwindcss typescript @types/react

npm install @geist-ui/icons  # For proper icons

-

Create core files (see references/project-setup.md for templates):

• remotion.config.ts - Enable Tailwind

• tailwind.config.js - Geist colors and fonts

• src/styles.css - Font loading from CDN

• src/index.tsx - Root composition with registerRoot()

• src/Root.tsx - Composition definitions

• src/utils/animations.ts - Spring animations

-

Build scenes following the pattern in references/scene-patterns.md

-

Render:

npx remotion studio          # Preview at localhost:3000

npx remotion render MyComp out/video.mp4

Geist Design Tokens (Quick Reference)

Colors (Dark Theme)

Token

CSS Variable

Value

Usage

background-100

--ds-background-100

#0a0a0a

Primary background

background-200

--ds-background-200

#171717

Secondary/elevated

gray-400

--ds-gray-400

#737373

Default borders

green-700

--ds-green-700

#46A758

Success

red-700

--ds-red-700

#E5484D

Error

amber-700

--ds-amber-700

#FFB224

Warning

blue-700

--ds-blue-700

#0070F3

Info/accent

Typography Classes

• Headings: text-heading-{72|64|56|48|40|32|24|20|16|14} (semibold, tight tracking)

• Labels: text-label-{20|18|16|14|13|12}[-mono] (normal weight)

• Copy: text-copy-{24|20|18|16|14|13}[-mono] (normal weight)

Spacing (4px base)

• space-2: 8px | space-4: 16px | space-6: 24px | space-8: 32px

Animation Utilities

Use spring-based animations for Geist's smooth aesthetic:

import { spring, interpolate } from 'remotion';

// Fade in with delay

export function fadeIn(frame: number, fps: number, delay = 0, duration = 0.4) {

  const delayFrames = delay * fps;

  const durationFrames = duration * fps;

  return interpolate(frame, [delayFrames, delayFrames + durationFrames], [0, 1],

    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

}

// Spring scale

export function springIn(frame: number, fps: number, delay = 0) {

  return spring({ frame: frame - delay * fps, fps, config: { damping: 200 } });

}

Scene Structure Pattern

export function MyScene() {

  const frame = useCurrentFrame();

  const { fps } = useVideoConfig();

  const titleOpacity = fadeIn(frame, fps, 0, 0.4);

  const titleScale = springIn(frame, fps, 0);

  return (

    <AbsoluteFill className="bg-background-100 flex flex-col items-center justify-center">

      <h2 style={{ opacity: titleOpacity, transform: `scale(${titleScale})` }}>

        Title

      </h2>

    </AbsoluteFill>

  );

}

Key Principles

• NEVER use emojis - Import icons from @geist-ui/icons (e.g., import { Code, Folder, Check } from '@geist-ui/icons')

• Success = Green - Geist uses green for success states (--ds-green-700)

• Borders = gray-400 - Default border color (--ds-gray-400)

• Inputs use bg-100 - Primary background, not secondary

• Spring animations - Smooth, damped motion (damping: 200)

• Tight letter-spacing - Headings have negative tracking

• Use official brand assets - Download logos from official sources (see references/geist-icons.md)

References

• references/project-setup.md - Complete file templates

• references/geist-icons.md - Icons and brand assets (MUST READ)

• references/code-blocks.md - Syntax-highlighted code blocks (use prism-react-renderer)

• references/geist-colors.md - Full 10-step color scale

• references/geist-typography.md - All typography classes with specs

• references/geist-components.md - Component props and patterns

• references/scene-patterns.md - Scene templates for common content

• references/storyboard-template.md - Planning video structure

Font Loading (jsDelivr CDN)

@font-face {

  font-family: 'Geist';

  src: url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');

  font-weight: 400;

}

/* Add Medium (500), SemiBold (600), Bold (700) weights */