remotion
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMUEDnote Video Skill (Remotion)
MUEDnote 视频制作技能（基于Remotion）
Remotionを使用したMUEDnote動画制作スキル。
使用Remotion制作MUEDnote相关视频的技能。
注意事項
注意事项
このスキルは新規Remotionプロジェクト作成時のテンプレート。
mued_v2にはRemotionは未インストール。動画制作時は別ディレクトリで作業するか、
mued_v2にRemotionをセットアップすること。
本技能是新建Remotion项目时的模板。mued_v2中未安装Remotion。制作视频时，请在单独目录中作业，或在mued_v2中配置Remotion。
Remotionセットアップ（必要時）
Remotion配置（按需进行）
bash
undefinedbash
undefined別ディレクトリで新規作成
別ディレクトリで新規作成
npx create-video@latest muednote-videos
npx create-video@latest muednote-videos
または mued_v2 に追加（推奨しない - 依存関係が複雑になる）
または mued_v2 に追加（推奨しない - 依存関係が複雑になる）
npm install remotion @remotion/cli @remotion/player
---npm install remotion @remotion/cli @remotion/player
---ブランドガイドライン
品牌指南
カラーパレット
配色方案
typescript
// src/styles/theme.ts
export const colors = {
primary: '#2D3748', // ダークグレー（メインUI）
accent: '#6366F1', // インディゴ（CTAボタン等）
background: '#1A202C', // ダークBG
backgroundLight: '#2D3748',
text: '#E2E8F0', // ライトグレー（本文）
textMuted: '#A0AEC0', // ミュートテキスト
hoo: '#FFFFFF', // Hooは白ラインアート
success: '#48BB78', // 成功
error: '#F56565', // エラー
};typescript
// src/styles/theme.ts
export const colors = {
primary: '#2D3748', // ダークグレー（メインUI）
accent: '#6366F1', // インディゴ（CTAボタン等）
background: '#1A202C', // ダークBG
backgroundLight: '#2D3748',
text: '#E2E8F0', // ライトグレー（本文）
textMuted: '#A0AEC0', // ミュートテキスト
hoo: '#FFFFFF', // Hooは白ラインアート
success: '#48BB78', // 成功
error: '#F56565', // エラー
};タイポグラフィ
字体规范
- 見出し: /
Noto Sans JP Boldfont-weight: 700 - 本文: /
Noto Sans JP Regularfont-weight: 400 - コード/数字:
JetBrains Mono
- 标题: /
Noto Sans JP Boldfont-weight: 700 - 正文: /
Noto Sans JP Regularfont-weight: 400 - 代码/数字:
JetBrains Mono
動画設定デフォルト
视频默认设置
- 解像度: 1920×1080 (16:9)
- FPS: 30
- コーデック: h264
- 分辨率: 1920×1080 (16:9)
- FPS: 30
- 编码器: h264
Hooキャラクター仕様
Hoo角色规范
デザインコンセプト
设计理念
フクロウ + オープンリールテープレコーダー のハイブリッド
- 目 = テープリール（2つの円）
- リール間にテープが張っている
- 音楽記録アプリの象徴的デザイン
猫头鹰+开盘式磁带录音机的混合设计
- 眼睛 = 磁带卷轴（两个圆形）
- 卷轴之间连接着磁带
- 音乐记录应用的标志性设计
基本情報
基本信息
- 名前: Hoo（フー）
- キャッチフレーズ: "ほほう (Ho Hoo)"
- 役割: MUEDnoteのAIアシスタント、マーケティングマスコット
- スタイル: 白いラインアート（モノトーン）
- ベースカラー: （白ストローク、塗りなし）
#FFFFFF - 参照:
/public/logo.png
- 名称: Hoo
- 口号: "ほほう (Ho Hoo)"
- 角色: MUEDnote的AI助手、营销吉祥物
- 风格: 白色线稿（单色调）
- 基础颜色: （白色描边，无填充）
#FFFFFF - 参考文件:
/public/logo.png
アニメーション可能パーツ
可动画部件
| パーツ | 説明 | アニメーション |
|---|---|---|
| left-reel | 左目（テープリール） | 回転 |
| right-reel | 右目（テープリール） | 回転（逆方向） |
| tape | リール間のテープ | 流れる動き |
| body | 本体輪郭 | 揺れ、傾き |
| ears | 耳（羽角） | 軽い揺れ |
| 部件 | 说明 | 动画效果 |
|---|---|---|
| left-reel | 左眼（磁带卷轴） | 旋转 |
| right-reel | 右眼（磁带卷轴） | 反向旋转 |
| tape | 卷轴间的磁带 | 流动效果 |
| body | 身体轮廓 | 晃动、倾斜 |
| ears | 耳朵（羽角） | 轻微晃动 |
表情・状態
表情与状态
| 状態 | 用途 | アニメーション |
|---|---|---|
| idle | 待機 | リールゆっくり回転 + 軽い呼吸 |
| recording | 録音中 | リール高速回転 + テープ流れ |
| curious | 興味・説明 | 首を傾ける + リール回転 |
| happy | 喜び・完了 | リール高速 + 上下バウンス |
| 状态 | 用途 | 动画效果 |
|---|---|---|
| idle | 待机 | 卷轴缓慢旋转 + 轻微呼吸效果 |
| recording | 录音中 | 卷轴高速旋转 + 磁带流动 |
| curious | 好奇・讲解 | 歪头 + 卷轴旋转 |
| happy | 喜悦・完成 | 卷轴高速旋转 + 上下弹跳 |
アニメーションコード
动画代码
typescript
// リール回転（常時）
const reelRotation = (frame / fps) * 30; // 1秒で30度
// 首傾げ（curious時）
const tilt = spring({
frame: frame - startFrame,
fps,
config: { damping: 15, stiffness: 80 },
}) * 15;
// リール高速回転（recording/happy時）
const fastRotation = (frame / fps) * 180;
// テープ流れ（strokeDashoffsetで表現）
const tapeOffset = (frame / fps) * 50;詳細: 参照
hoo-animation.mdtypescript
// リール回転（常時）
const reelRotation = (frame / fps) * 30; // 1秒で30度
// 首傾げ（curious時）
const tilt = spring({
frame: frame - startFrame,
fps,
config: { damping: 15, stiffness: 80 },
}) * 15;
// リール高速回転（recording/happy時）
const fastRotation = (frame / fps) * 180;
// テープ流れ（strokeDashoffsetで表現）
const tapeOffset = (frame / fps) * 50;详情: 参考
hoo-animation.md動画テンプレート
视频模板
1. プロモーション動画（30秒）
1. 推广视频（30秒）
構成:
├── Hook (0-5秒)
│ └── 問題提起テキスト + Hooが右下から登場
├── Problem (5-12秒)
│ └── 課題の可視化 + Hoo心配顔
├── Solution (12-25秒)
│ └── MUEDnote機能デモ + Hooが説明
└── CTA (25-30秒)
└── ダウンロード促し + Hoo喜び指示例:
MUEDnoteの30秒プロモ動画を作成。
Hook: "音楽制作、記録してる？"
Problem: アイデアが消えていく様子
Solution: MUEDnoteの3つの機能をハイライト
CTA: App Storeへ誘導
Hooを各シーンで使用。结构:
├── 钩子部分（0-5秒）
│ └── 问题引导文本 + Hoo从右下角登场
├── 问题呈现（5-12秒）
│ └── 问题可视化 + Hoo担忧表情
├── 解决方案（12-25秒）
│ └── MUEDnote功能演示 + Hoo讲解
└── 行动号召（25-30秒）
└── 引导下载 + Hoo喜悦表情示例指令:
制作MUEDnote的30秒推广视频。
钩子部分: "你在制作、记录音乐吗？"
问题呈现: 创意逐渐消失的场景
解决方案: 突出MUEDnote的3项功能
行动号召: 引导至App Store
在每个场景中使用Hoo。2. 機能紹介動画（15秒）
2. 功能介绍视频（15秒）
構成:
├── タイトル (0-3秒): 機能名 + アイコン
├── デモ (3-12秒): 操作画面のアニメーション
└── 締め (12-15秒): Hoo「ほほう」+ ロゴ结构:
├── 标题（0-3秒）: 功能名称 + 图标
├── 演示（3-12秒）: 操作界面动画
└── 结尾（12-15秒）: Hoo「ほほう」+ 品牌Logo3. チュートリアル動画（60秒）
3. 教程视频（60秒）
構成:
├── 導入 (0-5秒): Hoo挨拶「こんにちは！」
├── ステップ1 (5-20秒): 最初の操作説明
├── ステップ2 (20-35秒): 次の操作説明
├── ステップ3 (35-50秒): 最後の操作説明
└── まとめ (50-60秒): Hoo「ほほう、簡単でしょう？」结构:
├── 开场（0-5秒）: Hoo问候「你好！」
├── 步骤1（5-20秒）: 首次操作说明
├── 步骤2（20-35秒）: 下一步操作说明
├── 步骤3（35-50秒）: 最后一步操作说明
└── 总结（50-60秒）: Hoo「ほほう，很简单吧？」推奨プロジェクト構造
推荐项目结构
muednote-videos/ # 別ディレクトリ推奨
├── src/
│ ├── Root.tsx
│ ├── compositions/
│ │ ├── PromoVideo.tsx
│ │ ├── FeatureDemo.tsx
│ │ └── Tutorial.tsx
│ ├── components/
│ │ ├── Hoo/
│ │ │ ├── HooCharacter.tsx
│ │ │ ├── HooExpressions.tsx
│ │ │ └── animations.ts
│ │ ├── Text/
│ │ │ ├── TitleText.tsx
│ │ │ ├── TypewriterText.tsx
│ │ │ └── HighlightText.tsx
│ │ ├── Transitions/
│ │ │ ├── FadeSlide.tsx
│ │ │ ├── ScaleIn.tsx
│ │ │ └── WipeTransition.tsx
│ │ └── UI/
│ │ ├── PhoneMockup.tsx
│ │ ├── AppStoreBadge.tsx
│ │ └── Logo.tsx
│ ├── styles/
│ │ └── theme.ts
│ └── utils/
│ └── animations.ts
├── public/
│ └── assets/ # ロゴ、スクリーンショット等
└── out/ # レンダリング出力muednote-videos/ # 推荐使用独立目录
├── src/
│ ├── Root.tsx
│ ├── compositions/
│ │ ├── PromoVideo.tsx
│ │ ├── FeatureDemo.tsx
│ │ └── Tutorial.tsx
│ ├── components/
│ │ ├── Hoo/
│ │ │ ├── HooCharacter.tsx
│ │ │ ├── HooExpressions.tsx
│ │ │ └── animations.ts
│ │ ├── Text/
│ │ │ ├── TitleText.tsx
│ │ │ ├── TypewriterText.tsx
│ │ │ └── HighlightText.tsx
│ │ ├── Transitions/
│ │ │ ├── FadeSlide.tsx
│ │ │ ├── ScaleIn.tsx
│ │ │ └── WipeTransition.tsx
│ │ └── UI/
│ │ ├── PhoneMockup.tsx
│ │ ├── AppStoreBadge.tsx
│ │ └── Logo.tsx
│ ├── styles/
│ │ └── theme.ts
│ └── utils/
│ └── animations.ts
├── public/
│ └── assets/ # 存放Logo、截图等资源
└── out/ # 渲染输出目录よく使うアニメーションパターン
常用动画模式
フェードイン + スライドアップ
淡入+向上滑动
typescript
const FadeSlideIn: React.FC<{children: React.ReactNode; delay?: number}> = ({
children,
delay = 0,
}) => {
const frame = useCurrentFrame();
const adjustedFrame = frame - delay;
const opacity = interpolate(adjustedFrame, [0, 20], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
const translateY = interpolate(adjustedFrame, [0, 20], [30, 0], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<div style={{ opacity, transform: `translateY(${translateY}px)` }}>
{children}
</div>
);
};typescript
const FadeSlideIn: React.FC<{children: React.ReactNode; delay?: number}> = ({
children,
delay = 0,
}) => {
const frame = useCurrentFrame();
const adjustedFrame = frame - delay;
const opacity = interpolate(adjustedFrame, [0, 20], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
const translateY = interpolate(adjustedFrame, [0, 20], [30, 0], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<div style={{ opacity, transform: `translateY(${translateY}px)` }}>
{children}
</div>
);
};タイプライター効果
打字机效果
typescript
const TypewriterText: React.FC<{text: string; startFrame?: number}> = ({
text,
startFrame = 0,
}) => {
const frame = useCurrentFrame();
const adjustedFrame = frame - startFrame;
const charsToShow = Math.floor(
interpolate(adjustedFrame, [0, text.length * 3], [0, text.length], {
extrapolateRight: 'clamp',
})
);
return <span>{text.slice(0, charsToShow)}</span>;
};typescript
const TypewriterText: React.FC<{text: string; startFrame?: number}> = ({
text,
startFrame = 0,
}) => {
const frame = useCurrentFrame();
const adjustedFrame = frame - startFrame;
const charsToShow = Math.floor(
interpolate(adjustedFrame, [0, text.length * 3], [0, text.length], {
extrapolateRight: 'clamp',
})
);
return <span>{text.slice(0, charsToShow)}</span>;
};スケールバウンス（登場演出）
缩放弹跳（登场效果）
typescript
const scaleValue = spring({
frame: frame - delay,
fps,
config: {
damping: 10,
stiffness: 100,
mass: 0.5,
},
});typescript
const scaleValue = spring({
frame: frame - delay,
fps,
config: {
damping: 10,
stiffness: 100,
mass: 0.5,
},
});レンダリング
渲染设置
標準（YouTube/LP用）
标准模式（适用于YouTube/着陆页）
bash
npx remotion render src/index.ts CompositionName out/video.mp4bash
npx remotion render src/index.ts CompositionName out/video.mp4高品質
高质量模式
bash
npx remotion render src/index.ts CompositionName out/video-hq.mp4 \
--codec=h264 \
--quality=100bash
npx remotion render src/index.ts CompositionName out/video-hq.mp4 \
--codec=h264 \
--quality=100SNS向け縦型
社交平台专用竖版（适用于Instagram Reels/TikTok）
bash
undefinedbash
undefinedInstagram Reels / TikTok
Instagram Reels / TikTok
npx remotion render src/index.ts VerticalComp out/vertical.mp4
--height=1920 --width=1080
--height=1920 --width=1080
undefinednpx remotion render src/index.ts VerticalComp out/vertical.mp4
--height=1920 --width=1080
--height=1920 --width=1080
undefinedGIF（短尺・ループ用）
GIF格式（适用于短时长循环视频）
bash
npx remotion render src/index.ts ShortLoop out/loop.gif \
--codec=gifbash
npx remotion render src/index.ts ShortLoop out/loop.gif \
--codec=gif関連ファイル
相关文件
- - Hooアニメーション詳細仕様
hoo-animation.md - - Remotionハンズオンメモ
remotion-handson-glasswerks.md
- - Hoo动画详细规范
hoo-animation.md - - Remotion实操笔记
remotion-handson-glasswerks.md