create-remotion-geist

name	create-remotion-geist
description	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.

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