tiktok-promo-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

TikTok Promo Video (Remotion)

TikTok宣传视频（Remotion）

PPT翻訳SaaSのTikTok縦型プロモ動画をRemotionで作成・編集するスキル。

用于通过Remotion制作、编辑PPT翻译SaaS的TikTok竖版宣传视频的技能。

When to Use This Skill

什么时候使用本技能

TikTokプロモ動画の新規シーン作成・既存シーン編集
動画の文言・タイミング・レイアウト修正
新しいComposition（A/Bバリアント）の追加
コンポーネント追加・修正
レンダリングとデバッグ

TikTok宣传视频的新场景制作、现有场景编辑
视频文案、时间轴、布局调整
新增Composition（A/B测试变体）
组件新增、调整
渲染与调试

Project Structure

项目结构

promo-video/
├── package.json              # Remotion + React（バージョンはpackage.json参照）
├── tsconfig.json
├── public/screenshots/       # スクリーンショット素材
│   ├── upload.png
│   ├── dashboard-empty.png
│   └── landing.png
└── src/
    ├── index.ts              # registerRoot(RemotionRoot)
    ├── Root.tsx              # Composition登録（Folder + Composition）
    ├── constants.ts          # 全定数: FPS, サイズ, シーン尺, カラー, コピー
    ├── fonts.ts              # NotoSansJP (@remotion/google-fonts)
    ├── motion.ts             # アニメーションユーティリティ
    ├── index.css             # Tailwind (optional)
    ├── TikTokAd.tsx          # Ad版メイン (Sequence)
    ├── TikTokPromo.tsx       # LP版メイン (TransitionSeries)
    ├── components/
    │   ├── Background.tsx    # ダーク背景
    │   ├── SafeArea.tsx      # TikTok安全領域 (top:160, bottom:260)
    │   ├── KineticLine.tsx   # テキスト表示（emphasis, veil対応）
    │   ├── Icons.tsx         # SVGアイコン（Bolt, Shield, Table, Globe, Pen, Arrow）
    │   ├── TapRing.tsx       # タップアニメーション
    │   ├── TimerBadge.tsx    # タイマー表示
    │   ├── ProgressBar.tsx   # プログレスバー
    │   ├── GlowEffect.tsx    # グロー演出
    │   └── PhoneMockup.tsx   # スマホモック
    └── scenes/
        ├── HookScene.tsx     # LP: フック（課題提示）
        ├── SolutionScene.tsx # LP: 証拠（タイマー + スクショ）
        ├── DemoScene.tsx     # LP: 編集デモ（1行修正）
        ├── FeaturesScene.tsx # LP: 特徴カード（速い/表も翻訳/多言語/直せる）
        ├── CTAScene.tsx      # LP: CTA（comment/try）
        ├── AdHookScene.tsx   # Ad: Before/After カード
        ├── AdProofScene.tsx  # Ad: タイマー + スクショ
        ├── AdDiffScene.tsx   # Ad: 1行修正デモ
        └── AdCTAScene.tsx    # Ad: CTA（profile/comment）

