Back to Details

remotion-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

何时使用

When to Use

当您处理 Remotion 代码时,请使用此技能来获取特定领域的知识和最佳实践。
When working with Remotion code, use this skill to obtain domain-specific knowledge and best practices.

如何使用

How to Use

阅读各个规则文件以获取详细说明和代码示例:
Read the individual rule files for detailed explanations and code examples:

核心概念

Core Concepts

  • rules/animations.md - Remotion 的基础动画技巧
  • rules/compositions.md - 定义组合、静态图像、文件夹、默认属性和动态元数据
  • rules/timing.md - Remotion 中的插值曲线 - 线性、缓动、弹簧动画
  • rules/sequencing.md - Remotion 的序列模式 - 延迟、修剪、限制项目持续时间
  • rules/animations.md - Basic animation techniques for Remotion
  • rules/compositions.md - Define compositions, static images, folders, default properties and dynamic metadata
  • rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
  • rules/sequencing.md - Sequencing patterns for Remotion - delay, trimming, limiting project duration

媒体处理

Media Processing

  • rules/images.md - 使用 Img 组件在 Remotion 中嵌入图像
  • rules/videos.md - 在 Remotion 中嵌入视频 - 修剪、音量、速度、循环、音调
  • rules/audio.md - 在 Remotion 中使用音频和声音 - 导入、修剪、音量、速度、音调
  • rules/gifs.md - 显示与 Remotion 时间轴同步的 GIF
  • rules/assets.md - 将图像、视频、音频和字体导入 Remotion
  • rules/images.md - Embed images in Remotion using the Img component
  • rules/videos.md - Embed videos in Remotion - trimming, volume, speed, looping, pitch
  • rules/audio.md - Use audio and sound in Remotion - import, trimming, volume, speed, pitch
  • rules/gifs.md - Display GIFs synchronized with the Remotion timeline
  • rules/assets.md - Import images, videos, audio and fonts into Remotion

高级功能

Advanced Features

  • rules/3d.md - 使用 Three.js 和 React Three Fiber 在 Remotion 中创建 3D 内容
  • rules/display-captions.md - 在 Remotion 中显示字幕,支持 TikTok 风格的分页和单词高亮
  • rules/import-srt-captions.md - 使用 @remotion/captions 将 .srt 字幕文件导入 Remotion
  • rules/transcribe-captions.md - 转录音频以在 Remotion 中生成字幕
  • rules/lottie.md - 在 Remotion 中嵌入 Lottie 动画
  • rules/charts.md - Remotion 的图表和数据可视化模式
  • rules/maps.md - 使用 Mapbox 添加地图并进行动画处理
  • rules/3d.md - Create 3D content in Remotion using Three.js and React Three Fiber
  • rules/display-captions.md - Display captions in Remotion, supporting TikTok-style pagination and word highlighting
  • rules/import-srt-captions.md - Import .srt caption files into Remotion using @remotion/captions
  • rules/transcribe-captions.md - Transcribe audio to generate captions in Remotion
  • rules/lottie.md - Embed Lottie animations in Remotion
  • rules/charts.md - Chart and data visualization patterns for Remotion
  • rules/maps.md - Add and animate maps using Mapbox

文本和排版

Text and Typography

  • rules/fonts.md - 在 Remotion 中加载 Google 字体和本地字体
  • rules/text-animations.md - Remotion 的排版和文本动画模式
  • rules/measuring-text.md - 测量文本尺寸、使文本适应容器以及检查溢出
  • rules/measuring-dom-nodes.md - 在 Remotion 中测量 DOM 元素尺寸
  • rules/fonts.md - Load Google Fonts and local fonts in Remotion
  • rules/text-animations.md - Typography and text animation patterns for Remotion
  • rules/measuring-text.md - Measure text dimensions, fit text to containers and check for overflow
  • rules/measuring-dom-nodes.md - Measure DOM element dimensions in Remotion

视频处理工具

Video Processing Tools

  • rules/extract-frames.md - 使用 Mediabunny 在特定时间戳从视频中提取帧
  • rules/get-video-duration.md - 使用 Mediabunny 获取视频文件的时长(秒)
  • rules/get-video-dimensions.md - 使用 Mediabunny 获取视频文件的宽度和高度
  • rules/get-audio-duration.md - 使用 Mediabunny 获取音频文件的时长(秒)
  • rules/can-decode.md - 使用 Mediabunny 检查浏览器是否可以解码视频
  • rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
  • rules/get-video-duration.md - Get the duration (in seconds) of video files using Mediabunny
  • rules/get-video-dimensions.md - Get the width and height of video files using Mediabunny
  • rules/get-audio-duration.md - Get the duration (in seconds) of audio files using Mediabunny
  • rules/can-decode.md - Check if the browser can decode videos using Mediabunny

配置和优化

Configuration and Optimization

  • rules/parameters.md - 通过添加 Zod 模式使视频可参数化
  • rules/calculate-metadata.md - 动态设置组合持续时间、尺寸和属性
  • rules/tailwind.md - 在 Remotion 中使用 TailwindCSS
  • rules/transparent-videos.md - 渲染带有透明度的视频
  • rules/trimming.md - Remotion 的修剪模式 - 剪切动画的开头或结尾
  • rules/transitions.md - Remotion 的场景转场模式
  • rules/parameters.md - Make videos parameterizable by adding Zod schemas
  • rules/calculate-metadata.md - Dynamically set composition duration, dimensions and properties
  • rules/tailwind.md - Use TailwindCSS in Remotion
  • rules/transparent-videos.md - Render videos with transparency
  • rules/trimming.md - Trimming patterns for Remotion - cut the start or end of animations
  • rules/transitions.md - Scene transition patterns for Remotion

重要提示

Important Notes

  • 所有动画必须由 
    useCurrentFrame()
    钩子驱动
  • 禁止使用 CSS 过渡或动画 - 它们无法正确渲染
  • 禁止使用 Tailwind 动画类名 - 它们无法正确渲染
  • 使用秒为单位编写动画,并乘以 
    useVideoConfig()
    中的 
    fps
    值
  • All animations must be driven by the 
    useCurrentFrame()
    hook
  • Do not use CSS transitions or animations - they cannot be rendered correctly
  • Do not use Tailwind animation class names - they cannot be rendered correctly
  • Write animations in seconds and multiply by the 
    fps
    value from 
    useVideoConfig()