WebberUI
English

水平滾動作品展示

垂直滾動驅動左右橫移瀏覽作品的畫廊

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

安裝

npx webberui@latest add "https://webberui.com/r/horizontal-scroll-showcase.json?t=<安裝 token>"

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

包含的區段

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

  1. 1

    導覽與開場英雄區

    極簡導覽列搭配巨型 2026 背景大字與視差標題，帶出橫向敘事作品精選輯的開場。

    hero
  2. 2

    工作室數據帶

    以四欄大字呈現上線專案、國際獎項、合作年份與核心成員的關鍵數據。

    stats
  3. 3

    橫向捲動引導說明

    進入水平區之前的引導文案，說明捲動如何被映射成作品列的水平位移。

    content
  4. 4

    水平滾動作品精選輯

    釘固畫面的核心區段，垂直捲動驅動六件作品大卡水平橫移並同步進度指示。

    gallery
  5. 5

    合作洽談結語

    以光暈背景與雙按鈕引導預約合作洽談或下載完整作品集 PDF。

    cta
  6. 6

    工作室頁尾

    品牌簡介、聯絡圖示與服務、工作室、資源三組連結欄位的頁尾區。

    footer

一套 React 水平捲動作品集模板：往下捲動時，作品列會向左橫移。以 Next.js App Router、Tailwind CSS 與 Motion 製作，捲動進度由 `useScroll` 追蹤、`useTransform` 轉成橫向位移。

適用情境

  • 設計工作室或動態設計團隊的作品精選頁
  • 個人創作者的年度作品集
  • 品牌案例或專案回顧的單頁展示
  • 想用橫向瀏覽取代傳統格狀列表的作品頁

拿到後要改哪裡

  1. 把 page.tsx 上方的 `WORKS` 陣列換成你的作品：標題、客戶、年份、類別與獎項；卡片的漸層色由 `from`、`via`、`to` 三個欄位決定。
  2. 作品卡目前用 `WorkGlyph` 畫幾何圖形，沒有圖片；要放作品截圖，就在 `WorkCard` 裡換成你的圖片。
  3. 增減作品數量後，調整 `HorizontalGallery` 裡 `useTransform` 的位移終點（目前是 `-84vw`），讓最後一張剛好停在畫面內。
  4. 整頁配色集中在檔案開頭的 `INK`、`INK_SOFT`、`HAZE`、`CREAM` 常數，改這幾個值就能換色調。
  5. 改 `Hero` 的大標與 `Outro` 的合作洽談文字，並把頁尾與導覽裡的 `#` 連結換成你的聯絡方式與社群網址。

你拿到的是原始碼

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

瀏覽其他 103 套模板 →