remotion-best-practices
vercel-labs/json-render
Domain-specific best practices and patterns for building videos with Remotion and React.
What is remotion-best-practices?
A comprehensive reference for Remotion video creation, covering animations, assets, audio, 3D content, text, timing, and composition patterns. Use this skill whenever working with Remotion code to access detailed rules and code examples for common video-building tasks.
- Access 30+ rule files covering animations, audio, assets, 3D, charts, and text patterns
- Learn composition structure, metadata calculation, and dynamic prop handling
- Implement timing, transitions, sequencing, and trimming patterns
- Work with media metadata: extract video dimensions, duration, audio duration, and frame extraction
- Integrate third-party tools: Lottie animations, Mapbox maps, TailwindCSS, and light-leak effects
How to install remotion-best-practices
npx skills add https://github.com/vercel-labs/json-render --skill remotion-best-practices- Remotion project already set up
- Basic familiarity with React and JSX
How to use remotion-best-practices
- 1.Identify the video feature you need (e.g., animations, audio, text)
- 2.Locate the corresponding rule file in the skill (e.g., rules/animations.md, rules/audio.md)
- 3.Read the detailed explanation and code examples in that rule file
- 4.Apply the patterns and best practices to your Remotion composition
Use cases
- Building animated explainer videos with synchronized audio and text overlays
- Creating data visualization videos with charts and dynamic metadata
- Developing parametrizable video templates with Zod schemas for different inputs
- Rendering videos with transparency or complex 3D scenes using Three.js
- Implementing subtitle/caption systems and frame extraction workflows
- React developers building video content programmatically
- Video engineers automating video generation pipelines
- Content creators using Remotion for template-based video production
- Full-stack developers integrating video rendering into applications
remotion-best-practices FAQ
Remotion is a framework for creating videos programmatically using React. It lets you build video compositions as React components with full control over animations, timing, and effects.
Yes, Remotion is built on React, so you should be comfortable with React components, hooks, and JSX before using this skill.
Yes, this skill covers integration patterns for Three.js (3D content), Mapbox (maps), Lottie (animations), TailwindCSS, and other libraries.
Use the parameters.md rule to define a Zod schema for your composition, which makes your video parametrizable and allows dynamic content injection.
Each rule file in this skill contains detailed explanations and code examples specific to that feature (e.g., rules/animations.md, rules/audio.md).
Full instructions (SKILL.md)
Source of truth, from vercel-labs/json-render.
name: remotion-best-practices description: Best practices for Remotion - Video creation in React metadata: tags: remotion, video, react, animation, composition
When to use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
Captions
When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.
How to use
Read individual rule files for detailed explanations and code examples:
- rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
- rules/animations.md - Fundamental animation skills for Remotion
- rules/assets.md - Importing images, videos, audio, and fonts into Remotion
- rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
- rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
- rules/charts.md - Chart and data visualization patterns for Remotion
- rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
- rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
- rules/fonts.md - Loading Google Fonts and local fonts in Remotion
- rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
- rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
- rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
- rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
- rules/images.md - Embedding images in Remotion using the Img component
- rules/light-leaks.md - Light leak overlay effects using @remotion/light-leaks
- rules/lottie.md - Embedding Lottie animations in Remotion
- rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
- rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
- rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
- rules/tailwind.md - Using TailwindCSS in Remotion
- rules/text-animations.md - Typography and text animation patterns for Remotion
- rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
- rules/transitions.md - Scene transition patterns for Remotion
- rules/transparent-videos.md - Rendering out a video with transparency
- rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
- rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
- rules/parameters.md - Make a video parametrizable by adding a Zod schema
- rules/maps.md - Add a map using Mapbox and animate it
Related skills
More from vercel-labs/json-render and the wider catalog.
shadcn
36 pre-built shadcn/ui components for json-render with Radix UI + Tailwind CSS.
shadcn-svelte
Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte catalog, or building Svelte web UIs with shadcn-svelte + Tailwind CSS components.
solid
SolidJS renderer for json-render. Use when building @json-render/solid catalogs/registries, wiring Renderer providers, implementing bindings/actions, or troubleshooting Solid-specific reactivity patterns.
svelte
Svelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON, creating component catalogs, or rendering AI-generated specs.
vue
Vue 3 renderer for building UIs from JSON specs with data binding and actions.
xstate
XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.