Remotion Prompt-to-Motion-Graphics 社媒技能详解让 AI 生成的动画直接适配短视频平台的五条实战规则【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotiontemplate-prompt-to-motion-graphics是 Remotion 官方模板中的一个 AI 动效生成器用户输入自然语言提示词系统检测相关技能Skills并将对应的模式库注入生成模型最终产出可直接渲染的 React/Remotion 组件。本文以其中的社媒技能文件 social-media.md 为主体逐条拆解它为面向 Instagram、TikTok、Reels 等移动端社交平台的内容定义的五条动效规则——安全区、移动端字号、首帧钩子、高对比配色与可循环结尾并结合仓库源码说明这些规则是如何被技能检测系统发现、拼接并注入到代码生成提示词中的。读完后你能理解这类垂直领域知识文件在 AI 生成管线中的完整生命周期也能把其中的排版与动效模式直接复用到自己的 Remotion 竖屏项目中。social-media 技能在模板中的定位模板整体流程为见 README.mdUser Prompt → Validation → Skill Detection → Code Generation → Sanitization → Live Preview技能分为两类Guidance Skills——某个领域的模式库与最佳实践charts、typography、transitions、social-media 等Example Skills——完整可运行的参考代码直方图、打字机、词轮播等。social-media.md属于前者。文件开头的 frontmatter 声明了它的元信息--- title: Social Media Content impact: MEDIUM impactDescription: optimizes content for mobile viewing and engagement tags: social, instagram, tiktok, reels, stories, mobile ---从 skills/index.ts 可以看到social-media被列入GUIDANCE_SKILLS常量并在构建时以import socialMediaSkill from ./social-media.md的形式把整个 Markdown 文件作为字符串导入import socialMediaSkill from ./social-media.md; // Guidance skills (markdown files with patterns/rules) const GUIDANCE_SKILLS [ charts, typography, social-media, messaging, 3d, transitions, sequencing, spring-physics, ] as const;getSkillContent()负责按技能名取回内容getCombinedSkillContent()则把多个技能用\n\n---\n\n分隔符拼接skills/index.ts。也就是说这份 Markdown 文件本身就是写给代码生成模型看的领域专家知识——它的每一条规则最终都会成为系统提示词的一部分。规则一安全区Safe Zone——把关键内容收进中央 80%社交平台在播放视频时界面本身会覆盖画面顶部是账号信息右侧是点赞/评论/分享按钮列底部是标题文字与操作区。因此该技能给出的第一条规则是把关键内容放在画面中央 80% 的区域内避开平台 UI 元素。文档中先给出了一个反例——把标题压在顶部、CTA 压在底部播放时都会被 UI 遮挡AbsoluteFill style{{ padding: 10 }} div style{{ position: absolute, top: 0 }}Title/div div style{{ position: absolute, bottom: 0 }}CTA/div /AbsoluteFill正确做法是用useVideoConfig()拿到的width/height计算百分比内边距让内容整体缩进const SAFE_MARGIN_TOP height * 0.12; const SAFE_MARGIN_BOTTOM height * 0.15; const SAFE_MARGIN_SIDES width * 0.05; AbsoluteFill style{{ paddingTop: SAFE_MARGIN_TOP, paddingBottom: SAFE_MARGIN_BOTTOM, paddingLeft: SAFE_MARGIN_SIDES, paddingRight: SAFE_MARGIN_SIDES, }} {content} /AbsoluteFill;注意三个边距并不对称顶部 12%、底部 15%、两侧各 5%。从取值可以推断其设计意图——竖屏视频中底部 UI标题、账号、进度条占用空间更多所以底部留白最大两侧因为主要是按钮列留白最小。这些常量基于画面实际尺寸按比例计算因此同一套代码渲染到 1080×1920 或 720×1280 都能自动适配不需要为每个平台写死像素值。规则二移动端优先的字号下限第二条规则针对手机上看得清标题最小 48px。文档对比了桌面思维与移动思维的取值方式// 反例手机上看不清 const TITLE_SIZE 24; const BODY_SIZE 14;// 正确移动可读的字号 const TITLE_SIZE Math.max(48, Math.round(width * 0.08)); const BODY_SIZE Math.max(28, Math.round(width * 0.045));Math.max(下限, Math.round(width * 百分比))这一写法并非该技能独创——模板的系统提示词generate/route.ts 中的 LAYOUT RULES明确要求生成代码使用Math.max(minValue, Math.round(width * percentage))做响应式尺寸。两者呼应起来形成一条贯穿所有技能的排版底线字号既要有绝对下限标题 48px、正文 28px又要随画布宽度线性增长保证在更大的渲染尺寸下不会显得局促。规则三首帧钩子Hook in First Frames社媒内容需要在被划走之前抓住注意力技能文件的要求是从第 0 帧就开始有运动静态开场是大忌。反例是把入场动画延迟 30 帧30fps 下即 1 秒这段时间画面静止用户早已划走const entrance spring({ frame: frame - 30, fps }); // Starts after 1 second正确写法是让弹簧从第 0 帧即启动并叠加一个持续的微幅脉动使画面永远在动const entrance spring({ frame, fps, config: { damping: 12, stiffness: 200 }, }); const pulse Math.sin(frame * 0.15) * 0.03 1; // Subtle constant motion div style{{ transform: scale(${entrance * pulse}) }}{content}/div;两个细节值得展开弹簧参数damping: 12, stiffness: 200属于快速、少量回弹的组合。同仓库的 spring-physics 技能 给出了对照stiffness越高回位越快50–200damping越低回弹越明显10–200该组合接近其 snappy 预设风格入场果断但不拖沓。脉动幅度只有 ±3%0.03且频率由frame * 0.15控制。从源码结构看Math.sin的周期约为 42 帧约 1.4 秒/30fps恰好形成不引人注意但持续存在的呼吸感——幅度大一点会晃眼小一点则感知不到。这与spring-physics技能中优先spring()、interpolate()只用于线性进度的原则一致两个技能在提示词中会同时被注入时也不会互相矛盾。规则四高对比配色移动端屏幕亮度高、观看环境杂技能文件建议使用大胆、饱和的颜色并明确给出了社媒友好的色板// Good for social const COLOR_PRIMARY #FF3366; const COLOR_ACCENT #00D4FF; const COLOR_BG #0A0A0A; // Avoid muted/pastel colors that look washed out // const COLOR_PRIMARY #C4A4A4; // Too muted这套组合是典型的深色底 高饱和撞色近黑的#0A0A0A背景把#FF3366品红与#00D4FF青色推到最亮处缩略图和全屏播放时都有强视觉冲击被注释掉的#C4A4A4则是反面教材——低饱和粉灰在白屏强光下会发灰发闷。这一条也与模板系统提示词中的风格约束相容SYSTEM_PROMPT 要求颜色保持最少最多 2–4 种、背景色从第 0 帧就设在 AbsoluteFill 上背景不允许淡入generate/route.ts。即社媒技能补充了选什么颜色系统提示词约束了怎么用颜色。规则五可循环的结尾Loop-Friendly Endings短视频平台尤其是 Reels/Stories 场景经常自动循环播放。技能文件给出两种让循环无缝的手法const TOTAL_DURATION durationInFrames; const loopProgress (frame % TOTAL_DURATION) / TOTAL_DURATION; // Or fade to start state at the end const fadeOut interpolate( frame, [TOTAL_DURATION - 15, TOTAL_DURATION], [1, 0], );取模循环(frame % TOTAL_DURATION) / TOTAL_DURATION把帧号映射为 0–1 的循环进度适合让元素位置、旋转、路径动画首尾相接例如首尾同相位的圆周运动。尾部淡出在最后 15 帧把透明度从 1 线性插值到 0让画面回到起点状态再循环避免结尾与开头硬切。这里interpolate应配合extrapolateLeft/Right: clamp使用——这是系统提示词对所有interpolate()调用统一要求的generate/route.ts。一个适用前提需要注意15 帧的淡出时长是帧数而非秒数在模板默认 30fps 下约为 0.5 秒但在 60fps 下只约 0.25 秒。若模板的帧率可配置设置面板允许 1–60fps见下文换算成帧数时应按fps * 期望秒数推导而不是照抄 15。技能如何被发现并注入提示词源码级调用链上面五条规则只是内容真正有趣的是它们在生成管线中的流转过程。完整链路可以在 generate/route.ts 中找到1. 验证Validation首次请求先用轻量分类器判断提示词是否属于可生成的动效内容。注意 VALID 列表里明确包含 Social media content (stories, reels, posts)generate/route.ts所以帮我做一个 TikTok 开场动画这类请求能通过验证。2. 技能检测Skill Detection随后用SKILL_DETECTION_PROMPT做结构化分类其中社媒类的判定关键词是skills/index.tssocial-media: Instagram stories, TikTok content, YouTube shorts, social media posts, reels, vertical video检测使用 zod schemaz.array(z.enum(SKILL_NAMES))约束输出返回一个技能名数组且允许一个提示词命中多个技能例如Reels 打字机标题会同时命中social-media与typographyconst skillResult await generateObject({ model: openai(gpt-5.2), system: SKILL_DETECTION_PROMPT, prompt: User prompt: ${prompt}, schema: z.object({ skills: z.array(z.enum(SKILL_NAMES)), }), });3. 去重与拼接为避免同一对话中重复注入路由会把本轮新技能与此前已用过的技能做差集previouslyUsedSkills只对新技能取内容再用getCombinedSkillContent()拼接。4. 注入系统提示词技能内容被追加到基础 SYSTEM_PROMPT 之后成为独立的## SKILL-SPECIFIC GUIDANCE小节const enhancedSystemPrompt skillContent ? ${SYSTEM_PROMPT}\n\n## SKILL-SPECIFIC GUIDANCE\n${skillContent} : SYSTEM_PROMPT;首次生成走streamText流式输出并在流开头前置一个metadata事件把命中的技能列表回传给前端generate/route.ts追问follow-up模式则走非流式generateObject在edit/full两种策略间选择做增量编辑或整体替换。5. 编译与预览生成的组件字符串最终由 DynamicComp.tsx 通过delayRender/continueRender配合compileCode()在渲染进程内用 Babel 编译编译失败时会在画面上直接渲染红色错误信息——这就是技能规则最终落地的地方所有 safe margin、字号下限、弹簧参数都要能通过编译并真实渲染。适用前提与配套配置把该技能文件从模板中抽出来独立复用时有几个仓库事实需要先明确渲染画布模板的默认组合是 1920×1080 / 30fps / 180 帧Root.tsx并通过calculateMetadata从 props 动态覆盖时长与帧率。竖屏社媒内容需要自行把 width/height 配成 9:16如 1080×1920——技能文件中的所有比例计算都基于useVideoConfig()的实际width/height因此横竖屏切换时 margin 与字号会自动重算这正是用百分比 下限写法的价值。时长与帧率上限设置面板把 Duration 限制在 1–1000 帧、FPS 限制在 1–60SettingsModal.tsx。循环结尾规则中的 15 帧淡出、首帧钩子中的帧数延迟都应在这个范围内换算。技能是建议不是约束从源码结构看技能内容只是被拼进系统提示词的文本模型仍可能偏离比如用了 pastel 配色。模板的兜底是编译错误自愈循环errorCorrection字段最多重试若干次但它只修语法与编译错误不校验美学规则。渲染与验证方式模板支持npm install后npm run dev起预览、npx remotion render渲染成片见 README.md。remotion.config.ts 开启了 Rspack 打包并将帧图片格式设为 jpeg渲染竖屏长视频时体积会明显小于 png。典型提示词examples/prompts.ts 中内置了打字机、聊天气泡、指标计数器、柱状图、DVD 屏保五个示例提示词可直接用作生成管线的对照输入社媒类请求如做一个 TikTok 风格的产品卖点动画9:16会命中本技能。小结social-media.md 虽只有百余行却浓缩了竖屏社媒动效的五条硬规则内容收进中央 80% 安全区上 12%/下 15%/侧 5%、标题不低于 48px 且随宽度增长、第 0 帧即有运动并叠加 ±3% 的持续脉动、用高饱和撞色代替粉灰低饱和色、结尾用取模进度或尾部 15 帧淡出实现无缝循环。结合 skills/index.ts 与 generate/route.ts 的源码可以确认这类技能文件通过构建时导入 Markdown → 提示词分类命中 → 按技能名取串 → 拼接注入系统提示词 → 流式生成代码 → 浏览器内编译预览的完整链路生效。对 Remotion 开发者而言即便不用这套 AI 管线文件中基于width/height比例计算 margin 与字号、spring({damping: 12, stiffness: 200})配sin脉动、interpolate尾部淡出这几个代码模式都可以直接移植到自己的短视频渲染项目中。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Remotion Prompt-to-Motion-Graphics 社媒技能详解：让 AI 生成的动画直接适配短视频平台的五条实战规则
Remotion Prompt-to-Motion-Graphics 社媒技能详解让 AI 生成的动画直接适配短视频平台的五条实战规则【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotiontemplate-prompt-to-motion-graphics是 Remotion 官方模板中的一个 AI 动效生成器用户输入自然语言提示词系统检测相关技能Skills并将对应的模式库注入生成模型最终产出可直接渲染的 React/Remotion 组件。本文以其中的社媒技能文件 social-media.md 为主体逐条拆解它为面向 Instagram、TikTok、Reels 等移动端社交平台的内容定义的五条动效规则——安全区、移动端字号、首帧钩子、高对比配色与可循环结尾并结合仓库源码说明这些规则是如何被技能检测系统发现、拼接并注入到代码生成提示词中的。读完后你能理解这类垂直领域知识文件在 AI 生成管线中的完整生命周期也能把其中的排版与动效模式直接复用到自己的 Remotion 竖屏项目中。social-media 技能在模板中的定位模板整体流程为见 README.mdUser Prompt → Validation → Skill Detection → Code Generation → Sanitization → Live Preview技能分为两类Guidance Skills——某个领域的模式库与最佳实践charts、typography、transitions、social-media 等Example Skills——完整可运行的参考代码直方图、打字机、词轮播等。social-media.md属于前者。文件开头的 frontmatter 声明了它的元信息--- title: Social Media Content impact: MEDIUM impactDescription: optimizes content for mobile viewing and engagement tags: social, instagram, tiktok, reels, stories, mobile ---从 skills/index.ts 可以看到social-media被列入GUIDANCE_SKILLS常量并在构建时以import socialMediaSkill from ./social-media.md的形式把整个 Markdown 文件作为字符串导入import socialMediaSkill from ./social-media.md; // Guidance skills (markdown files with patterns/rules) const GUIDANCE_SKILLS [ charts, typography, social-media, messaging, 3d, transitions, sequencing, spring-physics, ] as const;getSkillContent()负责按技能名取回内容getCombinedSkillContent()则把多个技能用\n\n---\n\n分隔符拼接skills/index.ts。也就是说这份 Markdown 文件本身就是写给代码生成模型看的领域专家知识——它的每一条规则最终都会成为系统提示词的一部分。规则一安全区Safe Zone——把关键内容收进中央 80%社交平台在播放视频时界面本身会覆盖画面顶部是账号信息右侧是点赞/评论/分享按钮列底部是标题文字与操作区。因此该技能给出的第一条规则是把关键内容放在画面中央 80% 的区域内避开平台 UI 元素。文档中先给出了一个反例——把标题压在顶部、CTA 压在底部播放时都会被 UI 遮挡AbsoluteFill style{{ padding: 10 }} div style{{ position: absolute, top: 0 }}Title/div div style{{ position: absolute, bottom: 0 }}CTA/div /AbsoluteFill正确做法是用useVideoConfig()拿到的width/height计算百分比内边距让内容整体缩进const SAFE_MARGIN_TOP height * 0.12; const SAFE_MARGIN_BOTTOM height * 0.15; const SAFE_MARGIN_SIDES width * 0.05; AbsoluteFill style{{ paddingTop: SAFE_MARGIN_TOP, paddingBottom: SAFE_MARGIN_BOTTOM, paddingLeft: SAFE_MARGIN_SIDES, paddingRight: SAFE_MARGIN_SIDES, }} {content} /AbsoluteFill;注意三个边距并不对称顶部 12%、底部 15%、两侧各 5%。从取值可以推断其设计意图——竖屏视频中底部 UI标题、账号、进度条占用空间更多所以底部留白最大两侧因为主要是按钮列留白最小。这些常量基于画面实际尺寸按比例计算因此同一套代码渲染到 1080×1920 或 720×1280 都能自动适配不需要为每个平台写死像素值。规则二移动端优先的字号下限第二条规则针对手机上看得清标题最小 48px。文档对比了桌面思维与移动思维的取值方式// 反例手机上看不清 const TITLE_SIZE 24; const BODY_SIZE 14;// 正确移动可读的字号 const TITLE_SIZE Math.max(48, Math.round(width * 0.08)); const BODY_SIZE Math.max(28, Math.round(width * 0.045));Math.max(下限, Math.round(width * 百分比))这一写法并非该技能独创——模板的系统提示词generate/route.ts 中的 LAYOUT RULES明确要求生成代码使用Math.max(minValue, Math.round(width * percentage))做响应式尺寸。两者呼应起来形成一条贯穿所有技能的排版底线字号既要有绝对下限标题 48px、正文 28px又要随画布宽度线性增长保证在更大的渲染尺寸下不会显得局促。规则三首帧钩子Hook in First Frames社媒内容需要在被划走之前抓住注意力技能文件的要求是从第 0 帧就开始有运动静态开场是大忌。反例是把入场动画延迟 30 帧30fps 下即 1 秒这段时间画面静止用户早已划走const entrance spring({ frame: frame - 30, fps }); // Starts after 1 second正确写法是让弹簧从第 0 帧即启动并叠加一个持续的微幅脉动使画面永远在动const entrance spring({ frame, fps, config: { damping: 12, stiffness: 200 }, }); const pulse Math.sin(frame * 0.15) * 0.03 1; // Subtle constant motion div style{{ transform: scale(${entrance * pulse}) }}{content}/div;两个细节值得展开弹簧参数damping: 12, stiffness: 200属于快速、少量回弹的组合。同仓库的 spring-physics 技能 给出了对照stiffness越高回位越快50–200damping越低回弹越明显10–200该组合接近其 snappy 预设风格入场果断但不拖沓。脉动幅度只有 ±3%0.03且频率由frame * 0.15控制。从源码结构看Math.sin的周期约为 42 帧约 1.4 秒/30fps恰好形成不引人注意但持续存在的呼吸感——幅度大一点会晃眼小一点则感知不到。这与spring-physics技能中优先spring()、interpolate()只用于线性进度的原则一致两个技能在提示词中会同时被注入时也不会互相矛盾。规则四高对比配色移动端屏幕亮度高、观看环境杂技能文件建议使用大胆、饱和的颜色并明确给出了社媒友好的色板// Good for social const COLOR_PRIMARY #FF3366; const COLOR_ACCENT #00D4FF; const COLOR_BG #0A0A0A; // Avoid muted/pastel colors that look washed out // const COLOR_PRIMARY #C4A4A4; // Too muted这套组合是典型的深色底 高饱和撞色近黑的#0A0A0A背景把#FF3366品红与#00D4FF青色推到最亮处缩略图和全屏播放时都有强视觉冲击被注释掉的#C4A4A4则是反面教材——低饱和粉灰在白屏强光下会发灰发闷。这一条也与模板系统提示词中的风格约束相容SYSTEM_PROMPT 要求颜色保持最少最多 2–4 种、背景色从第 0 帧就设在 AbsoluteFill 上背景不允许淡入generate/route.ts。即社媒技能补充了选什么颜色系统提示词约束了怎么用颜色。规则五可循环的结尾Loop-Friendly Endings短视频平台尤其是 Reels/Stories 场景经常自动循环播放。技能文件给出两种让循环无缝的手法const TOTAL_DURATION durationInFrames; const loopProgress (frame % TOTAL_DURATION) / TOTAL_DURATION; // Or fade to start state at the end const fadeOut interpolate( frame, [TOTAL_DURATION - 15, TOTAL_DURATION], [1, 0], );取模循环(frame % TOTAL_DURATION) / TOTAL_DURATION把帧号映射为 0–1 的循环进度适合让元素位置、旋转、路径动画首尾相接例如首尾同相位的圆周运动。尾部淡出在最后 15 帧把透明度从 1 线性插值到 0让画面回到起点状态再循环避免结尾与开头硬切。这里interpolate应配合extrapolateLeft/Right: clamp使用——这是系统提示词对所有interpolate()调用统一要求的generate/route.ts。一个适用前提需要注意15 帧的淡出时长是帧数而非秒数在模板默认 30fps 下约为 0.5 秒但在 60fps 下只约 0.25 秒。若模板的帧率可配置设置面板允许 1–60fps见下文换算成帧数时应按fps * 期望秒数推导而不是照抄 15。技能如何被发现并注入提示词源码级调用链上面五条规则只是内容真正有趣的是它们在生成管线中的流转过程。完整链路可以在 generate/route.ts 中找到1. 验证Validation首次请求先用轻量分类器判断提示词是否属于可生成的动效内容。注意 VALID 列表里明确包含 Social media content (stories, reels, posts)generate/route.ts所以帮我做一个 TikTok 开场动画这类请求能通过验证。2. 技能检测Skill Detection随后用SKILL_DETECTION_PROMPT做结构化分类其中社媒类的判定关键词是skills/index.tssocial-media: Instagram stories, TikTok content, YouTube shorts, social media posts, reels, vertical video检测使用 zod schemaz.array(z.enum(SKILL_NAMES))约束输出返回一个技能名数组且允许一个提示词命中多个技能例如Reels 打字机标题会同时命中social-media与typographyconst skillResult await generateObject({ model: openai(gpt-5.2), system: SKILL_DETECTION_PROMPT, prompt: User prompt: ${prompt}, schema: z.object({ skills: z.array(z.enum(SKILL_NAMES)), }), });3. 去重与拼接为避免同一对话中重复注入路由会把本轮新技能与此前已用过的技能做差集previouslyUsedSkills只对新技能取内容再用getCombinedSkillContent()拼接。4. 注入系统提示词技能内容被追加到基础 SYSTEM_PROMPT 之后成为独立的## SKILL-SPECIFIC GUIDANCE小节const enhancedSystemPrompt skillContent ? ${SYSTEM_PROMPT}\n\n## SKILL-SPECIFIC GUIDANCE\n${skillContent} : SYSTEM_PROMPT;首次生成走streamText流式输出并在流开头前置一个metadata事件把命中的技能列表回传给前端generate/route.ts追问follow-up模式则走非流式generateObject在edit/full两种策略间选择做增量编辑或整体替换。5. 编译与预览生成的组件字符串最终由 DynamicComp.tsx 通过delayRender/continueRender配合compileCode()在渲染进程内用 Babel 编译编译失败时会在画面上直接渲染红色错误信息——这就是技能规则最终落地的地方所有 safe margin、字号下限、弹簧参数都要能通过编译并真实渲染。适用前提与配套配置把该技能文件从模板中抽出来独立复用时有几个仓库事实需要先明确渲染画布模板的默认组合是 1920×1080 / 30fps / 180 帧Root.tsx并通过calculateMetadata从 props 动态覆盖时长与帧率。竖屏社媒内容需要自行把 width/height 配成 9:16如 1080×1920——技能文件中的所有比例计算都基于useVideoConfig()的实际width/height因此横竖屏切换时 margin 与字号会自动重算这正是用百分比 下限写法的价值。时长与帧率上限设置面板把 Duration 限制在 1–1000 帧、FPS 限制在 1–60SettingsModal.tsx。循环结尾规则中的 15 帧淡出、首帧钩子中的帧数延迟都应在这个范围内换算。技能是建议不是约束从源码结构看技能内容只是被拼进系统提示词的文本模型仍可能偏离比如用了 pastel 配色。模板的兜底是编译错误自愈循环errorCorrection字段最多重试若干次但它只修语法与编译错误不校验美学规则。渲染与验证方式模板支持npm install后npm run dev起预览、npx remotion render渲染成片见 README.md。remotion.config.ts 开启了 Rspack 打包并将帧图片格式设为 jpeg渲染竖屏长视频时体积会明显小于 png。典型提示词examples/prompts.ts 中内置了打字机、聊天气泡、指标计数器、柱状图、DVD 屏保五个示例提示词可直接用作生成管线的对照输入社媒类请求如做一个 TikTok 风格的产品卖点动画9:16会命中本技能。小结social-media.md 虽只有百余行却浓缩了竖屏社媒动效的五条硬规则内容收进中央 80% 安全区上 12%/下 15%/侧 5%、标题不低于 48px 且随宽度增长、第 0 帧即有运动并叠加 ±3% 的持续脉动、用高饱和撞色代替粉灰低饱和色、结尾用取模进度或尾部 15 帧淡出实现无缝循环。结合 skills/index.ts 与 generate/route.ts 的源码可以确认这类技能文件通过构建时导入 Markdown → 提示词分类命中 → 按技能名取串 → 拼接注入系统提示词 → 流式生成代码 → 浏览器内编译预览的完整链路生效。对 Remotion 开发者而言即便不用这套 AI 管线文件中基于width/height比例计算 margin 与字号、spring({damping: 12, stiffness: 200})配sin脉动、interpolate尾部淡出这几个代码模式都可以直接移植到自己的短视频渲染项目中。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考