Morfeo Remotion 风格规范

与 Morfeo 学院品牌保持一致的 Remotion 视频样式指南。

品牌色值

export const colors = {
  lime: "#cdff3d",      // 主强调色 — 极其重要
  black: "#050508",     // 背景色
  darkGray: "#111111",  // 次级背景色
  white: "#FFFFFF",     // 文字色
  gray: "#888888",      // 低饱和度文字色
};

字体排印

import { loadFont as loadDMSans } from "@remotion/google-fonts/DMSans";
import { loadFont as loadInstrumentSerif } from "@remotion/google-fonts/InstrumentSerif";
import { loadFont as loadJetBrainsMono } from "@remotion/google-fonts/JetBrainsMono";

export const fonts = {
  heading: `${instrumentSerif}, serif`,  // 标题 — 始终为斜体
  body: `${dmSans}, sans-serif`,         // 正文
  mono: `${jetBrainsMono}, monospace`,   // 代码
};

规范要求：

• 标题：Instrument Serif 字体，必须为斜体，字重为 400
• 正文：DM Sans 字体，字重为 400–600
• 代码/技术内容：JetBrains Mono 字体

Emoji 表情符号

通过 CDN 使用 Apple 系统风格 Emoji（Remotion 无法渲染操作系统原生 Emoji）：

// 完整组件见 references/AppleEmoji.tsx

  // 用于与文本内联显示

品牌图标（WhatsApp、Telegram 等）

使用内联 SVG，不可使用图标库（图标库在 Remotion 中不生效）：

// 完整组件见 references/BrandIcon.tsx

动效风格

Spring 动画配置

spring({ 
  frame, 
  fps, 
  from: 0, 
  to: 1, 
  config: { damping: 15 }  // 标准阻尼值
});

入场序列（错落式逐项呈现）

1. 标签（第 0–15 帧）：淡入 + 自顶部滑入
2. Emoji（第 15 帧起）：从缩放 0 开始执行 spring 缩放动画
3. 标题（第 30–50 帧）：淡入 + 自底部滑入
4. 段落行（第 60、90、120 帧）：错落式逐行淡入

脉冲动效（适用于 Emoji）

const pulse = interpolate(
  frame % 60,
  [0, 30, 60],
  [1, 1.1, 1],
  { extrapolateRight: "clamp" }
);

常用元素

青柠色标签（屏幕顶部）

   此处填写文字

大号 Emoji（居中）

标题（Instrument Serif 斜体）

  包含 青柠色强调 的文字

视频规格

• 格式：1080×1920（9:16 竖版故事尺寸）
• FPS：30
• 时长：每条故事视频 5 秒（共 150 帧）
• 背景色：始终使用 colors.black（#050508）

项目初始化

npx create-video@latest --template blank
npm i @remotion/google-fonts

文件结构

src/
├── styles.ts          # 颜色与字体导出文件
├── AppleEmoji.tsx     # Emoji 组件
├── BrandIcon.tsx      # 品牌图标组件（WhatsApp、Telegram 等）
├── [StoryName].tsx    # 各条独立故事文件
└── Root.tsx           # 合成（Composition）配置文件

参考文件

• references/styles.ts — 完整样式文件
• references/AppleEmoji.tsx — Apple Emoji 组件
• references/BrandIcon.tsx — 品牌图标组件
• references/MorfeoStory-example.tsx — 完整故事示例文件

禁止事项

• ❌ 不得使用系统字体（无法正常渲染）
• ❌ 不得使用 simple-icons 等图标库（在 Remotion 中不生效）
• ❌ 标题不得取消斜体样式
• ❌ 不得使用调色板以外的颜色
• ❌ 不得遗漏青柠色（lime）强调色的使用