create-remotion-geist
installsforks
How to install create-remotion-geist?
vercel-labs/skill-remotion-geist/create-remotion-geist
$npx -y skills add vercel-labs/skill-remotion-geist --skill create-remotion-geistCreate 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.
SKILL.md
| 1 | # Create Remotion Geist Video |
| 2 | |
| 3 | Create Remotion videos styled with Vercel's Geist design system - dark backgrounds, spring animations, Geist fonts, and the 10-step color scale. |
| 4 | |
| 5 | ## When to Use |
| 6 | |
| 7 | - Creating any Remotion video that should look like Vercel |
| 8 | - Building motion graphics with Geist's dark theme aesthetic |
| 9 | - Making animated content using Geist typography and colors |
| 10 | - Producing videos that need the polished Vercel visual style |
| 11 | |
| 12 | ## Critical Rules |
| 13 | |
| 14 | 1. **NEVER use emojis** - Use proper Geist icons from `@geist-ui/icons` package |
| 15 | 2. **Use official brand assets** - Download from official sources, don't hand-craft SVGs |
| 16 | 3. **Entry point must be .tsx** - Use `src/index.tsx` with `registerRoot()`, not `.ts` |
| 17 | 4. **Use prism-react-renderer for code** - Do NOT use regex-based syntax highlighting |
| 18 | |
| 19 | ## Quick Start |
| 20 | |
| 21 | 1. **Scaffold the project:** |
| 22 | ```bash |
| 23 | mkdir -p src/{scenes,components,utils} out |
| 24 | npm init -y |
| 25 | npm install remotion @remotion/cli @remotion/tailwind react react-dom |
| 26 | npm install -D tailwindcss typescript @types/react |
| 27 | npm install @geist-ui/icons # For proper icons |
| 28 | ``` |
| 29 | |
| 30 | 2. **Create core files** (see `references/project-setup.md` for templates): |
| 31 | - `remotion.config.ts` - Enable Tailwind |
| 32 | - `tailwind.config.js` - Geist colors and fonts |
| 33 | - `src/styles.css` - Font loading from CDN |
| 34 | - `src/index.tsx` - Root composition with `registerRoot()` |
| 35 | - `src/Root.tsx` - Composition definitions |
| 36 | - `src/utils/animations.ts` - Spring animations |
| 37 | |
| 38 | 3. **Build scenes** following the pattern in `references/scene-patterns.md` |
| 39 | |
| 40 | 4. **Render:** |
| 41 | ```bash |
| 42 | npx remotion studio # Preview at localhost:3000 |
| 43 | npx remotion render MyComp out/video.mp4 |
| 44 | ``` |
| 45 | |
| 46 | ## Geist Design Tokens (Quick Reference) |
| 47 | |
| 48 | ### Colors (Dark Theme) |
| 49 | | Token | CSS Variable | Value | Usage | |
| 50 | |-------|--------------|-------|-------| |
| 51 | | background-100 | --ds-background-100 | #0a0a0a | Primary background | |
| 52 | | background-200 | --ds-background-200 | #171717 | Secondary/elevated | |
| 53 | | gray-400 | --ds-gray-400 | #737373 | Default borders | |
| 54 | | green-700 | --ds-green-700 | #46A758 | Success | |
| 55 | | red-700 | --ds-red-700 | #E5484D | Error | |
| 56 | | amber-700 | --ds-amber-700 | #FFB224 | Warning | |
| 57 | | blue-700 | --ds-blue-700 | #0070F3 | Info/accent | |
| 58 | |
| 59 | ### Typography Classes |
| 60 | - **Headings:** `text-heading-{72|64|56|48|40|32|24|20|16|14}` (semibold, tight tracking) |
| 61 | - **Labels:** `text-label-{20|18|16|14|13|12}[-mono]` (normal weight) |
| 62 | - **Copy:** `text-copy-{24|20|18|16|14|13}[-mono]` (normal weight) |
| 63 | |
| 64 | ### Spacing (4px base) |
| 65 | - `space-2`: 8px | `space-4`: 16px | `space-6`: 24px | `space-8`: 32px |
| 66 | |
| 67 | ## Animation Utilities |
| 68 | |
| 69 | Use spring-based animations for Geist's smooth aesthetic: |
| 70 | |
| 71 | ```typescript |
| 72 | import { spring, interpolate } from 'remotion'; |
| 73 | |
| 74 | // Fade in with delay |
| 75 | export function fadeIn(frame: number, fps: number, delay = 0, duration = 0.4) { |
| 76 | const delayFrames = delay * fps; |
| 77 | const durationFrames = duration * fps; |
| 78 | return interpolate(frame, [delayFrames, delayFrames + durationFrames], [0, 1], |
| 79 | { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); |
| 80 | } |
| 81 | |
| 82 | // Spring scale |
| 83 | export function springIn(frame: number, fps: number, delay = 0) { |
| 84 | return spring({ frame: frame - delay * fps, fps, config: { damping: 200 } }); |
| 85 | } |
| 86 | ``` |
| 87 | |
| 88 | ## Scene Structure Pattern |
| 89 | |
| 90 | ```tsx |
| 91 | export function MyScene() { |
| 92 | const frame = useCurrentFrame(); |
| 93 | const { fps } = useVideoConfig(); |
| 94 | |
| 95 | const titleOpacity = fadeIn(frame, fps, 0, 0.4); |
| 96 | const titleScale = springIn(frame, fps, 0); |
| 97 | |
| 98 | return ( |
| 99 | <AbsoluteFill className="bg-background-100 flex flex-col items-center justify-center"> |
| 100 | <h2 style={{ opacity: titleOpacity, transform: `scale(${titleScale})` }}> |
| 101 | Title |
| 102 | </h2> |
| 103 | </AbsoluteFill> |
| 104 | ); |
| 105 | } |
| 106 | ``` |
| 107 | |
| 108 | ## Key Principles |
| 109 | |
| 110 | 1. **NEVER use emojis** - Import icons from `@geist-ui/icons` (e.g., `import { Code, Folder, Check } from '@geist-ui/icons'`) |
| 111 | 2. **Success = Green** - Geist uses green for success states (--ds-green-700) |
| 112 | 3. **Borders = gray-400** - Default border color (--ds-gray-400) |
| 113 | 4. **Inputs use bg-100** - Primary background, not secondary |
| 114 | 5. **Spring animations** - Smooth, damped motion (damping: 200) |
| 115 | 6. **Tight letter-spacing** - Headings have negative tracking |
| 116 | 7. **Use official brand assets** - Download logos from official sources (see references/geist-icons.md) |
| 117 | |
| 118 | ## References |
| 119 | |
| 120 | - `references/project-setup.md` - Complete file templates |
| 121 | - `references/geist-icons.md` - **Icons and brand assets (MUST READ)** |
| 122 | - `references/code-blocks.md` - **Syntax-highlighted code blocks (use prism-react-renderer)** |
| 123 | - `references/geist-colors.md` - Full 10-step color scale |
| 124 | - `references/geist-typography.md` - All typography classes with specs |
| 125 | - `references/geist-components.md` - Component props |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
