教學
社群原創的 Remotion 教學與實戰指南 · 共 36 篇,依主題分組
核心動畫
7 篇Sequence、Spring、interpolate——掌握 Remotion 動畫基本功。
- · 用 Remotion 做 YouTube 片頭動畫:Logo 揭露 + 品牌標語
- · Instagram Reels 產品展示卡:9:16 直式品牌動畫
- · 轉場特效大全:用 @remotion/transitions 做多場景影片
媒體整合
7 篇音訊、影片、字幕、縮圖、音效設計,把媒體資產融進影片。
- · Podcast 音波視覺化:useAudioData × visualizeAudio
- · 影片章節導航:用 Sequence 做進度條與章節字卡
- · 短影音自動上字幕:用 Whisper 幫你逐字跳動字幕
視覺特效
5 篇粒子、Kinetic Typography、漸層、Glitch、Motion Blur 等純技術炫技。
- · Kinetic Typography:10 種文字動畫 Preset 一次做到會
- · 電影感片頭:Motion Blur + Noise 做出懷舊膠捲質感
- · Particle System:200 顆 seeded 粒子做出爆炸 → 飛行 → 成字的動畫
動畫庫整合
4 篇用 Seek Bridge pattern 把 GSAP、Anime.js、Lottie、Rive 搬進 Remotion。
- · GSAP × Remotion:用 Seek Bridge 模式把 GSAP Timeline 搬進影片
- · Anime.js v4 × Remotion:createTimeline + Seek Bridge
- · Lottie 整合:把 After Effects 動畫直接搬進 Remotion
D3 資料視覺化系列
4 篇Bar Race / Force Graph / World Map / Sankey 四篇 D3 × Remotion。
- · D3.js × Remotion 系列(一):Bar Chart Race 排行榜競賽動畫
- · D3.js × Remotion 系列(二):Force-Directed Graph 物理模擬節點圖
- · D3.js × Remotion 系列(三):geoNaturalEarth1 世界地圖投影