WebberUI
English

動態字體主視覺頁

超大可變字體 Hero，字母隨滾動與游標伸縮重組

Pro沉浸kinetic8 個區段
看實機展示查看方案

安裝

npx webberui@latest add "https://webberui.com/r/kinetic-type-hero-page.json?t=<安裝 token>"

整頁原始碼會落在 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

一套 React 動態字體主視覺模板：超大字母會隨游標位置上移、拉長，往下捲動還有釘固大字、逐字浮現的宣言、字母跟著游標偏移的標語與跑馬燈。以 Next.js App Router、Tailwind CSS 與 Motion 製作。

適用情境

  • 設計工作室或動態設計團隊的官網
  • 字體、排印或品牌識別作品的展示頁
  • 音樂節、展覽等活動的主視覺頁
  • 以文字為主角的個人作品集

拿到後要改哪裡

  1. 主視覺大字是 page.tsx 的 `HERO_WORD`（預設 `MOTION`）；每個字母的字級固定，換成較長的字時要確認不會超出畫面寬度。
  2. 宣言、跑馬燈與釘固大字的文字分別在 `MANIFESTO_WORDS`、`MARQUEE_TOKENS`、`SECTION_WORDS`，游標標語的文字寫在 `MagneticStatement` 裡的 `line`。
  3. 服務項目、數據與精選作品在 `CAPS`、`METRICS`、`WORKS` 陣列；作品卡目前是色塊，可放上你的作品圖。
  4. 配色集中在檔案開頭的 `INK`、`PAPER`、`ACID`、`FLARE`、`AZURE`、`MUTE` 常數。
  5. 字母的伸縮是用 `scaleY` 與位移做的，不依賴可變字體，換成其他字體也能運作。

你拿到的是原始碼

不是 npm 套件、不是 zip 檔。安裝之後整頁的 TypeScript 原始碼就在你的 repo 裡，可以任意修改、無執行期相依、沒有到期失效機制——我們的網站故障不會影響你已上線的網站。

瀏覽其他 103 套模板 →