Canvas 主視覺頁

安裝

整頁原始碼會落在 app/templates/webgl-canvas-hero-page/。也可以改用長效授權金鑰：在 components.json 的 registries 設定 Authorization: Bearer <key>，適合 CI 或多人共用的專案。使用範圍見授權條款。

包含的區段

同一套模板內的區段共用設計 token，所以抽換、重排之後配色、間距與動畫節奏仍然一致。可在區段組裝器裡挑選組合。

1. 1

   粒子主視覺與導覽列

   膠囊導覽列疊在互動式 Canvas 粒子場上，隨游標排斥、隨捲動淡出的霓虹主視覺。

   hero
2. 2

   合作品牌帶

   以淡入字標列出六家使用中的品牌，作為輕量的社會證明信任帶。

   misc
3. 3

   核心能力卡片

   六張霓虹光暈卡片依序進場，說明引擎的運算、流體、合成與輸出能力。

   features
4. 4

   三步驟運作流程

   釘固式捲動敘事，左側三步驟隨進度亮起，右側模擬視窗同步切換節點視覺。

   timeline
5. 5

   關鍵數據帶

   四項成效數字在進入視窗時滾動計數，收在一張漸層描邊的卡片內。

   stats
6. 6

   精選作品畫廊

   三張直式漸層作品卡，含網格覆膜與懸停光暈，展示實際上線案例。

   gallery
7. 7

   最終行動呼籲

   置中的霓虹光暈大卡，主打免費開始編織與預約產品導覽兩個入口。

   cta
8. 8

   頁尾導覽

   品牌簡介、三欄連結與版權列，收束整頁的深色電影感。

   footer