用 Claude + Remotion 製作商業短片：完整 Code 示範 + 教學
用 Claude + Remotion 製作商業短片：完整 Code 示範 + 教學
想用 AI 整片，但唔識寫動畫 Code？
唔使怕，呢篇文章就係畀你睇完短片之後，跟住 Copy & Paste 就得。你只需要用 Claude 話畀佢聽你想要咩風格，然後佢會幫你寫好一個完整動畫結構，輸入落 Remotion（一個用 React 做動畫嘅開源工具），就即刻出片！
以下係短片用到嘅完整 Code，同埋點樣一步步做出嚟。
🧠 背後流程簡介
- Claude Prompt：輸入你想要嘅腳本／畫面／風格
- Claude Output Code：自動幫你寫 Remotion + React Component
- Copy 入 Remotion：基本唔洗改，貼上就用得
- Render：預覽同輸出影片
🧱 項目結構
src/
├── Root.tsx
├── Composition.tsx
├── sequences/
│ ├── Scene1_PainPoint.tsx
│ ├── Scene2_Solution.tsx
│ ├── Scene3_CTA.tsx
│ └── Intro.tsx
├── components/
│ ├── GlassCard.tsx
│ ├── AnimatedText.tsx
│ ├── Logo.tsx
│ └── Background.tsx
└── styles/
└── constants.ts
🛠️ Remotion Setup 教學
npx create-video@latest nextmaven-video
cd nextmaven-video
npm install
🎨 Style 設定（src/styles/constants.ts）
export const COLORS = {
background: '#0a0a0f',
backgroundGradient1: '#1a1a2e',
backgroundGradient2: '#16213e',
accent1: '#667eea',
accent2: '#764ba2',
white: '#ffffff',
whiteAlpha10: 'rgba(255,255,255,0.1)',
whiteAlpha20: 'rgba(255,255,255,0.2)',
whiteAlpha80: 'rgba(255,255,255,0.8)',
};
export const FONTS = {
primary: 'SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif',
weight: {
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
},
};
export const VIDEO_CONFIG = {
width: 1080,
height: 1920,
fps: 30,
durationInSeconds: 15,
};
export const TIMING = {
intro: { start: 0, duration: 30 },
scene1: { start: 30, duration: 90 },
scene2: { start: 120, duration: 150 },
scene3: { start: 270, duration: 180 },
};
🎬 主影片組合器：Root.tsx + Composition.tsx
兩個檔案負責定義影片全局架構，包括 Resolution、Duration、每個場景時間點等等。
🔗 詳細 Code 請參考本頁最下方 完整 Source Code 區。
✨ 特效 Components 精選
GlassCard.tsx：玻璃卡片動畫效果
AnimatedText.tsx：文字動畫（支援打字／淡入／放大）
Logo.tsx：品牌 Logo 動畫
Background.tsx：背景漸變動畫 + 光影球體
✅ 全部都用咗 Spring Animation，唔使手動寫 Frame-by-frame Animation。
📽️ 場景拆解：Scene1、Scene2、Scene3、Intro
每一個場景都係一個 Sequence，照 constants.ts 裏面個 timing 出場。
- Scene1：展示痛點文字卡
- Scene2：介紹解決方案（NextMaven Training）
- Scene3：展示 CTA、Slogan、按鈕動畫
📌 AnimatedText 同 GlassCard 可以重用，自己換字就可以再做第 2 條片！
🏁 Render 影片
npm start # 預覽影片
npx remotion render NextMavenVideo out/nextmaven-video.mp4
📈 想學更多 AI x 視覺自動化？
NextMaven 每星期都會出 AI 商業應用教學，同你一齊做出高質、可 scale 嘅內容／營銷素材。
探索全新部落格文章
隨時掌握我們的最新文章
.png)
.png)
.png)
.png)
.png)
