--- id: daily-remotion-video-creation name: "remotion-video-creation" url: https://skills.yangsir.net/skill/daily-remotion-video-creation author: affaan-m domain: multimedia tags: ["video-creation", "remotion", "animation", "video-editing", "3d-graphics"] install_count: 5000 rating: 4.40 (5 reviews) github: https://github.com/affaan-m/everything-claude-code --- # remotion-video-creation > 处理 Remotion 代码时提供领域特定的知识支持，包含 3D 图形、动画、视频渲染和组件结构的详细规则和代码示例 **Stats**: 5,000 installs · 4.4/5 (5 reviews) ## Before / After 对比 ### 视频开发学习效率 **Before**: 在 Remotion 文档和 GitHub Issues 中搜索解决方案，反复试验组件和动画配置，开发一个 3D 视频效果需要 4 小时 **After**: 自动应用领域规则和最佳实践，直接获得可用代码示例和配置，30 分钟内完成复杂的 3D 视频效果 | Metric | Before | After | Change | |---|---|---|---| | 开发时间 | 240分钟 | 30分钟 | -88% | ## Readme # remotion-video-creation ## When to use Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. ## How to use Read individual rule files for detailed explanations and code examples: - [rules/3d.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber - [rules/animations.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/animations.md) - Fundamental animation skills for Remotion - [rules/assets.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/assets.md) - Importing images, videos, audio, and fonts into Remotion - [rules/audio.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch - [rules/calculate-metadata.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props - [rules/can-decode.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny - [rules/charts.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/charts.md) - Chart and data visualization patterns for Remotion - [rules/compositions.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata - [rules/display-captions.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting - [rules/extract-frames.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny - [rules/fonts.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/fonts.md) - Loading Google Fonts and local fonts in Remotion - [rules/get-audio-duration.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny - [rules/get-video-dimensions.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny - [rules/get-video-duration.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny - [rules/gifs.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline - [rules/images.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/images.md) - Embedding images in Remotion using the Img component - [rules/import-srt-captions.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions - [rules/lottie.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/lottie.md) - Embedding Lottie animations in Remotion - [rules/measuring-dom-nodes.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion - [rules/measuring-text.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow - [rules/sequencing.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items - [rules/tailwind.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/tailwind.md) - Using TailwindCSS in Remotion - [rules/text-animations.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/text-animations.md) - Typography and text animation patterns for Remotion - [rules/timing.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations - [rules/transcribe-captions.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion - [rules/transitions.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/transitions.md) - Scene transition patterns for Remotion - [rules/trimming.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations - [rules/videos.md](https://github.com/affaan-m/everything-claude-code/blob/HEAD/skills/remotion-video-creation/rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch Weekly Installs600Repository[affaan-m/everyt…ude-code](https://github.com/affaan-m/everything-claude-code)GitHub Stars152.8KFirst Seen13 days agoSecurity Audits[Gen Agent Trust HubPass](/affaan-m/everything-claude-code/remotion-video-creation/security/agent-trust-hub)[SocketPass](/affaan-m/everything-claude-code/remotion-video-creation/security/socket)[SnykWarn](/affaan-m/everything-claude-code/remotion-video-creation/security/snyk)Installed oncodex562opencode538gemini-cli533cursor533antigravity532kimi-cli532 --- *Source: https://skills.yangsir.net/skill/daily-remotion-video-creation* *Markdown mirror: https://skills.yangsir.net/api/skill/daily-remotion-video-creation/markdown*