摺疊屏發布會動畫被搬進瀏覽器：一個人的六分鐘作品，攤開的是內容生產的成本帳

2026年9月12日，掘金平臺上出現一篇技術文章，作者「雨夜尋晴天」記錄了自己把蘋果新機發布會上的摺疊屏展開動畫，用純網頁技術重做出來的過程。全文閱讀時間約六分鐘，使用的技術棧是 React、CSS 3D 與 GSAP，沒有 WebGL、沒有 three.js、沒有任何 3D 模型檔案。事隔多日，這個作品仍在技術社羣被轉發討論，原因值得從成本結構的角度拆一遍。

這件事的重點不在於有人重現了一段動畫，而在於重現這段動畫所需的投入，與被替代方案的投入之間，差距已經大到改變了誰能參與這類內容生產。

先看規模：一段發布會動畫的製作慣例

手機廠商發布會的產品展示環節，業界慣例是預錄影片加上後期合成。摺疊機的展開鏡頭尤其如此，因為實機拍攝要同時照顧鉸鏈機械動作、螢幕反光、景深變化與界面重排，任何一環慢半拍，畫面就會失真。重工業級的做法是實拍加 CG 補足，單支發布會主影片的製作預算普遍落在數十萬至數百萬美元量級，取決於 CG 鏡頭佔比。

網頁端要做同樣的效果，傳統路徑是 three.js 或 WebGL 場景建模。這條路徑需要 3D 建模、材質貼圖、光照計算，一名熟練工程師做出可發布的作品，通常以週為單位計工。

而這次的作品走了另一條路。整臺「手機」只有左右兩塊剛性平板，右半邊繞鉸鏈從180度轉到0度，所有視覺元素，鉸鏈角度、相機推拉、折痕強度、景深、內容布局，全部由一個名為 progress 的數字驅動，範圍0到1。每幀只更新 CSS 變數，React 不重新渲染。滾動60幀的過程中，瀏覽器只是在更新畫面，框架層近乎休眠。

成本結構拆解：被壓縮的三個環節

這個作品的成本帳，可以拆成三塊來看。

第一塊是算力成本。CSS 3D transform 由瀏覽器的合成器（compositor）處理，不走 JavaScript 逐幀計算的渲染路徑。相較於 WebGL 場景需要持續佔用 GPU 進行光柵化，兩塊平板加一層飛行封面的場景複雜度極低。作者特別設計成每幀只改 CSS 變數，這在低端手機上也能維持流暢，意味著同一份內容的可用設備基數擴大了，邊際分發成本接近零。

第二塊是建模成本。沒有 3D 模型，就沒有建模師、貼圖師與格式轉換的工序。界面內容畫在一張兩倍寬的畫布上，左右面板各自裁切一半，跨折痕的元素天然連續，省掉了手動對齊左右像素的工作。這個設計把原本屬於 3D 管線的座標運算問題，轉換成了 2D 裁切問題，後者的生產工具門檻低得多。

第三塊是規劃成本。作者明確提到，先用 AI 規劃實現方案，再按方案落地。這是整篇帳本裡變動最大的一欄。過去把一個模糊的視覺目標拆解成可執行的技術方案，靠的是資深工程師的經驗累積；現在這個環節的搜尋成本被大幅壓低，剩下的主要支出是作者反覆調試的時間，例如對焦交接的節奏他調了一整晚，靠逐幀截圖才磨出來。

最難的一關：空間關係，而非動畫曲線

值得注意的是，這個案例裡真正花時間的環節，恰好是工具最難替代的環節。

作者描述了一個典型 bug：封面元素從外屏飛往內屏時，如果把飛行層放進相機節點內部，折到大約165度時右半邊翹向觀眾，遠端在 z 軸上跑到玻璃前面，封面被面板蓋住後瞬間消失。代碼邏輯無誤，視覺上一眼穿幫。解法是把飛行層設為相機的兄弟節點，而非子節點。這類問題的排查依賴對空間層級的直覺，作者的表述是「你以為自己在調動畫，實際上是在調空間關係」。

另一個例子是內屏的呈現。直接淡入會失真，真實相機的焦點交接需要外屏晚一點失焦、內屏先淺糊再轉清晰，清晰區域從鉸鏈附近往外擴。作者把這個過程拆成數條獨立曲線，各自配速。

這兩個細節對帳本的意義在於：AI 壓低的是方案規劃與樣板代碼的成本，而感知層面的校準，也就是人眼對空間與焦點的敏感度檢驗，仍由開發者承擔。生產成本沒有歸零，而是從「技術實現」這一欄，移到了「感知校準」這一欄。這與我們先前分析過的LCK季後賽數據影片的內容生產帳呈現同一個方向：當內容的生產工具門檻下降，競爭的差異化點移向資料整理與呈現節奏這類難以模板化的環節。

影響推演：誰受惠、誰承壓

傳導鏈可以這樣畫。

受惠的第一層是中小品牌與獨立開發者的行銷預算結構。產品展示動畫過去是預錄影片的天下，修改一次意味著重錄或重渲染；改成參數驅動的網頁實現後，改一個 CSS 變數就能換配色、換尺寸、換展開節奏。這種可維護性把此類內容從一次性專案，變成了可反覆編輯的資產，折舊速度顯著放緩。對照我們在《甄嬛傳》老梗二創的折舊帳裡拆過的邏輯，內容資產的價值取決於再利用的邊際成本，這裡的邊際成本被壓到了編輯器裡改幾行代碼的程度。

受惠的第二層是 AI 輔助開發工具鏈本身。這個案例提供了一個可驗證的樣本：一名開發者加 AI 規劃，產出了過去需要小型團隊的交付物。此類案例在技術社羣的累積，會繼續拉高 AI 編碼工具的付費意願，相關工具廠商的獲客成本隨之下降。

承壓的一層是輕量級 3D 外包製作市場。發布會動畫、產品展示頁這類需求中，不涉及複雜光照與物理擬真的部分，CSS 3D 加 GSAP 的組合已經夠用。three.js 與 WebGL 不會被替代，複雜場景仍是它的地盤，但需求金字塔的底部，也就是預算有限、時程緊迫、設備相容性要求高的那一層，正在被更低成本的技術棧蠶食。這是典型的技術替代曲線由低端往上切的走法。

另一個承壓點較隱性：瀏覽器性能的浪費空間變小了。當每幀只更新 CSS 變數成為可示範的最佳實踐，使用者對網頁動畫流暢度的預期基準會上移，那些靠重渲染撐起來的粗糙實作，在比較之下會更快被市場淘汰。

收束判斷

把這個作品的帳本合起來看：一名開發者、數個晚上的調試、零 3D 資產、零額外算力負擔，產出了一段可互動、可停幀、可在手機上直接拖動的產品展示。對照發布會影片的製作預算與 WebGL 開發的工時慣例，這條成本曲線的斜率已經說明了問題。

真正值得記錄的轉折有兩處。其一，技術選型的門檻下移，CSS 3D 這類「夠用就好」的方案，在需求分層的底部拿到了定價權。其二，AI 把方案規劃的成本壓掉之後，人的價值集中在空間直覺與感知校準，這些環節目前仍無法模板化，也決定了同類作品的品質分層會越來越陡。

至於蘋果的實體摺疊機本身賣得如何，那是另一本帳。這本帳屬於內容生產這一行：當一段發布會級別的動畫可以被一個人在瀏覽器裡重做出來，被重新定價的不只是那段動畫，還有背後整條輕量級視覺製作的供給結構。