create-remotion-geist

•

2025 months ago

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.

Quick Install

npxskills add vercel-labs/skill-remotion-geist--skill create-remotion-geist

Instructions

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/[email protected]/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
}
/* Add Medium (500), SemiBold (600), Bold (700) weights */

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360