名称： morfeo-remotion-style
描述： Morfeo Academy 的 Remotion 视频风格指南。在为 Paul/Morfeo Academy 创建 Remotion 视频、故事或动画时使用。触发词包括："estilo Morfeo"、"mi estilo Remotion"、"video para Morfeo"、"story estilo Morfeo" 或来自 Paul 的任何 Remotion 视频请求。

Morfeo Remotion 风格指南

适用于 Morfeo Academy 品牌的 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

表情符号

通过 CDN 使用 Apple 表情符号（Remotion 无法渲染系统表情符号）：

// 完整组件请参考 references/AppleEmoji.tsx
<AppleEmoji emoji="🤖" size={28} />
<InlineEmoji emoji="🎙️" size={38} />  // 用于与文本内联

品牌图标（WhatsApp、Telegram 等）

使用内联 SVG，而非图标库（它们在 Remotion 中无法工作）：

// 完整组件请参考 references/BrandIcon.tsx
<BrandIcon brand="whatsapp" size={44} />
<BrandIcon brand="telegram" size={44} />

动画风格

弹簧动画配置

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

入场序列（交错显示）

1. 标签（帧 0-15）：淡入 + 从顶部滑入
2. 表情符号（帧 15+）：从 0 开始弹簧缩放
3. 标题（帧 30-50）：淡入 + 从底部滑入
4. 文本行（帧 60, 90, 120）：交错淡入

脉动效果（用于表情符号）

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

常用元素

青柠色标签（屏幕顶部）

<div style={{
  position: "absolute",
  top: 80,
  fontSize: 28,
  fontWeight: 600,
  fontFamily: fonts.body,
  color: colors.black,
  backgroundColor: colors.lime,
  padding: "12px 28px",
  borderRadius: 30,
  display: "flex",
  alignItems: "center",
  gap: 8,
}}>
  <AppleEmoji emoji="🤖" size={28} /> 此处放置文本
</div>

大号表情符号（居中）

<AppleEmoji emoji="🗣️" size={140} />

标题（Instrument Serif 斜体）

<h1 style={{
  fontSize: 68,
  fontWeight: 400,
  fontFamily: fonts.heading,
  fontStyle: "italic",  // 始终为斜体
  color: colors.white,
  textAlign: "center",
  lineHeight: 1.15,
}}>
  文本内容 <span style={{ color: colors.lime }}>青柠色强调</span>
</h1>

视频规格

• 格式： 1080x1920（9:16 垂直故事格式）
• 帧率： 30 FPS
• 时长： 每个故事 5 秒（150 帧）
• 背景： 始终使用 colors.black (#050508)

项目设置

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

文件结构

src/
├── styles.ts          # 色彩和字体导出
├── AppleEmoji.tsx     # 表情符号组件
├── BrandIcon.tsx      # 品牌图标组件（WhatsApp、Telegram 等）
├── [StoryName].tsx    # 独立的故事文件
└── Root.tsx           # 合成设置

参考文件

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

禁止事项

• ❌ 使用系统字体（无法渲染）
• ❌ 使用 simple-icons 等图标库（无法工作）
• ❌ 标题不使用斜体
• ❌ 使用调色板之外的颜色
• ❌ 忘记使用青柠色强调色