SuperAPI AI 工具集

remocn-carousel

设计与创作

查看项目

更新于 11-03 03:15

技能介绍

用途 remocn-carousel 面向“照片轮播”这一内容形式:N 张独立的满幅静帧图片,画幅一致、讲同一个故事,从使用 remocn 组件的 Remotion 项目中导出。它不是视频——幻灯片之间没有转场、没有镜头运动,最终交付物是一个 PNG 文件夹。该技能覆盖轮播特有的工作流:幻灯片结构、画幅比例、定格帧计算与静帧导出;组件级知识(选哪个动画、props、风格)来自官方 remocn 技能与在线目录,不应凭记忆猜测。

前置条件

  • 需已有 Remotion 项目,否则用 npx create-video@latest 创建。
  • components.json 中需配置 remocn 注册表(若缺失先执行 shadcn init): "registries": { "@remocn": "https://remocn.dev/r/{name}.json" }
  • 安装官方 remocn 技能:npx skills add Remocn/remocn --yes。若不可用,可在线获取目录 https://remocn.dev/llms-components.txt 及组件页 https://remocn.dev/docs/<section>/<name>.md。网络不可用时应当说明并停止,不得编造组件名或 props。
  • 安装组件:npx shadcn@latest add @remocn/<name>(安装到 components/remocn/)。

一页一个 Composition 每张幻灯片是独立 Composition,尺寸为精确目标尺寸,例如: <Composition id="slide-1" component={Slide1} width={1080} height={1350} fps={30} durationInFrames={120} /> <Composition id="slide-2" component={Slide2} width={1080} height={1350} fps={30} durationInFrames={120} /> 幻灯片为满幅铺满:每张用 Backdrop 包裹,padding={0} radius={0} shadow=""(或直接用 shader),避免露出画布角落。所有幻灯片共用同一画幅比例与同一背景/字体系统,整组需读起来像一件作品(全程保持同一 vibe 标签)。

画幅比例 完整矩阵与安全区见 references/aspect-ratios.md。按平台与内容类型选择:

  • Instagram feed 轮播 → 4:5(1080×1350)为主,1:1 为辅。
  • LinkedIn → 1:1 或 4:5。
  • X → 16:9 或 4:5。
  • Reels/Stories/TikTok → 9:16(1080×1920)。
  • 网页/嵌入 → 16:9。 若需求未写明比例,应主动询问,不可静默选择。若要求“所有比例”,则每种比例各执行一次渲染。

非 1280×720 画布的缩放 remocn 组件按 1280×720 画布布局,其他尺寸下:

  • 文本 fontSize 按 canvasWidth / 1280 缩放。
  • 布局组件接受显式 width/height(如 Reel 的卡片),按画布加边距设置尺寸,不要拉伸。
  • 关键文字保持在安全区内(各边约 10% 边距;9:16 底部约 15% 留空,避免平台 UI 遮挡)。

轮播叙事结构 5–10 张,一张一个要点,沿用视频的三段式逻辑:

  • 钩子:强主张、问题或痛点。
  • 正文:每张一个功能或证据。
  • 行动号召:动作、URL 或下一步。 幻灯片组件捷径(精确 props 请查目录):标题可用 soft-blur-in / tracking-in / per-character-rise / mask-reveal-up;文案可用 staggered-fade-up;照片可放入 polaroid(纸质、手写说明)或 reel(镜头在固定卡片中绽放);数据用 rolling-number / number-wheel;强调用 marker-highlight / inline-highlight。

定格帧计算(清晰静帧) remotion still 只导出时间线上的某一刻。应在所有入场动画结束并保持的帧渲染,绝不用第 0 帧(空白或动画中途)。 const ENTRANCE = 60; // 该页最长的入场动画(各组件页会列出 Length) const HOLD = 30; // 静置保持,让画面显得稳定 export const SLIDE_SETTLE = ENTRANCE + HOLD; 规则:settle = 该页各组件 Length 的最大值 + 10–30 帧缓冲。Composition 的 durationInFrames 需 ≥ settle + 退出余量,但轮播页不放退出动画——用户是滑动切换,没有剪切。若某页使用 Reel,settle 需越过其最后一步及显现。

导出 npx remotion still slide-1 out/slide-1.png --frame=90 npx remotion still slide-2 out/slide-2.png --frame=90

... 每页一条

校验:out/slide-*.png 必须为精确目标尺寸(如 1080 x 1350)。需求要 JPG 时用 --image-format=jpeg。

好与差(轮播版)

  • 一个强调色、句首大写、纯色文字,不用发光或渐变文字填充。
  • 使用需求中的真实文案,不用 lorem ipsum 或“INSERT NAME HERE”。
  • 静帧必须看起来是成品:文字已定格、无半绘制字形、无被裁的角。

常见错误

  • 需求说竖版却硬编码 1280×720 → 交付物错误。先读需求中的比例。
  • 要静帧却导出 MP4(或用视频渲染管线导出静帧)。
  • 在第 0 帧或动画中途导出 → 模糊、文字半绘制。
  • 使用 Math.random() / setInterval → 渲染不确定;改用 @remotion/random 并固定种子。
  • 渲染前字体未加载——使用 @remotion/google-fonts(组件期望 Manrope/--font-geist-sans 变量)与 delayRender 模式。
  • 文字落在最外 10% 被平台界面裁掉。
  • 同一组幻灯片混用画幅比例。

限制与未提供信息 该技能依赖 Remotion 项目、remocn 组件注册表与官方 remocn 技能/在线目录;网络不可用时无法获取组件信息。资料未提供价格、授权、性能数据或独立平台支持信息。