DAY 271 · 2026-09-28

一個 prompt 做出形象照票選動畫

SLIDES · 4
Day 271 一個 prompt 做出形象照票選動畫 — 投影片 1Day 271 一個 prompt 做出形象照票選動畫 — 投影片 2Day 271 一個 prompt 做出形象照票選動畫 — 投影片 3Day 271 一個 prompt 做出形象照票選動畫 — 投影片 4
1 / 4

Day 255 做了形象照投票頁,選出三個 pose 之後,我又開了第二輪:每個 pose 放進原圖跟幾個不同的修圖版本,請朋友再選一次。三個 pose 加起來一共 16 張候選。

最後三張都選好了。我想用一支影片公布結果,就在這個專案裡請 Claude Opus 5.5 幫我做。

一個 prompt 丟出去,中間我一句話都沒補。1 小時 17 分 29 秒後,我拿到一支 50 秒、有配樂的動畫,畫面、音樂、每一個拍點,全部是 Opus 5.5 自己寫程式做出來的。看到成品的時候我很驚訝。

這篇分享:我下了什麼 prompt、它交出來的影片長什麼樣子、聲音跟發光效果是從哪裡來的,以及為什麼我對這一次的成果特別滿意。

我只交代了幾件事

前面中文是我的需求,後面英文那段是請它拿出動態設計師(motion designer)作品集等級的表現:

幫我用這些候選製作一部動畫,隱藏目前的票數,每張圖片繞著圓柱旋轉然後套用各種進化的動畫最後畫面上只留下勝選的結果,需要很有動感跟震撼特效
Use motion graphic to create a video with music. Show what an incredible motion designer you are, like it is your showreel - go all out!

我只交代了幾件事:不顯示票數、圖片繞著圓柱轉、要有「進化」的效果、要有震撼感,最後只留下選中的那幾張。剩下的分鏡、節奏、音樂全部交給它決定。

交出來的影片長這樣

50 秒,1920×1080,每秒 30 格。畫面上只標版本名稱(例如「修圖 4」),票數完全沒出現。

  • 0–8 秒:一道光線劃過,打字機打出「16 CANDIDATES」,16 張候選在圓柱上展開,越轉越快
  • 8–12 秒:「最終進化 FINAL EVOLUTION」標題砸下來,帶一圈衝擊波
  • 12–36 秒:三個 pose 各有一段獨立的場景,從原圖一路加速切換修圖版本,最後停在選中的那張
    • Pose 1:圓柱輪播,剪影閃爍式的進化
    • Pose 2:老虎機轉盤,畫面切片故障式的進化
    • Pose 3:螺旋隧道,光線掃描式的進化
  • 36–40 秒:沒選上的 13 張一張一張碎成粒子,左上角的計數從 16 倒數到 03,然後全場靜音一拍
  • 40–50 秒:選中的三張跟著三個重拍砸進畫面,「最後選擇」出現,音樂從小調轉成大調收尾

三個 pose 三種不同的進化特效,是它自己決定的。我只說了「各種進化的動畫」。

做這支影片花的成本:

  • 時間:1 小時 17 分 29 秒
  • 用量:100 美元方案每週額度的 3%
  • 設定:Opus 5.5(1M context,也就是一次能記住的對話量很大),思考強度開 max
  • context 最高用到大約 60%,整個過程沒有觸發過 auto compact(context 快滿時自動壓縮對話)

它怎麼在沒有剪輯軟體的情況下做影片

整支影片是用網頁技術「算」出來的:

  1. 切人像遮罩:用 macOS 內建的 Vision(Apple 的影像辨識框架)寫一支 Swift 小程式,把 16 張照片的人像切出來,進化時的白色剪影就是用這些遮罩做的
  2. 畫面:用 Three.js(在瀏覽器裡畫 3D 的 JavaScript 函式庫)寫出圓柱、轉盤、隧道、粒子這些特效
  3. 配樂:用 Web Audio(瀏覽器內建的聲音合成功能)現場合成,120 BPM(每分鐘 120 拍),D 小調,最後轉 D 大調,沒有用任何現成的音檔
  4. 算圖:在 headless Chrome(沒有視窗的 Chrome)裡一格一格算,1500 格算了大約 13 分鐘,再用 ffmpeg(影片轉檔工具)壓成 MP4

