Remotion 3D 垂直跑馬燈
本技能提供了一個可重複使用的架構模式與元件，用於在 Remotion 中建立無限、多欄的 3D 滾動動畫（常用於照片藝廊、3D 照片滾動牆、技術棧展示或工作人員名單）。
運作原理
無限滾動的錯覺是透過領域複製與模數運算，搭配 CSS 3D 變形來達成：
- 無限的數學原理： 我們將內容清單複製一份（
[...items, ...items]）。根據幀率與想要的循環時長，計算一個從 0 到 1 的progress值。然後將欄位從0%平移至-50%（反向則從-50%到0%）。由於內容已複製，在-50%的畫面看起來與0%完全一致，重置時便能形成無縫循環。 - 3D 透視效果： 一個父層容器會套用
perspective: 1000px、rotateX(20deg)與scale(1.2)。scale的關鍵在於確保傾斜的頂部和底部邊緣能延伸超出 2D 螢幕邊界，防止背景空白洩漏。 - 遮罩處理： CSS
linear-gradient疊加層會以絕對定位放置在頂部和底部，並設有較高的zIndex，用以將內容平順地淡化到背景顏色中。
如何使用本技能
當使用者要求建立垂直滾動藝廊或無限跑馬燈時：
- 複製素材： 提供或複製位於
assets/VerticalTicker.tsx的通用元件，並將其放入專案的components/animations資料夾中。 - 設定配置： 引導使用者匯入並在其 Remotion
<Composition />中渲染<VerticalTicker />元件。 - 調整資料： 該元件與資料無關，可接受任何圖片網址或 React 節點陣列作為欄位。您可以為每個欄位指定不同的
durationInSeconds與direction（1 或 -1）來實現視差效果。
提供的素材
assets/VerticalTicker.tsx：一個高度可重複使用、具備強型別定義的 Remotion 元件，實作了 3D 無限滾動模式。