promo-video/
├── package.json              # Remotion + React（版本详见package.json）
├── tsconfig.json
├── public/screenshots/       # 截图素材
│   ├── upload.png
│   ├── dashboard-empty.png
│   └── landing.png
└── src/
    ├── index.ts              # registerRoot(RemotionRoot)
    ├── Root.tsx              # Composition注册（文件夹 + Composition）
    ├── constants.ts          # 全局常量：FPS、尺寸、场景时长、配色、文案
    ├── fonts.ts              # NotoSansJP (@remotion/google-fonts)
    ├── motion.ts             # 动画工具函数
    ├── index.css             # Tailwind (可选)
    ├── TikTokAd.tsx          # 广告版主组件 (Sequence)
    ├── TikTokPromo.tsx       # 落地页版主组件 (TransitionSeries)
    ├── components/
    │   ├── Background.tsx    # 深色背景
    │   ├── SafeArea.tsx      # TikTok安全区域 (顶部:160, 底部:260)
    │   ├── KineticLine.tsx   # 文本展示（支持强调、遮罩效果）
    │   ├── Icons.tsx         # SVG图标（闪电、盾牌、表格、地球、笔、箭头）
    │   ├── TapRing.tsx       # 点击动画
    │   ├── TimerBadge.tsx    # 计时器展示
    │   ├── ProgressBar.tsx   # 进度条
    │   ├── GlowEffect.tsx    # 发光效果
    │   └── PhoneMockup.tsx   # 手机样机
    └── scenes/
        ├── HookScene.tsx     # 落地页：钩子（抛出问题）
        ├── SolutionScene.tsx # 落地页：佐证（计时器 + 截图）
        ├── DemoScene.tsx     # 落地页：编辑演示（修改一行）
        ├── FeaturesScene.tsx # 落地页：功能卡片（速度快/表格也可翻译/多语言/可调整）
        ├── CTAScene.tsx      # 落地页：CTA（评论/试用）
        ├── AdHookScene.tsx   # 广告版：Before/After卡片
        ├── AdProofScene.tsx  # 广告版：计时器 + 截图
        ├── AdDiffScene.tsx   # 广告版：一行修改演示
        └── AdCTAScene.tsx    # 广告版：CTA（主页/评论）

TikTok Format Constraints

TikTok格式约束

項目	値
解像度	1080 x 1920 (9:16 縦型)
FPS	30
Safe Area上部	160px (UIオーバーレイ)
Safe Area下部	260px (UIオーバーレイ)
Safe Area左右	60px padding
Ad版尺	11.5s = 345f
LP版尺	15.0s = 450f

项目	值
分辨率	1080 x 1920 (9:16 竖版)
FPS	30
安全区域顶部	160px (UI覆盖区)
安全区域底部	260px (UI覆盖区)
安全区域左右	60px内边距
广告版时长	11.5s = 345帧
落地页版时长	15.0s = 450帧

Composition Architecture

Composition架构

Ad版 (TikTokAd) —

Sequence

ベース

广告版 (TikTokAd) — 基于

Sequence

Hook(24f/0.8s) → Proof(126f/4.2s) → Diff(105f/3.5s) → CTA(90f/3.0s) = 345f

```
Sequence
```
の
```
from
```
+
```
durationInFrames
```
で正確なフレーム制御
```
COPY_VARIANTS
```
(A/B/C) で文言A/Bテスト
```
ctaVariant
```
("profile" | "comment") でCTAモード切替

Hook(24帧/0.8s) → Proof(126帧/4.2s) → Diff(105帧/3.5s) → CTA(90帧/3.0s) = 345帧

通过
```
Sequence
```
的
```
from
```
+
```
durationInFrames
```
实现精准帧控制
通过
```
COPY_VARIANTS
```
(A/B/C) 实现文案A/B测试
通过
```
ctaVariant
```
("profile" | "comment") 切换CTA模式

LP版 (TikTokPromo) —

TransitionSeries

ベース

落地页版 (TikTokPromo) — 基于

TransitionSeries

Hook(29f) → Proof(107f) → Edit(143f) → Cards(128f) → CTA(75f)
= 482f - 4*8f(transitions) = 450f

```
TransitionSeries
```
+
```
linearTiming
```
でシーン間トランジション
トランジション尺 = 8f (LP_TRANSITION)
計算式: 合計 = sum(シーン尺) - (トランジション数 * トランジション尺)

Hook(29帧) → Proof(107帧) → Edit(143帧) → Cards(128帧) → CTA(75帧)
= 482帧 - 4*8帧(转场) = 450帧

通过
```
TransitionSeries
```
+
```
linearTiming
```
实现场景间转场
转场时长 = 8帧 (LP_TRANSITION)
计算公式: 总时长 = 所有场景时长之和 - (转场数量 * 转场时长)

Animation Rules (CRITICAL)

动画规则（重要）

禁止事項

禁止项

CSS transition/animation 禁止 — Remotionは各フレームを独立レンダリングするため動作しない
emoji禁止 — クロスプラットフォームでレイアウトズレ。SVGアイコン (Icons.tsx) を使用
native
<img>
禁止 —
```
<Img>
```
+
```
staticFile()
```
を使用