畫面跟音樂的每個時間點都寫在同一支 timeline.js 裡,兩邊都從這裡讀,所以每一個重拍都對得上同一格畫面。

聲音跟發光效果都是程式算出來的

整個專案裡的圖像素材只有兩種:我的照片,跟它用 Vision 切出來的人像遮罩(另外只有字型檔)。沒有任何音檔,也沒有任何光效圖片。

聲音全部是用 Web Audio 從頭合成的:

  • 旋律跟和弦:用振盪器(產生固定音高的波形,例如正弦波、三角波、方波)一個音一個音排出來,和弦進行直接寫在程式裡
  • 鼓:大鼓是一個音高快速往下滑的正弦波,小鼓是三角波加雜訊,拍手跟腳踏鈸是雜訊經過不同的濾波器,連太鼓都有
  • 音效:衝擊聲、刷過去的 whoosh、轉盤的刻度聲、開頭的打字聲,都是用振盪器或雜訊調出來的
  • 空間感:殘響也是程式隨機產生的,不是錄下來的真實空間

所有聲音都照著 timeline.js 的時間點排,所以轉盤每喀一聲、照片每碎一張,聲音都剛好落在那一格。

發光效果也是現場畫的:

  • 光芒、光暈、鏡頭光斑:用 canvas 一個像素一個像素算出漸層貼圖
  • 整體的泛光感:Three.js 內建的 bloom 後製效果(把畫面上亮的地方往外暈開)
  • 粒子:碎掉的照片跟背景的漂浮光點,都是 Three.js 的粒子系統

有沒有版權問題

我看了一下,外部來的東西只有兩樣:

用到的東西 來源 授權
Three.js 開源 3D 函式庫 MIT,可以商用
字型 Noto Sans TC、Anton、Space Grotesk、JetBrains Mono Google Fonts SIL Open Font License,可以用在影片裡

配樂、音效、光效都是它寫程式當場生出來的,沒有取樣任何現成的歌或素材,所以不會有配樂被檢舉的問題。這支影片我可以直接分享出去。

它在動手前先算了一件事

它規劃粒子化那一段時,先檢查了一個我根本不會想到的問題:13 張照片碎掉的那一刻,是不是都剛好轉到面向鏡頭。

圓柱在轉,照片碎掉時如果剛好轉到側面或背面,觀眾就看不清楚是哪一張消失了。它先算出圓柱每秒要轉 1.95 弧度,13 次碎掉才能全部落在正面 9.4 度以內。但它覺得這樣轉太快、看不清楚,所以改成每秒 1.6 弧度,每一次都還在正面 40 度以內——剛好一個八分音符轉過一張,也對得上音樂的節拍。

這種細節,我自己做的話大概要等到算完圖、看了影片才會發現。

它聽不到自己做的音樂

交件的時候,它把自己驗證了什麼、沒驗證什麼分開寫:

  • 它從我的 MacBook Air 確認影片連結打得開,檔案也完整複製過去
  • 它沒辦法聽聲音。它只能檢查音樂的響度曲線跟頻譜:開頭安靜、中段更安靜、重拍夠重。混音實際聽起來怎樣,它請我看影片時自己聽聽看

中段會那麼安靜,也是它看了響度數據之後自己決定把音量再調小 3–4 dB(分貝) 的,讓最後的重拍更有衝擊力。

另外它還多壓了一個分享版:原檔 238 MB,分享版 27 MB,傳 LINE 比較方便。

要求越模糊,越容易滿意

我會這麼滿意,是因為我對成品只有一個模糊的想像:要轉、要有進化感、要震撼、隱藏票數、最後留下三張。每一段用什麼特效、配樂走什麼風格,都是它決定的。

對細節沒那麼講究的時候,其實很容易就滿意了。


Day 255 選不出形象照就做個網頁投票:https://www.dawsonwang.com/day/255 形象照投票頁:https://ai-headshot-vote.andrew0424718012-8f5.workers.dev/ Three.js(MIT):https://github.com/mrdoob/three.js/blob/dev/LICENSE Google Fonts 授權說明:https://developers.google.com/fonts/faq

延伸閱讀
看完整 271 篇 →