SuperAPI AI 工具集

remotion-best-practices

前端与建站

查看项目

更新于 10-16 07:58

技能介绍

用途:在处理 Remotion 代码时获取该领域的专门知识,用于在 React 中创建视频。

主要能力与用法: 新建项目时可用 npx create-video@latest --yes --blank --no-tailwind my-video 搭建空白项目(my-video 替换为项目名)。动画使用 useCurrentFrame() 与 interpolate() 控制属性,并用 Easing 自定义节奏;CSS 过渡或动画以及 Tailwind 动画类名不可用于渲染。素材放在项目根目录的 public/ 文件夹,用 staticFile() 引用,也可直接使用远程 URL;图片用 <Img>,视频与音频用 @remotion/media 的 <Video>、<Audio>。用 <Sequence> 的 from 延迟内容、durationInFrames 限制时长,行内内容需设 layout="none"。视频宽高、fps、时长在 src/Root.tsx 的 <Composition> 中定义,也可通过 calculateMetadata 动态计算。用 npx remotion studio 启动预览;可选单帧渲染检查:npx remotion still [composition-id] --scale=0.25 --frame=30。

其他主题:字幕、FFmpeg、静音检测、音频可视化、音效、3D(Three.js/React Three Fiber)、高级音频、动态元数据、高级合成、Google Fonts 与本地字体、Mediabunny 获取音视频时长与尺寸、GIF、图像、光漏、Lottie、测量 DOM 节点与文本、序列、TailwindCSS、文本动画、高级时间、过渡、透明视频、裁剪、高级视频、参数化视频(Zod schema)、地图(Mapbox)、ElevenLabs 配音,分别见对应 rules 文件。库与命令细节以官方资料为准,本处不作扩展。