skills.rest
wilfriedago
wilfriedagoCOMMUNITY
Explore all skills by this author →
Website𝕏@wilfriedago_GitHub

create-remotion-geist

Generate Remotion videos with Geist dark themes, spring animations, and typography.

2|Updated Jan 5, 2024
Search Tags:#vercel#animation#motion graphics#video generation#remotion#geist design
One-click install
npx skills add https://github.com/wilfriedago/dotfiles --skill create-remotion-geist-wilfriedago
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-remotion-geist
Source: https://github.com/wilfriedago/dotfiles/tree/main/agents/skills/create-remotion-geist
Command: npx skills add https://github.com/wilfriedago/dotfiles --skill create-remotion-geist-wilfriedago

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @geist-ui/icons, @remotion/cli, @remotion/tailwind, prism-react-renderer, react, react-dom, remotion, tailwindcss, typescript, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables the creation of professional-quality videos and motion graphics that adhere to Vercel's distinct Geist design system aesthetic, streamlining the process for developers and designers.

Core Features & Use Cases

  • Geist Design System: Applies Vercel's dark theme, spring animations, Geist typography, and color palette.
  • Remotion Integration: Leverages the Remotion framework for programmatic video generation.
  • Use Case: Generate an animated explainer video showcasing a new feature, using Geist's clean, modern look and smooth animations to convey information effectively.

Quick Start

Use the create-remotion-geist skill to scaffold a new Remotion project with Geist styling.

Frequently Asked Questions about create-remotion-geist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create videos with the Vercel Geist design system using Remotion?▼

You can generate Vercel-style videos using Remotion by applying the Geist design system, which includes dark themes, spring animations, and Geist typography. This Skill scaffolds the project using Remotion, Tailwind CSS, and @geist-ui/icons.

Can I use Tailwind CSS for styling animations in a Remotion project?▼

Yes, Tailwind CSS is supported in Remotion projects through the @remotion/tailwind dependency, allowing you to apply utility-first styling alongside Geist typography and dark themes when generating motion graphics.

Does Remotion support programmatic video generation for feature explainer videos?▼

Remotion supports programmatic video generation by leveraging React components to render animations. You can use it to create animated explainer videos that showcase features using the Geist design system's clean, modern look and smooth spring animations.

Do I need TypeScript to generate motion graphics with the Geist design aesthetic?▼

TypeScript is included as a dependency to ensure type-safe React component development when generating Geist-styled motion graphics. You also need Remotion, Tailwind CSS, and @geist-ui/icons to implement the Vercel-style visual elements.

What is the best way to apply Vercel's dark theme and spring animations to motion graphics?▼

The best way to apply Vercel's dark theme and spring animations to motion graphics is by using Remotion integrated with the Geist design system. This provides the specific color palette, typography, and animation curves needed for the aesthetic.

Related Skills

Explore More Design & Creative Skills→
s1366560s1366560
5

create-remotion-geist

Generate Remotion videos styled with Vercel's Geist design system.

Community
Intermediate
aviz85aviz85
4

remotion-render

Render Remotion compositions to MP4 and WebM output files.

Community
Intermediate
mattwoodcomattwoodco
3

video-timeline

Create an interactive React video player with heatmap timeline and clickable hotspots.

Community
Intermediate
DevMatt6DevMatt6

video

Automate video content creation with AI generation models and avatars.

Community
Advanced