WebberUI

水平滾動作品展示

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

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

安裝

npx shadcn@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

你拿到的是原始碼

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

瀏覽其他 103 套模板 →