文章重點摘要
搭配 remotion-best-practices、motion-graphics 與 cinematic-camera 使用,適合新聞、發布、趨勢與文章佐證類場景,不需強制使用終端機畫面。
強制輸入
開始編碼前,務必向使用者確認缺少的決策:
您要哪種格式:4:3 半螢幕 Instagram 插入片段,還是 9:16 全螢幕 Instagram?以及哪種背景:暖光、暗色淨空、淺色網格或暗色網格?
- 4:3 插入片段:1440×1080,設計在 9:16 畫面約一半大小時仍保持可讀。
- 9:16 全螢幕:1080×1920,需保留字幕/介面區域。
- 僅在明確要求時才使用 16:9。
- 若使用者委託選擇背景,則使用暖光。
文章紙張可保持淺色,置於暗色淨空或暗色網格場景中。請勿擅自將整個構圖改為暗色調。
絕對視覺禁令
禁用霓虹、發光、光暈、亮邊、彩色陰影、青紫漸層、漸層光球、放射狀色彩暈染、玻璃擬態、賽博龐克燈光或任何「氛圍編碼」的 AI 裝飾。標記必須表現得像實體螢光筆/紙張處理,而非發光效果。
在交付成品前,請拒絕任何違規處理方式。
核准參考
在開始編碼前,請檢視 assets/examples/article-highlight.mp4 並對照參考畫面。延續其中的編輯層級、紙張充足留白、節制的標記處理、緩慢運鏡以及可讀性。若本地素材無法使用,請參考官方儲存庫畫廊:https://github.com/Liamrjohnston/remotion-motion-graphics-skill。
使用時機
適用於:
- 資訊/新聞/發布/趨勢節拍。
- 「某事物已更改或已發布」的佐證。
- 包含有意義重點片段的真實文章摘錄。
- 需以編輯素材釐清論點,而非使用終端機的證據場景。
若內容為 CLI/設定/代理執行故事,請改用 terminal-inserts。若節拍為產品展示,請使用真實產品影片/UI。
核心架構
當標記筆觸需位於文字後方時,請勿扁平化處理文章。應建立分層的 Remotion DOM/SVG:
- 選定的場景表面。
- 編輯用紙張/卡片,預留充足的留白邊距。
- 粗糙.js/SVG 標記層,位於紙張上方。
- DOM/SVG 文字層,位於標記上方。
標記必須明顯位於文字後方、紙張上方。
材質與佈局
- 紙張:暖白/米白,搭配中性邊框與柔和中性陰影;禁用彩色發光。
- 字體層級:編輯/新聞層級——小型章節標籤、大型襯線/編輯主標題、低調的作者/日期,以及最多 2-3 行內文。
- 標記:節制的半透明實體螢光筆顏色,例如柔和黃色;禁用螢光色。
- 使用真實文章/來源識別資訊與提供的文字。請勿虛構出版品、日期、主張或引言。
- 刻意手動斷行,並將文字保持在轉換後的安全邊距內。
- 請勿像標題投影片般置中;應呈現真實文章摘錄的感覺。
- 若目標尺寸下無法閱讀,請移除非必要的標籤、按鈕或來源雜訊。
動畫
- 僅在符合核准參考時,以簡短節制的模糊到清晰效果開場;模糊是光學對焦,非發光。
- 在初期對焦階段,不可顯示標記。
- 使用緩慢微妙的鏡頭推進與節制的透視旋轉。
- 在對焦穩定後才開始繪製標記筆觸。
- 使用遮罩/擦拭效果,從左到右繪製每個標記。
- 依序顯示標記;不可一次全部顯現。
- 結尾時所有關鍵片語皆可讀,並保持穩定停留。
- 使用
useCurrentFrame()、spring()與interpolate()驅動動畫;禁用 CSS 動畫。
螢光筆規則
- 使用粗糙.js 或不規則的 SVG 標記形狀。
- 標記位於文字後方。
- 些微不完美是好的;完美的漸層矩形則否。
- 僅標記有意義且經過驗證的片語,而非整個段落。
- 標記透明度須保留文字對比度。
- 禁用螢光黃、發光邊緣、模糊光暈或亮邊。
避免重複敘述
當文章/來源文字本身就是實際證據時,可予以呈現。請勿添加僅重複語音旁白的獨立標題。僅使用真實摘錄與最小限度的結構化後設資料。
第一道否決關卡
在每個答案都是「否」之前,請勿交付成品:
- 格式或背景是否未經確認?
- 是否有霓虹、發光、標記發光處理、彩色陰影、漸層暈染或玻璃擬態?
- 來源/文章識別資訊或主張是否為虛構?
- 卡片是否為通用的置中標題投影片,而非編輯表面?
- 在選定的 Instagram 版位中,是否有任何關鍵文字無法閱讀?
- 標記是否位於文字上方/遮蔽文字,或顯示時間過早?
- 鏡頭是否裁切紙張或產生無意義的移動?
- 結果是否缺乏核准參考的節制與精緻度?
請私下修改,直到通過關卡。
QA 與交付
- 執行型別檢查或最小的有效驗證。
- 渲染出:無標記的早期影格、標記進行中的影格、標記完成的最終影格以及結尾停留影格。
- 確認標記在初期不可見,位於文字後方,並於結尾完整。
- 檢查裁切、無法閱讀的文字、虛構來源資訊、霓虹/發光以及弱構圖。
- 交付 MP4,並附上解析度、長度、確切的渲染指令以及編輯器放置說明。