s1366560/create-remotion-geist

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

1. NEVER use emojis - Use proper Geist icons from @geist-ui/icons package
2. Use official brand assets - Download from official sources, don't hand-craft SVGs
3. Entry point must be .tsx - Use src/index.tsx with registerRoot(), not .ts
4. Use prism-react-renderer for code - Do NOT use regex-based syntax highlighting

Quick Start

1. 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
   

2. 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

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

4. 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

1. NEVER use emojis - Import icons from @geist-ui/icons (e.g., import { Code, Folder, Check } from '@geist-ui/icons')
2. Success = Green - Geist uses green for success states (--ds-green-700)
3. Borders = gray-400 - Default border color (--ds-gray-400)
4. Inputs use bg-100 - Primary background, not secondary
5. Spring animations - Smooth, damped motion (damping: 200)
6. Tight letter-spacing - Headings have negative tracking
7. 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/[email protected]/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
}
/* Add Medium (500), SemiBold (600), Bold (700) weights */