liandyao/remotion

Overview

This skill provides a complete, Chinese-language collection of Remotion best practices and recipes focused on mobile portrait video workflows. It consolidates practical rules, code examples, and patterns for animations, assets, audio, captions, maps, and more. The content is organized as individual rule files so you can quickly find targeted guidance and copy runnable examples.

How this skill works

Each rule file explains a specific Remotion topic and includes code snippets you can copy into your project. Topics cover 3D, animations, assets, audio handling, captions, sequencing, Lottie, maps, and utilities that call Mediabunny for media metadata. The package assumes a default portrait composition (1080x1920) and shows how to configure your root Composition accordingly.

When to use it

• When building Remotion videos that need domain-specific guidance (animations, audio, captions).
• When you want ready-to-use code examples in Chinese for quick integration.
• When standardizing a portrait (9:16) workflow across a team.
• When you need patterns for importing and measuring assets, or for using Mediabunny utilities.
• When adding interactive elements such as maps, charts, or Lottie animations.

Best practices

• Set a global default Composition size to 1080x1920 in your Remotion root to ensure consistent portrait output.
• Keep rule files focused and copy code examples directly into components to reduce integration friction.
• Use Mediabunny helpers for reliable media metadata (duration, dimensions, decode checks) before rendering.
• Define compositions, default props, and Zod parameter schemas for reproducible, parameterized videos.
• Prefer Sequencing and timing utilities for predictable animation flow and transitions.

Example use cases

• Create TikTok-style captioned clips with auto-highlighted words using the captions rules.
• Build a map animation using the Mapbox guidance and the included map example.
• Render data-driven charts with the charts and animations rules for social media clips.
• Compose multi-clip projects with dynamic durations using the calculate-metadata and compositions rules.
• Embed GIFs, Lottie, or Three.js scenes following the gifs, lottie, and 3D rules for richer visuals.