禁止使用CSS transition/animation — Remotion会独立渲染每一帧，CSS动画无法正常运行
禁止使用emoji — 跨平台会出现布局偏移，请使用Icons.tsx中的SVG图标
禁止使用原生
<img>
标签 — 请使用
```
<Img>
```
+
```
staticFile()
```
引入图片

必須パターン

必须遵循的模式

typescript

// アニメーションは必ず useCurrentFrame + interpolate/spring
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 10], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

typescript

// 动画必须使用 useCurrentFrame + interpolate/spring实现
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 10], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

motion.ts ユーティリティ

motion.ts工具函数

関数	用途	特徴
`fadeIn(frame, start, duration)`	フェードイン	interpolate
`fadeOut(frame, start, duration)`	フェードアウト	interpolate
`enterFromBottom(frame, start, duration)`	下から登場	Easing.out(exp)
`enterFromRight(frame, start, duration)`	右から登場	Easing.out(exp)
`scaleIn(frame, fps, delay)`	スケールイン	spring(damping:200) — バウンスなし
`springBounce(frame, fps, delay)`	バウンス	spring(damping:12, stiffness:200)

函数	用途	特点
`fadeIn(frame, start, duration)`	淡入	interpolate实现
`fadeOut(frame, start, duration)`	淡出	interpolate实现
`enterFromBottom(frame, start, duration)`	从下方入场	Easing.out(exp)实现
`enterFromRight(frame, start, duration)`	从右侧入场	Easing.out(exp)实现
`scaleIn(frame, fps, delay)`	缩放入场	spring(阻尼:200) — 无弹跳效果
`springBounce(frame, fps, delay)`	弹跳入场	spring(阻尼:12, 刚度:200)

Component API Quick Reference

组件API快速参考

詳細は components.md を参照。

コンポーネント	主なProps	用途
`SafeArea`	children	TikTok安全領域ラッパー
`KineticLine`	text, fontSize, emphasisWord, veil	テキスト表示（固定幅、中央揃え）
`Icons.*`	size	SVGアイコン (Bolt/Table/Globe/Pen/Arrow)
`TapRing`	x, y, delay	タップ演出
`TimerBadge`	seconds, done	タイマー表示
`ProgressBar`	progress, done, width	進捗バー
`Background`	-	ダーク背景
`GlowEffect`	color, size, delay	グロー演出

详情请查看 components.md。

组件	主要Props	用途
`SafeArea`	children	TikTok安全区域包裹器
`KineticLine`	text, fontSize, emphasisWord, veil	文本展示（固定宽度、居中对齐）
`Icons.*`	size	SVG图标（闪电/表格/地球/笔/箭头）
`TapRing`	x, y, delay	点击效果
`TimerBadge`	seconds, done	计时器展示
`ProgressBar`	progress, done, width	进度条
`Background`	-	深色背景
`GlowEffect`	color, size, delay	发光效果

Workflow

工作流

新規シーン作成

新场景制作

```
constants.ts
```
にシーン尺を定義
```
scenes/
```
にシーンコンポーネントを作成
メインコンポーネント (TikTokAd/TikTokPromo) にシーンを追加

TransitionSeries使用時はフレーム計算を検証:

sum(scenes) - (transition_count * LP_TRANSITION) = LP_FRAMES

在
```
constants.ts
```
中定义场景时长
在
```
scenes/
```
目录下创建场景组件
在主组件（TikTokAd/TikTokPromo）中添加对应场景

若使用TransitionSeries需验证帧计算结果：

所有场景时长之和 - (转场数量 * LP_TRANSITION) = LP_FRAMES

文言変更

文案修改

LP版: 各シーンファイル内のテキスト直接変更
Ad版:
```
constants.ts
```
の
```
COPY_VARIANTS
```
(A/B/C) を変更

落地页版：直接修改各场景文件内的文本
广告版：修改
```
constants.ts
```
中的
```
COPY_VARIANTS
```
(A/B/C)

レンダリング

渲染

bash

cd promo-video
npx tsc --noEmit            # 型チェック（必須）
npm run render:all           # 全4本レンダリング

bash

