vercel-labs/skill-remotion-geist

Overview

This skill generates Remotion videos styled with the Geist design system aesthetic. It produces dark-theme motion graphics using Geist typography, the official color palette, and spring-based animations to match Vercel's polished visual style.

How this skill works

The skill scaffolds a Remotion project with a TypeScript React entry (.tsx) and supplies scene patterns, Tailwind configuration, font loading, and animation utilities. It enforces Geist rules: dark backgrounds, Geist fonts, the 10-step color tokens, prism-react-renderer for code blocks, and icon usage from @geist-ui/icons rather than emojis.

When to use it

• Creating marketing or product videos that must match Vercel/Geist visual identity
• Building motion graphics with dark theme, tight typography, and spring motion
• Prototyping UI animations or micro-interactions as video exports
• Producing short explainers or demos that require consistent brand tokens
• Rendering code walkthroughs that need syntax highlighting with prism-react-renderer

Best practices

• Always use src/index.tsx as the Remotion entry and call registerRoot()
• Import icons from @geist-ui/icons; never use emojis for UI elements
• Load Geist fonts via CDN and map Tailwind to Geist typography classes
• Use the provided CSS variables for colors and gray-400 for borders
• Drive motion with spring utilities (high damping ~200) and fadeIn helpers
• Use official brand assets and downloaded logos; do not handcraft brand SVGs

Example use cases

• A product demo video with Geist dark background, spring entrances, and tight headings
• Animated onboarding screens that use Geist spacing, labels, and color tokens
• Social clips that highlight a feature with green success states and blue accents
• Code snippet videos with prism-react-renderer-styled blocks and Geist typography
• Micro-interaction showcases exported from Remotion for product review