作光標(biāo)編排：dialogue-duet 與 cast-ensemble 兩式光標(biāo)的 Remotion 實現(xiàn)解析)
AI 技能媒體生成視頻【免費下載鏈接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template項目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft點擊查看免費下載本篇基于鏡頭卡 collab-cursor-moves 展開講解 video-shotcraft 如何把帶身份名牌的協(xié)作光標(biāo)從操作工具升格為演員A 式 dialogue-duet 用兩枚具名光標(biāo)在純暗場上完成一段無 UI 的設(shè)計-開發(fā)交接敘事B 式 cast-ensemble 用五枚錯峰飛入的彩色光標(biāo)為畫布場景鋪設(shè)團(tuán)隊在場的氛圍層。讀完本文你可以直接按卡內(nèi)參數(shù)表復(fù)刻或調(diào)校這兩個 30fps / 1920×1080 的 Remotion 組件并理解每個緩動、頻率、幀窗口取值背后的可讀性判斷。意圖光標(biāo)為什么能當(dāng)演員庫內(nèi)其他鏡頭如 input-trigger-moves 的 cursor-performance 式里光標(biāo)一直是操作工具——點擊有 payload、按下有反饋。本卡把帶名牌的協(xié)作光標(biāo)升格成演員A 式dialogue-duet藍(lán)/綠兩枚具名光標(biāo)在純暗場用位移編排講設(shè)計→開發(fā)交接——畫面沒有一個 UI 元素觀眾照樣看懂劇情光標(biāo)的位置關(guān)系就是臺詞B 式cast-ensemble五枚光標(biāo)錯峰入場后持續(xù)漂移充當(dāng)氛圍粒子團(tuán)隊在場感全靠它其中一枚還會停下來在便簽上打字cameo 戲份。SVG 光標(biāo) 名牌 chip 的渲染成本極低、敘事密度極高是協(xié)作主題最便宜的視覺論證。兩式時長均為 140 幀約 4.7s 30fps能量上一高一低A 式敘事密度高中能量B 式是氛圍層低中能量可墊在任何時長的畫布鏡頭后面。兩式選型式做法適用A dialogue-duet藍(lán)/綠兩枚具名光標(biāo)貝塞爾入場 → 相互靠近對話脈沖呼吸→ 上下弧線繞位交換 → 名牌一亮一暗燈光交接 → 綠光標(biāo) easeIn 放大數(shù)十倍成巨箭頭當(dāng)轉(zhuǎn)場遮擋雙角色交接敘事設(shè)計→開發(fā)、你→AI需要一段無 UI 的純敘事呼吸拍B cast-ensemble5 枚具名彩色光標(biāo)錯峰 spring 飛入灰階畫布 → 雙頻正弦漂移駐場 → 一枚在便簽上打字機(jī)補全一行 → 結(jié)尾全員 easeInOut 聚攏圍觀畫布/白板類產(chǎn)品全片氛圍層主內(nèi)容之外需要別人也在的背景活性A 式 dialogue-duet純暗場對話雙人舞的幀級編排參考實現(xiàn)是 CursorDialogueDuet.tsx全片由useCurrentFrame()驅(qū)動所有位移都是顯式的三次貝塞爾或圓弧參數(shù)方程——沒有任何 linear 直線因為從卡的調(diào)節(jié)手感看直線 linear 立即讀作程序在挪圖標(biāo)曲線 緩動才是人在動。四段位移 兩枚角色的時間碼Designer藍(lán)#4C8DF6與 Developer綠#2FBF71共享中心點CX960, CY520、半徑R270各自走獨立軌跡段落Designer 幀窗口Developer 幀窗口曲線說明入場0–24f4–28f錯峰 4feaseOutCubic三次貝塞爾分別從畫外左/右下飛入左右位彈性減速靠近/回應(yīng)26–56f30–58feaseInOutCubic藍(lán)光標(biāo)探身靠近綠光標(biāo)微微后仰再前傾sin(t·π)·70擺動繞位交換60–98f60–98feaseInOutCubic圓弧藍(lán)走上半弧 180°→360°綠走下半弧 0°→180°同步交換左右位退場/轉(zhuǎn)場104–128f easeIn 甩出畫面左下100–134f easeIn 沖向中心easeInCubic見下文轉(zhuǎn)場放大繞位段是禮讓的身體語言核心兩枚各走半圓弧、上下分弧同步交換而不是同弧同向——同弧同向會讀作相撞上下分弧才是讓路。源碼里藍(lán)光標(biāo)還做了 120ms 級的小銜接混合t 0.08時與上一段終點線性插值避免靠近段終點與圓弧起點出現(xiàn)速度跳變// 繞位從左側(cè)經(jīng)上方繞到右側(cè)60–98 const t easeInOutCubic(clamp01((f - 60) / 38)); const a Math.PI t * Math.PI; // 180° → 360°(上半弧) dx CX Math.cos(a) * (R - 40) * (1 - t * 0.15); dy CY Math.sin(a) * (R - 110);注意橢圓化參數(shù)R-40x 半徑與R-110y 半徑橫軸比縱軸略長繞位軌跡讀作橢圓軌道而非正圓更自然。名牌燈光交接話語權(quán)移交的量化寫法卡里最精妙的一行是名牌亮度公式源碼實現(xiàn)為CursorDialogueDuet.tsx 第 45–47 行opacity: badgeOpacity * (0.28 0.72 * badgeLit), filter: saturate(${0.35 0.65 * badgeLit}), boxShadow: badgeLit 0.6 ? 0 0 ${22 * badgeLit}px ${color} : none,壓暗態(tài)并非全黑opacity保留 0.28 底值、saturate保留 0.35 底色暗側(cè)名牌在場但沉默badgeLit 0.6才加輝光陰影半徑隨badgeLit線性到 22px避免半亮狀態(tài)出現(xiàn)模糊光斑交接發(fā)生在繞位中段70–84fhandoff easeInOutCubic(clamp01((f - 70) / 14))Designer 的badgeLit為1 - handoff、Developer 為handoff一亮一暗同時反向變化?？ǖ恼{(diào)節(jié)手感是兩個都亮讀不出主從一亮一暗才是話語權(quán)移交。此外靠近對話段26–60f藍(lán)光標(biāo)疊加了脈沖呼吸1 sin((f-26)·0.5)·0.05給說話中的狀態(tài)一個微縮放信號。轉(zhuǎn)場放大巨箭頭即前景遮擋物100–134f綠光標(biāo)gScale 2.8 blow * 66easeInCubic34fscale 從 2.8 沖向 68同時interpolate把位置甩向畫面外左上角-160, -140名牌同步1 - clamp01((f-102)/12)淡出。卡里點明easeIn 加速是甩出的關(guān)鍵巨箭頭成為前景遮擋物正好接 transition-hidden-cut 的語法在遮擋幀硬切下一鏡。B 式 cast-ensemble五光標(biāo)群演的氛圍層參數(shù)參考實現(xiàn)是 CursorCastEnsemble.tsx。背景是灰階點陣無限畫布 四張灰階便簽環(huán)境道具便簽的固定隨機(jī)旋轉(zhuǎn)用mulberry32(88)確定性 RNG 生成——整個組件逐幀確定、無真隨機(jī)保證渲染可復(fù)現(xiàn)。群演表錯峰入場與身份編碼五枚演員以數(shù)據(jù)表驅(qū)動CursorCastEnsemble.tsx 第 26–32 行這是復(fù)用時最值得抄的結(jié)構(gòu)角色顏色畫外起點落位入場 delay漂移相位Lisa#4C8DF6(-160, 200)(430, 330)0f0.0Lucas#2FBF71(2080, 160)(1370, 290)5f1.7Marta#F2994A(-160, 900)(560, 760)9f3.1Niko#4C8DF6(2080, 950)(1420, 780)13f4.4Rita#2FBF71(900, -180)(960, 545)17f5.6入場用 Remotionspring({ frame: f - a.delay, fps: 30, config: { damping: 15, stiffness: 90, mass: 0.9 } })從畫外彈簧減速到落位。注意Lisa 與 Niko 同為藍(lán)色、Lucas 與 Rita 同為綠色顏色是身份編碼而非角色編碼且刻意與 A 式的主角配色藍(lán) Designer / 綠 Developer一致——卡內(nèi)已知坑要求兩式同片共存時A 的兩枚主角要從 B 的群演里出同名同色否則讀作兩撥人。名牌 chip 在delay 12f起用 12f 淡入并伴隨translateY((1-badge)·10px)上浮名牌跟光標(biāo)同幀出現(xiàn)讀作貼紙隨減速淡入才是人到了自報家門。雙頻正弦漂移為什么單頻讀作鐘擺落位后settled clamp01((f - delay - 26)/10)漸入疊加兩路正弦漂移const driftX Math.sin(f * 0.055 a.phase) * 46 Math.sin(f * 0.021 a.phase * 2) * 30; const driftY Math.cos(f * 0.047 a.phase * 1.3) * 38 Math.cos(f * 0.017 a.phase) * 24;頻率 0.055 / 0.021 rad/framex 軸幅度 ±46 / ±30pxy 軸同構(gòu)0.047 / 0.017±38 / ±24px每枚光標(biāo)phase不同且第二路頻率用phase·2、phase·1.3錯相——單頻正弦讀作鐘擺雙頻不同相才是人手的隨機(jī)漂移乘在settled上落位前不漂移避免入場路徑被污染。打字 cameo 與結(jié)尾聚攏Rita 的打字戲原片出處 pitch-app 82–90s并入中央大白便簽typedCount在 58–118f 線性吐完Our customers love it共 20 字符光標(biāo)條Math.floor(f / 8) % 2 0按 8f 周期閃、opacity 在 0.15 與 1 之間跳?？ǖ恼{(diào)節(jié)手感裝飾性打字可放到 1f/字符級正文交互打字應(yīng)回 typewriter-moves 的節(jié)奏。結(jié)尾 92f 起 26feaseInOut聚攏到圍觀位GATHER表環(huán)繞中央便簽一圈且漂移衰減到 25% 而非歸零x interpolate(gatherT, [0,1], [x, GATHER[i][0] driftX * 0.25])——完全靜止的光標(biāo)群讀作死機(jī)保留殘余微動是人還在的最后證據(jù)。參數(shù)速查表卡片原表繼承參數(shù)典型值調(diào)節(jié)手感A 位移全部三次貝塞爾入場 easeOut 24f / 靠近 easeInOut 30f / 繞位 easeInOut 38f / 甩出 easeIn 24f無 linear直線linear 立即讀作程序在挪圖標(biāo)曲線緩動才是人在動A 繞位兩枚各走半圓弧上弧 180°→360° vs 下弧 0°→180°同步交換左右位R≈270px同弧同向會相撞感上下分弧是禮讓的身體語言A 燈光交接名牌 opacity 0.280.72·lit、saturate 0.350.65·lit、lit0.6 加輝光交接在繞位中段 70–84f easeInOut 完成一亮一暗是話語權(quán)移交兩個都亮讀不出主從A 轉(zhuǎn)場放大100–134f easeInscale 2.8→68 沖向畫外角落名牌同步淡出easeIn 加速是甩出的關(guān)鍵巨箭頭即前景遮擋物接 transition-hidden-cut 語法B 入場5 枚 delay 0/5/9/13/17f 錯峰spring(damping 15)名牌晚 12f 淡入上浮 10px名牌跟光標(biāo)同幀出現(xiàn)讀作貼紙隨減速淡入才是人到了自報家門B 漂移雙頻正弦疊加0.055/0.021 rad/f每枚相位不同幅度 ±46/30px單頻正弦讀作鐘擺雙頻不同相才是人手的隨機(jī)B 打字 cameo落位后 60f 線性吐字 光標(biāo)條 8f 周期閃裝飾性打字可 1f/字符級正文交互打字回 typewriter-moves 節(jié)奏B 聚攏92f 起 26f easeInOut 到圍觀位漂移幅度衰減到 25% 保留聚攏后漂移不能歸零——完全靜止的光標(biāo)群讀作死機(jī)實戰(zhàn)坑與協(xié)作規(guī)則參數(shù)是調(diào)校起點非實戰(zhàn)定稿兩個 demo 都在灰階/占位素材上通過調(diào)校B 式依賴 Fixtures.tsx 的G灰階調(diào)色板首次實戰(zhàn)須以真實素材回驗。名牌顏色 身份編碼全片必須一致藍(lán) Designer 就一直藍(lán)中途換色觀眾會以為換了人。使用次數(shù)受 P4 規(guī)則約束見 aesthetic-rules.md 的一種動畫手法全片只當(dāng)一次主角A 式是全片一段的戲≤1 次B 式是可全片駐場的氛圍層。兩式同片可共存但 A 的兩枚主角必須從 B 的群演里出同名同色。氛圍層要讓戲B 式漂移光標(biāo)永遠(yuǎn)不許蓋住正在閱讀的主內(nèi)容漂移范圍須避開主體安全區(qū)。與 input-trigger-moves 的分工那張卡的光標(biāo)是操作 UI點擊有 payload本卡光標(biāo)是表演給你看位移即劇情光標(biāo)要點東西時回那張卡。聲音設(shè)計可對照 sound-design.mdA 繞位配輕 whoosh、交接一聲柔和 chime、放大甩出一聲重 whooshB 入場每枚一聲極輕 pop漂移段靜打字段 keyboard 輕聲。落地運行復(fù)制、注冊與驗證按 demos/README.md 的規(guī)范這兩個組件是原生 Remotion 實現(xiàn)用法是 copy 進(jìn)你的項目30fps / 1920×1080注冊成 Composition 即可import React from react; import { Composition, registerRoot } from remotion; import { CursorDialogueDuet } from ./CursorDialogueDuet; import { CursorCastEnsemble } from ./CursorCastEnsemble; export const Root: React.FC () ( Composition idCursorDialogueDuet component{CursorDialogueDuet} durationInFrames{140} fps{30} width{1920} height{1080} / Composition idCursorCastEnsemble component{CursorCastEnsemble} durationInFrames{140} fps{30} width{1920} height{1080} / / ); registerRoot(Root);三個實操注意點手動指定 140 幀時長這兩個組件不像 Motion 系 demo 那樣導(dǎo)出卡名大寫蛇形_DURATION注冊時按卡面時長 140f約 4.7s手動傳durationInFrames。B 式必須帶上 Fixtures.tsx它import { G } from ../../_fixtures/Fixturescopy 后需把 import 路徑改成你項目里的位置A 式僅依賴 remotion無額外共享依賴。驗證路徑新增/修改的 demo 應(yīng)能通過tsc --noEmit --strict與 CI 的 verify job 一致并可用python3 assets/scripts/smoke-render-demos.py做渲染冒煙自動掃描帶_DURATION/_DUR導(dǎo)出的 demo 逐幀渲染首幀斷言非空堵住能編譯不能運行的問題。參考實現(xiàn)與原片出處A dialogue-duetdemos/interaction/collab-cursor-moves/CursorDialogueDuet.tsx原片出處 figma-devmode 0:16–0:20B cast-ensembledemos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx原片出處 figma-devmode 0:05 miro-promo 全片 cursor-ensemble-ambience pitch-app 82–90s 打字 cameo卡片原文意圖/選型/參數(shù)表/已知坑的完整出處references/shots/interaction/collab-cursor-moves.md。贊分享AI 技能媒體生成視頻【免費下載鏈接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template項目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft點擊查看免費下載相關(guān)推薦協(xié)作光標(biāo)當(dāng)演員video-shotcraft 的 dialogue-duet 與 cast-ensemble 兩式鏡頭語法協(xié)作光標(biāo)當(dāng)演員video shotcraft 的 dialogue duet 與 cast ensemble 兩式鏡頭語法 導(dǎo)讀 本文講解 video shoAI 技能媒體生成視頻video-shotcraft 光效三式Spotlight 掃字、Sheen 單點掃光與 Halation 撞停暈染的 Remotion 實現(xiàn)video shotcraft 光效三式Spotlight 掃字、Sheen 單點掃光與 Halation 撞停暈染的 Remotion 實現(xiàn) 本篇聚焦 viAI 技能媒體生成視頻video-shotcraft 圖標(biāo)表演兩式解析爆花確認(rèn)與求關(guān)注彈跳的幀級 Remotion 實現(xiàn)video shotcraft 圖標(biāo)表演兩式解析爆花確認(rèn)與求關(guān)注彈跳的幀級 Remotion 實現(xiàn) 本篇技術(shù)文章圍繞 video shotcraft 鏡頭庫中AI 技能媒體生成視頻上一篇Tom Select高級用法多選、標(biāo)簽、聯(lián)系人列表的實戰(zhàn)案例下一篇終極Claude HUD配置指南3種預(yù)設(shè)布局自定義元素順序完全教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 video-shotcraft 協(xié)作光標(biāo)編排：dialogue-duet 與 cast-ensemble 兩式光標(biāo)的 Remotion 實現(xiàn)解析
AI 技能媒體生成視頻【免費下載鏈接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template項目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft點擊查看免費下載本篇基于鏡頭卡 collab-cursor-moves 展開講解 video-shotcraft 如何把帶身份名牌的協(xié)作光標(biāo)從操作工具升格為演員A 式 dialogue-duet 用兩枚具名光標(biāo)在純暗場上完成一段無 UI 的設(shè)計-開發(fā)交接敘事B 式 cast-ensemble 用五枚錯峰飛入的彩色光標(biāo)為畫布場景鋪設(shè)團(tuán)隊在場的氛圍層。讀完本文你可以直接按卡內(nèi)參數(shù)表復(fù)刻或調(diào)校這兩個 30fps / 1920×1080 的 Remotion 組件并理解每個緩動、頻率、幀窗口取值背后的可讀性判斷。意圖光標(biāo)為什么能當(dāng)演員庫內(nèi)其他鏡頭如 input-trigger-moves 的 cursor-performance 式里光標(biāo)一直是操作工具——點擊有 payload、按下有反饋。本卡把帶名牌的協(xié)作光標(biāo)升格成演員A 式dialogue-duet藍(lán)/綠兩枚具名光標(biāo)在純暗場用位移編排講設(shè)計→開發(fā)交接——畫面沒有一個 UI 元素觀眾照樣看懂劇情光標(biāo)的位置關(guān)系就是臺詞B 式cast-ensemble五枚光標(biāo)錯峰入場后持續(xù)漂移充當(dāng)氛圍粒子團(tuán)隊在場感全靠它其中一枚還會停下來在便簽上打字cameo 戲份。SVG 光標(biāo) 名牌 chip 的渲染成本極低、敘事密度極高是協(xié)作主題最便宜的視覺論證。兩式時長均為 140 幀約 4.7s 30fps能量上一高一低A 式敘事密度高中能量B 式是氛圍層低中能量可墊在任何時長的畫布鏡頭后面。兩式選型式做法適用A dialogue-duet藍(lán)/綠兩枚具名光標(biāo)貝塞爾入場 → 相互靠近對話脈沖呼吸→ 上下弧線繞位交換 → 名牌一亮一暗燈光交接 → 綠光標(biāo) easeIn 放大數(shù)十倍成巨箭頭當(dāng)轉(zhuǎn)場遮擋雙角色交接敘事設(shè)計→開發(fā)、你→AI需要一段無 UI 的純敘事呼吸拍B cast-ensemble5 枚具名彩色光標(biāo)錯峰 spring 飛入灰階畫布 → 雙頻正弦漂移駐場 → 一枚在便簽上打字機(jī)補全一行 → 結(jié)尾全員 easeInOut 聚攏圍觀畫布/白板類產(chǎn)品全片氛圍層主內(nèi)容之外需要別人也在的背景活性A 式 dialogue-duet純暗場對話雙人舞的幀級編排參考實現(xiàn)是 CursorDialogueDuet.tsx全片由useCurrentFrame()驅(qū)動所有位移都是顯式的三次貝塞爾或圓弧參數(shù)方程——沒有任何 linear 直線因為從卡的調(diào)節(jié)手感看直線 linear 立即讀作程序在挪圖標(biāo)曲線 緩動才是人在動。四段位移 兩枚角色的時間碼Designer藍(lán)#4C8DF6與 Developer綠#2FBF71共享中心點CX960, CY520、半徑R270各自走獨立軌跡段落Designer 幀窗口Developer 幀窗口曲線說明入場0–24f4–28f錯峰 4feaseOutCubic三次貝塞爾分別從畫外左/右下飛入左右位彈性減速靠近/回應(yīng)26–56f30–58feaseInOutCubic藍(lán)光標(biāo)探身靠近綠光標(biāo)微微后仰再前傾sin(t·π)·70擺動繞位交換60–98f60–98feaseInOutCubic圓弧藍(lán)走上半弧 180°→360°綠走下半弧 0°→180°同步交換左右位退場/轉(zhuǎn)場104–128f easeIn 甩出畫面左下100–134f easeIn 沖向中心easeInCubic見下文轉(zhuǎn)場放大繞位段是禮讓的身體語言核心兩枚各走半圓弧、上下分弧同步交換而不是同弧同向——同弧同向會讀作相撞上下分弧才是讓路。源碼里藍(lán)光標(biāo)還做了 120ms 級的小銜接混合t 0.08時與上一段終點線性插值避免靠近段終點與圓弧起點出現(xiàn)速度跳變// 繞位從左側(cè)經(jīng)上方繞到右側(cè)60–98 const t easeInOutCubic(clamp01((f - 60) / 38)); const a Math.PI t * Math.PI; // 180° → 360°(上半弧) dx CX Math.cos(a) * (R - 40) * (1 - t * 0.15); dy CY Math.sin(a) * (R - 110);注意橢圓化參數(shù)R-40x 半徑與R-110y 半徑橫軸比縱軸略長繞位軌跡讀作橢圓軌道而非正圓更自然。名牌燈光交接話語權(quán)移交的量化寫法卡里最精妙的一行是名牌亮度公式源碼實現(xiàn)為CursorDialogueDuet.tsx 第 45–47 行opacity: badgeOpacity * (0.28 0.72 * badgeLit), filter: saturate(${0.35 0.65 * badgeLit}), boxShadow: badgeLit 0.6 ? 0 0 ${22 * badgeLit}px ${color} : none,壓暗態(tài)并非全黑opacity保留 0.28 底值、saturate保留 0.35 底色暗側(cè)名牌在場但沉默badgeLit 0.6才加輝光陰影半徑隨badgeLit線性到 22px避免半亮狀態(tài)出現(xiàn)模糊光斑交接發(fā)生在繞位中段70–84fhandoff easeInOutCubic(clamp01((f - 70) / 14))Designer 的badgeLit為1 - handoff、Developer 為handoff一亮一暗同時反向變化?？ǖ恼{(diào)節(jié)手感是兩個都亮讀不出主從一亮一暗才是話語權(quán)移交。此外靠近對話段26–60f藍(lán)光標(biāo)疊加了脈沖呼吸1 sin((f-26)·0.5)·0.05給說話中的狀態(tài)一個微縮放信號。轉(zhuǎn)場放大巨箭頭即前景遮擋物100–134f綠光標(biāo)gScale 2.8 blow * 66easeInCubic34fscale 從 2.8 沖向 68同時interpolate把位置甩向畫面外左上角-160, -140名牌同步1 - clamp01((f-102)/12)淡出。卡里點明easeIn 加速是甩出的關(guān)鍵巨箭頭成為前景遮擋物正好接 transition-hidden-cut 的語法在遮擋幀硬切下一鏡。B 式 cast-ensemble五光標(biāo)群演的氛圍層參數(shù)參考實現(xiàn)是 CursorCastEnsemble.tsx。背景是灰階點陣無限畫布 四張灰階便簽環(huán)境道具便簽的固定隨機(jī)旋轉(zhuǎn)用mulberry32(88)確定性 RNG 生成——整個組件逐幀確定、無真隨機(jī)保證渲染可復(fù)現(xiàn)。群演表錯峰入場與身份編碼五枚演員以數(shù)據(jù)表驅(qū)動CursorCastEnsemble.tsx 第 26–32 行這是復(fù)用時最值得抄的結(jié)構(gòu)角色顏色畫外起點落位入場 delay漂移相位Lisa#4C8DF6(-160, 200)(430, 330)0f0.0Lucas#2FBF71(2080, 160)(1370, 290)5f1.7Marta#F2994A(-160, 900)(560, 760)9f3.1Niko#4C8DF6(2080, 950)(1420, 780)13f4.4Rita#2FBF71(900, -180)(960, 545)17f5.6入場用 Remotionspring({ frame: f - a.delay, fps: 30, config: { damping: 15, stiffness: 90, mass: 0.9 } })從畫外彈簧減速到落位。注意Lisa 與 Niko 同為藍(lán)色、Lucas 與 Rita 同為綠色顏色是身份編碼而非角色編碼且刻意與 A 式的主角配色藍(lán) Designer / 綠 Developer一致——卡內(nèi)已知坑要求兩式同片共存時A 的兩枚主角要從 B 的群演里出同名同色否則讀作兩撥人。名牌 chip 在delay 12f起用 12f 淡入并伴隨translateY((1-badge)·10px)上浮名牌跟光標(biāo)同幀出現(xiàn)讀作貼紙隨減速淡入才是人到了自報家門。雙頻正弦漂移為什么單頻讀作鐘擺落位后settled clamp01((f - delay - 26)/10)漸入疊加兩路正弦漂移const driftX Math.sin(f * 0.055 a.phase) * 46 Math.sin(f * 0.021 a.phase * 2) * 30; const driftY Math.cos(f * 0.047 a.phase * 1.3) * 38 Math.cos(f * 0.017 a.phase) * 24;頻率 0.055 / 0.021 rad/framex 軸幅度 ±46 / ±30pxy 軸同構(gòu)0.047 / 0.017±38 / ±24px每枚光標(biāo)phase不同且第二路頻率用phase·2、phase·1.3錯相——單頻正弦讀作鐘擺雙頻不同相才是人手的隨機(jī)漂移乘在settled上落位前不漂移避免入場路徑被污染。打字 cameo 與結(jié)尾聚攏Rita 的打字戲原片出處 pitch-app 82–90s并入中央大白便簽typedCount在 58–118f 線性吐完Our customers love it共 20 字符光標(biāo)條Math.floor(f / 8) % 2 0按 8f 周期閃、opacity 在 0.15 與 1 之間跳?？ǖ恼{(diào)節(jié)手感裝飾性打字可放到 1f/字符級正文交互打字應(yīng)回 typewriter-moves 的節(jié)奏。結(jié)尾 92f 起 26feaseInOut聚攏到圍觀位GATHER表環(huán)繞中央便簽一圈且漂移衰減到 25% 而非歸零x interpolate(gatherT, [0,1], [x, GATHER[i][0] driftX * 0.25])——完全靜止的光標(biāo)群讀作死機(jī)保留殘余微動是人還在的最后證據(jù)。參數(shù)速查表卡片原表繼承參數(shù)典型值調(diào)節(jié)手感A 位移全部三次貝塞爾入場 easeOut 24f / 靠近 easeInOut 30f / 繞位 easeInOut 38f / 甩出 easeIn 24f無 linear直線linear 立即讀作程序在挪圖標(biāo)曲線緩動才是人在動A 繞位兩枚各走半圓弧上弧 180°→360° vs 下弧 0°→180°同步交換左右位R≈270px同弧同向會相撞感上下分弧是禮讓的身體語言A 燈光交接名牌 opacity 0.280.72·lit、saturate 0.350.65·lit、lit0.6 加輝光交接在繞位中段 70–84f easeInOut 完成一亮一暗是話語權(quán)移交兩個都亮讀不出主從A 轉(zhuǎn)場放大100–134f easeInscale 2.8→68 沖向畫外角落名牌同步淡出easeIn 加速是甩出的關(guān)鍵巨箭頭即前景遮擋物接 transition-hidden-cut 語法B 入場5 枚 delay 0/5/9/13/17f 錯峰spring(damping 15)名牌晚 12f 淡入上浮 10px名牌跟光標(biāo)同幀出現(xiàn)讀作貼紙隨減速淡入才是人到了自報家門B 漂移雙頻正弦疊加0.055/0.021 rad/f每枚相位不同幅度 ±46/30px單頻正弦讀作鐘擺雙頻不同相才是人手的隨機(jī)B 打字 cameo落位后 60f 線性吐字 光標(biāo)條 8f 周期閃裝飾性打字可 1f/字符級正文交互打字回 typewriter-moves 節(jié)奏B 聚攏92f 起 26f easeInOut 到圍觀位漂移幅度衰減到 25% 保留聚攏后漂移不能歸零——完全靜止的光標(biāo)群讀作死機(jī)實戰(zhàn)坑與協(xié)作規(guī)則參數(shù)是調(diào)校起點非實戰(zhàn)定稿兩個 demo 都在灰階/占位素材上通過調(diào)校B 式依賴 Fixtures.tsx 的G灰階調(diào)色板首次實戰(zhàn)須以真實素材回驗。名牌顏色 身份編碼全片必須一致藍(lán) Designer 就一直藍(lán)中途換色觀眾會以為換了人。使用次數(shù)受 P4 規(guī)則約束見 aesthetic-rules.md 的一種動畫手法全片只當(dāng)一次主角A 式是全片一段的戲≤1 次B 式是可全片駐場的氛圍層。兩式同片可共存但 A 的兩枚主角必須從 B 的群演里出同名同色。氛圍層要讓戲B 式漂移光標(biāo)永遠(yuǎn)不許蓋住正在閱讀的主內(nèi)容漂移范圍須避開主體安全區(qū)。與 input-trigger-moves 的分工那張卡的光標(biāo)是操作 UI點擊有 payload本卡光標(biāo)是表演給你看位移即劇情光標(biāo)要點東西時回那張卡。聲音設(shè)計可對照 sound-design.mdA 繞位配輕 whoosh、交接一聲柔和 chime、放大甩出一聲重 whooshB 入場每枚一聲極輕 pop漂移段靜打字段 keyboard 輕聲。落地運行復(fù)制、注冊與驗證按 demos/README.md 的規(guī)范這兩個組件是原生 Remotion 實現(xiàn)用法是 copy 進(jìn)你的項目30fps / 1920×1080注冊成 Composition 即可import React from react; import { Composition, registerRoot } from remotion; import { CursorDialogueDuet } from ./CursorDialogueDuet; import { CursorCastEnsemble } from ./CursorCastEnsemble; export const Root: React.FC () ( Composition idCursorDialogueDuet component{CursorDialogueDuet} durationInFrames{140} fps{30} width{1920} height{1080} / Composition idCursorCastEnsemble component{CursorCastEnsemble} durationInFrames{140} fps{30} width{1920} height{1080} / / ); registerRoot(Root);三個實操注意點手動指定 140 幀時長這兩個組件不像 Motion 系 demo 那樣導(dǎo)出卡名大寫蛇形_DURATION注冊時按卡面時長 140f約 4.7s手動傳durationInFrames。B 式必須帶上 Fixtures.tsx它import { G } from ../../_fixtures/Fixturescopy 后需把 import 路徑改成你項目里的位置A 式僅依賴 remotion無額外共享依賴。驗證路徑新增/修改的 demo 應(yīng)能通過tsc --noEmit --strict與 CI 的 verify job 一致并可用python3 assets/scripts/smoke-render-demos.py做渲染冒煙自動掃描帶_DURATION/_DUR導(dǎo)出的 demo 逐幀渲染首幀斷言非空堵住能編譯不能運行的問題。參考實現(xiàn)與原片出處A dialogue-duetdemos/interaction/collab-cursor-moves/CursorDialogueDuet.tsx原片出處 figma-devmode 0:16–0:20B cast-ensembledemos/interaction/collab-cursor-moves/CursorCastEnsemble.tsx原片出處 figma-devmode 0:05 miro-promo 全片 cursor-ensemble-ambience pitch-app 82–90s 打字 cameo卡片原文意圖/選型/參數(shù)表/已知坑的完整出處references/shots/interaction/collab-cursor-moves.md。贊分享AI 技能媒體生成視頻【免費下載鏈接】video-shotcraftAI video skill for Claude Code Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-ready template項目地址https://gitcode.com/gh_mirrors/vi/video-shotcraft點擊查看免費下載相關(guān)推薦協(xié)作光標(biāo)當(dāng)演員video-shotcraft 的 dialogue-duet 與 cast-ensemble 兩式鏡頭語法協(xié)作光標(biāo)當(dāng)演員video shotcraft 的 dialogue duet 與 cast ensemble 兩式鏡頭語法 導(dǎo)讀 本文講解 video shoAI 技能媒體生成視頻video-shotcraft 光效三式Spotlight 掃字、Sheen 單點掃光與 Halation 撞停暈染的 Remotion 實現(xiàn)video shotcraft 光效三式Spotlight 掃字、Sheen 單點掃光與 Halation 撞停暈染的 Remotion 實現(xiàn) 本篇聚焦 viAI 技能媒體生成視頻video-shotcraft 圖標(biāo)表演兩式解析爆花確認(rèn)與求關(guān)注彈跳的幀級 Remotion 實現(xiàn)video shotcraft 圖標(biāo)表演兩式解析爆花確認(rèn)與求關(guān)注彈跳的幀級 Remotion 實現(xiàn) 本篇技術(shù)文章圍繞 video shotcraft 鏡頭庫中AI 技能媒體生成視頻上一篇Tom Select高級用法多選、標(biāo)簽、聯(lián)系人列表的實戰(zhàn)案例下一篇終極Claude HUD配置指南3種預(yù)設(shè)布局自定義元素順序完全教程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考