cd promo-video
npx tsc --noEmit            # 类型检查（必须执行）
npm run render:all           # 渲染全部4个版本

個別:

单独渲染：

npm run render:ad-profile # Ad Profile CTA npm run render:ad-comment # Ad Comment CTA npm run render:lp-comment # LP Comment CTA npm run render:lp-try # LP Try CTA


出力先: `promo-video/out/`

npm run render:ad-profile # 广告版 Profile CTA npm run render:ad-comment # 广告版 Comment CTA npm run render:lp-comment # 落地页版 Comment CTA npm run render:lp-try # 落地页版 Try CTA


输出路径：`promo-video/out/`

Common Pitfalls

常见问题

問題	原因	対処
Folder name error	Folder nameにスペース	a-z, A-Z, 0-9, `-` のみ使用
NotoSansJP subset error	"japanese" subset指定	番号付きsubset `[0]` - `[123]` を使用
循環参照	Root.tsx ↔ Composition	fonts.ts を独立ファイルに分離済み
render command format	`remotion render Root CompId`	`remotion render CompId --output path`
画像表示されない	native `<img>`	`<Img src={staticFile("path")}/>`
フォントずれ	fontFamily未設定	AbsoluteFill の style に `fontFamily` 設定
レイアウトずれ	固定幅未設定	KineticLine (maxWidth), テキストはcenter align

问题	原因	解决方法
文件夹名称错误	文件夹名称包含空格	仅使用a-z、A-Z、0-9、 `-` 命名
NotoSansJP子集加载错误	错误指定"japanese"子集	使用带编号的子集 `[0]` - `[123]`
循环引用	Root.tsx ↔ Composition互相引用	已将fonts.ts拆分到独立文件
渲染命令格式错误	使用 `remotion render Root CompId` 格式	使用 `remotion render CompId --output path` 格式
图片无法显示	使用了原生 `<img>` 标签	改用 `<Img src={staticFile("路径")}/>`
字体错位	未设置fontFamily	在AbsoluteFill的style中设置 `fontFamily`
布局错位	未设置固定宽度	使用KineticLine（maxWidth），文本设置居中对齐

AI Assistant Instructions

AI助手使用说明

このスキルが有効化された時:

promo-video/ で作業: cd せず絶対パスを使用
constants.ts を起点に: 尺・カラー・コピーはすべてここ
型チェック必須: 変更後は
```
npx tsc --noEmit
```
を実行
レンダリング確認:
```
npm run render:all
```
で全本出力確認
Remotion best practices skill も参照: アニメーション・トランジション詳細

Always:

アニメーションは
```
useCurrentFrame
```
+
```
interpolate
```
/
```
spring
```
のみ
テキスト表示は
```
KineticLine
```
を優先使用
アイコンは
```
Icons.tsx
```
のSVGアイコンを使用（emoji禁止）
画像は
```
<Img src={staticFile("...")}/>
```
を使用
TransitionSeries のフレーム計算を検証する
SafeArea 内にコンテンツを配置する

Never:

CSS transition/animation を使わない
emoji をテキストに含めない
native
```
<img>
```
を使わない
フレーム計算を検証せずにコミットしない

本技能启用后需遵循以下规则：

在promo-video/目录下操作：无需cd切换目录，使用绝对路径即可
以constants.ts为核心：所有时长、配色、文案都定义在该文件中
必须执行类型检查：修改后需运行
```
npx tsc --noEmit
```
必须验证渲染结果：运行
```
npm run render:all
```
确认所有版本输出正常
可参考Remotion最佳实践技能：查看动画、转场的详细规范

必须始终遵循：

动画仅使用
```
useCurrentFrame
```
+
```
interpolate
```
/
```
spring
```
实现
文本展示优先使用
```
KineticLine
```
组件
图标使用
```
Icons.tsx
```
中的SVG图标（禁止使用emoji）
图片使用
```
<Img src={staticFile("...")}/>
```
引入
验证TransitionSeries的帧计算结果
所有内容都要放在SafeArea内

禁止操作：

不要使用CSS transition/animation
不要在文本中包含emoji
不要使用原生
```
<img>
```
标签
不要未验证帧计算就提交代码