Remotion小白裁缝秘诀Ⅰ：组件和案例演示

最近在研究remotion制作各种类型比如产品或者口播broll动画，获得了一定的认可，感谢大家，我接下来会出几篇文章分享一下如何入门和更好的使用remotion这个工具，希望对大家有帮助： 以下是一些我制作的视频的演示: 首先 Remotion，是一个基于 React 制作视频的工具，都是通过代码去绘制和控制的，因此，你可以随意修改视频尺寸，帧率和清晰度，比起sd等AI视频，在产品演示，动效等领域，有极大的优势。 它的官方示例、社区组件和模板里，已经有不少现成实现。选中合适的效果，找到对应代码，AI 就有更明确的起点。 本篇整理了一组动态案例和资源入口，旨在让大家对于视频的效果有一个初步的印象，方便后续进一步在视频制作当中更顺畅的与AI沟通。 具体我的制作经验和思路，会在后续的章节中详细补充，感谢大家支持。 可以先看效果，挑中后再找实现；文末附有可以直接交给 AI 的提示词。 一、先看效果：文字、转场、图表、地图、字幕与界面 1. Spinning Text Wheel｜旋转文字轮 多个词沿滚轮式轨迹依次切换，当前词留在中间，前后词带有透视变化。 适合关键词替换、日期切换、功能列表。制作产品介绍时，可以用同一个位置轮流展示几项能力，减少整页文字反复出现。 组件与实现入口 2. Text Marker｜文字高亮 高亮色块逐步覆盖选中的文字，把注意力引向句子里的重点。 适合文章引用、关键词强调、解释性字幕。交给 AI 修改时，明确要强调哪些词，以及高亮应该在什么时候出现。 组件与实现入口 3. Picture in Picture Transition｜画中画转场 画面通过尺寸和位置变化，完成主画面与画中画布局之间的切换。 适合口播配演示、软件操作讲解、人物与产品画面切换。可以保留讲述者，同时把更多空间交给正在介绍的内容。 组件与实现入口 同类参考：Slide to Split Screen｜滑动分屏。适合两个画面的并列比较。 4. Horizontal Bar Chart｜水平柱状图 条形长度随动画增长，让数据差异逐步显现。 适合调查结果、业务指标、不同方案的对比。复用时除了替换数值，还要确认坐标尺度、排序、标签长度和数据单位。 组件与实现入口 同类参考：Number Counter｜数字计数。适合单个关键指标的变化。 5. A-to-B Map Flyover｜地图飞行 镜头在地点之间移动，通过地理空间的连续变化，交代“从哪里到哪里”。 适合旅行路线、城市介绍、地点切换。先把地点和先后顺序写清楚，再让 AI 处理镜头路径、缩放和停留时间。地图服务的 token、数据和费用也要单独检查。 组件与实现入口 同类参考：Watercolor Map｜水彩地图，以及 RemotionUI Map Flight。 6. Moving Pill Captions｜移动胶囊字幕 圆角高亮块随着当前词移动，标出正在说到的位置。 适合口播、访谈和短视频字幕。字幕的颜色可以换，词与音频的时间对应关系不能丢；先有可靠的字幕时间，再决定动效样式。 组件与实现入口 7. Oscilloscope｜示波器 把音频变化表现为动态波形，让声音成为画面的一部分。 适合播客片段、语音消息和音频介绍。需要整套音频加字幕的视频时，可以继续看官方 Audiogram 模板。 组件与实现入口 8. On-Screen Messages｜屏幕消息 消息逐条进入画面，通过对话推动内容。 适合聊天故事、客服流程和 AI 对话演示。让 AI 适配时，要写清发送者、接收者、消息顺序和回复时机，避免对话看起来像无关卡片依次入场。 组件与实现入口 如果要展示代码变化，可以看 Code Hike 官方模板：代码高亮和注解比连续展示整张代码截图更便于跟随。 9. Rotating Cards｜旋转卡片 多张图片卡片旋转切换，形成前后层次。 适合产品系列、作品集合和图片展示。替换素材后，需要重新检查图片比例、主体位置，以及每张卡片留给观众的观看时间。 组件与实现入口 10. Liquid Contours｜液态轮廓 连续轮廓线流动，形成抽象背景。 适合标题背景和品牌画面。背景上还要叠文字时，优先检查对比度和运动强度，保证主体容易看清。 组件与实现入口 二、更多的制作灵感来源 上面十段是 Remotion 官方预览。继续扩展时，可以按需求查下面这些来源。 1. Remotion Elements：常用单个动效 打开 Remotion Elements 文字、字幕、背景、图表、地图和布局都可以从这里开始找。适合已有项目里缺一个具体动作的情况。 给 AI 具体效果页，比只给网站首页更容易找到目标实现。 2. RenderComp Free：比较同类动作的不同做法 打开 RenderComp Free · 源码仓库 网站内包含多个预览，覆盖 Logo、标题、转场、图表和循环背景。 适合还没决定动作形式的时候：先比较同一用途下不同的进入方式和节奏，再挑合适的模板。 3. RemotionUI：字幕、地图与场景组件 打开 RemotionUI · Map Flight RemotionUI 是 Remotion 的一个组件注册表。使用Remotion来学习框架基础;当你需要现成的字幕、场景、转场和构图模板时，可以使用RemotionUI。 4. Remocn：文字与产品演示效果 打开 Remocn · Shimmer Sweep 从一个完整且可剪辑的Remotion视频开始。Remocn模板将场景、过渡和动作结合起来，让你可以自定义内容，打造属于你自己的效果。 5. snapcn：界面与文字组件 打开 snapcn · Text Reveal 适合寻找软件界面、AI 对话和文字揭示相关的具体实现。先挑一个组件看动态，再判断它是否适合当前产品流程。 6. Remotion 官方模板：从一个完整项目开始 Code Hike · Audiogram · Prompt to video 单个组件解决局部动作；完整模板还能提供内容组织和工程结构。代码讲解从 Code Hike 看起，播客片段从 Audiogram 看起，比套用一个用途不相干的大模板更省事。 7. 官方 Transitions 与 Effects：需要更多效果控制时再查 Transitions 文档 · Effects 文档 适合已经明确转场或视觉效果需求、希望进一步调整和组合的情况。这类资料更接近实现工具，交给 AI 时应附上具体目标效果和当前依赖版本。 三、其他优秀案例 看完组件，还可以看看作者怎样把动作组合起来。 1. 官方 Agent Skills 案例与完整提示词 官方演示帖 · 完整提示词记录 2. 机场地图动画 3. GitHub Unwrapped 成片参考 · 源码仓库 4. 小奇说Qoder创意短片 四、先多看一些案例，找到自己想做的感觉 准备做动画时，可以先去上面这些网站逛一圈。多看几种案例，给自己一点比较和选择的空间。 同样是标题出现，有的逐字展开，有的整行滑入，有的从模糊变清晰；同样是展示产品，有的靠连续镜头，有的靠界面状态变化。看得多一点，你会更容易发现自己喜欢什么，也会对这次的内容适合怎样呈现有个大致判断。 第一遍可以凭直觉看：哪些效果让你想多看一次？哪些节奏让你觉得舒服？看到喜欢的，先保存链接或记下名称，不用马上研究代码。 等积累了一批参考，再回头挑出两三段最接近这次想法的，完整看几遍： 喜欢的是文字的出现方式，还是整个画面的排版？ 想借鉴的是镜头怎么移动，还是两个画面怎么接起来？ 是动作本身吸引你，还是颜色、图片和声音共同形成的感觉？ 不一定要说出专业术语。“我喜欢这一段慢慢展开”“这个切换很连贯”“想要这种干净、轻快的感觉”，都可以作为起点。给出具体片段，再用自己的话描述，往往比只说“做得高级一点”更清楚。 如果还拿不准，也可以让 AI 帮忙比较： 五、挑好参考，再开始做一个小样 有了大致方向，再从收藏里选一段最贴近需求的参考，把它交给 AI。 这时候只需要先说清三件事：你要讲什么、喜欢参考里的哪一部分、希望换成什么内容。代码和组件怎么找，可以让 AI 接着处理。 例如，看中了 Spinning Text Wheel，就可以这样说： 确认效果合适后，再继续扩展成完整视频。需要别的动作时，就回到案例库里继续找。 这份合集可以反复拿出来翻。暂时没有制作任务，也可以先看看、存几个喜欢的片段。等真正要做的时候，你手里已经有了一批具体的参考，更容易把想法讲给 AI 听。 🥳感谢看到这里，我是阿哲，欢迎关注我 @Formulasearch 我会持续分享 AI 实践教程。