動態字體主視覺頁

安裝

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

包含的區段

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

1. 1

   導覽與動態主視覺

   導覽列疊加超大可變字體 MOTION，字距、傾斜與字母高度隨游標與捲動即時變形，下接電光黃綠跑馬燈。

   hero
2. 2

   釘固大字排印

   以三倍視窗高度釘固畫面，讓「設計／在／動」三個巨字依捲動進度依序縮放、變字距與模糊登場。

   misc
3. 3

   理念宣言

   米白底逐字捲入的工作室宣言，接續磁性大字 TYPE THAT MOVES 與反向橘紅跑馬燈。

   content
4. 4

   我們做什麼

   動態識別、字體動畫、編排系統三張大字卡，滑過時浮現對應色暈並展開說明。

   features
5. 5

   數據成績

   電光黃綠底的四組超大數字，呈現交付量、合作品牌、獲獎數與字距的無限可能。

   stats
6. 6

   精選作品

   四件代表作以不對稱大色塊網格排列，滑過時背景 Aa 字紋位移傾斜。

   gallery
7. 7

   委託專案行動呼籲

   巨型 START A MOTION 標語搭配跟隨游標的錐形漸層光暈與聯絡信箱按鈕。

   cta
8. 8

   頁尾

   工作室簡介、導覽與社群欄位，底部襯以超大低透明度 KINETIK 字樣與版權資訊。

   footer