关于 remotion-best-practices
remotion-best-practices 是面向 Remotion 开发的技能资料集,为处理 Remotion 代码的开发者提供按主题划分的规则与示例。内容涵盖动画、媒体、合成、测量和转场等主题。
主要功能
- 01按主题提供 Remotion 规则
- 02包含动画与计时指导
- 03涵盖音视频及图像资源
- 04提供合成与转场模式
- 05包含尺寸和文本测量指导
适用场景
- 01查阅 Remotion 动画实现规则
- 02了解音视频资源的导入与处理
- 03设计合成、序列和场景转场
- 04测量文本或 DOM 节点
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ vercel-labs/ json-render --skill remotion-best-practices安装后在 Claude Code 中输入/remotion-best-practices确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
rules/3d.mdanimations.mdassets.mdaudio.mdcalculate-metadata.mdcan-decode.mdcharts.mdcompositions.mddisplay-captions.mdextract-frames.mdfonts.mdget-audio-duration.mdget-video-dimensions.mdget-video-duration.mdgifs.mdimages.mdimport-srt-captions.mdlight-leaks.mdlottie.mdmaps.mdmeasuring-dom-nodes.mdmeasuring-text.mdparameters.mdsequencing.mdsubtitles.mdtailwind.mdtext-animations.mdrules/assets/charts-bar-chart.tsxtext-animations-typewriter.tsxtext-animations-word-highlight.tsx详细介绍
使用时机
每当处理 Remotion 代码时,都使用这些技能来获取特定领域的知识。
字幕
处理字幕时,请加载 ./rules/subtitles.md 文件,了解更多信息。
使用方法
阅读各个规则文件,了解详细说明和代码示例:
- rules/3d.md - 在 Remotion 中使用 Three.js 和 React Three Fiber 创建 3D 内容
- rules/animations.md - Remotion 的基础动画技能
- rules/assets.md - 将图像、视频、音频和字体导入 Remotion
- rules/audio.md - 在 Remotion 中使用音频和声音:导入、裁剪、音量、速度、音高
- rules/calculate-metadata.md - 动态设置合成时长、尺寸和 props
- rules/can-decode.md - 使用 Mediabunny 检查浏览器能否解码视频
- rules/charts.md - Remotion 的图表和数据可视化模式
- rules/compositions.md - 定义合成、静帧、文件夹、默认 props 和动态元数据
- rules/extract-frames.md - 使用 Mediabunny 从视频的特定时间戳提取帧
- rules/fonts.md - 在 Remotion 中加载 Google Fonts 和本地字体
- rules/get-audio-duration.md - 使用 Mediabunny 获取音频文件的时长(秒)
- rules/get-video-dimensions.md - 使用 Mediabunny 获取视频文件的宽度和高度
- rules/get-video-duration.md - 使用 Mediabunny 获取视频文件的时长(秒)
- rules/gifs.md - 显示与 Remotion 时间轴同步的 GIF
- rules/images.md - 使用 Img 组件在 Remotion 中嵌入图像
- rules/light-leaks.md - 使用 @remotion/light-leaks 创建漏光叠加效果
- rules/lottie.md - 在 Remotion 中嵌入 Lottie 动画
- rules/measuring-dom-nodes.md - 测量 Remotion 中 DOM 元素的尺寸
- rules/measuring-text.md - 测量文本尺寸、使文本适应容器并检查溢出
- rules/sequencing.md - Remotion 的序列编排模式:延迟、裁剪、限制项目时长
- rules/tailwind.md - 在 Remotion 中使用 TailwindCSS
- rules/text-animations.md - Remotion 的排版和文本动画模式
- rules/timing.md - Remotion 中的插值曲线:线性、缓动、弹簧动画
- rules/transitions.md - Remotion 的场景转场模式
- rules/transparent-videos.md - 渲染带透明效果的视频
- rules/trimming.md - Remotion 的裁剪模式:剪掉动画的开头或结尾
- rules/videos.md - 在 Remotion 中嵌入视频:裁剪、音量、速度、循环、音高
- rules/parameters.md - 添加 Zod schema,使视频支持参数化
- rules/maps.md - 使用 Mapbox 添加地图并为其制作动画
评论
支持 Markdown