Skill
4
Agent
All Skills
Search
Tools
中文
|
EN
Explore
Loading...
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()