WebberUI
English

瀑布藝廊首頁

不等高瀑布流圖卡藝廊，篩選 pills

Pro首頁排版home-layout5 個區段
看實機展示查看方案

安裝

npx webberui@latest add "https://webberui.com/r/masonry-gallery-home.json?t=<安裝 token>"

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

包含的區段

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

  1. 1

    導覽列與英雄區

    含品牌導覽列、漸層標題、搜尋列與作品數據的藝廊開場區。

    hero
  2. 2

    作品瀑布流

    可依分類與關鍵字篩選的不等高瀑布流作品牆，支援收藏與載入更多。

    gallery
  3. 3

    駐站創作者

    每週精選三位駐站創作者，展示作品數、追蹤者與追蹤按鈕。

    team
  4. 4

    加入創作行動呼籲

    深色漸層光暈卡片，邀請創作者免費開設藝廊或先逛作品。

    cta
  5. 5

    頁尾

    品牌介紹、社群連結、四欄網站導覽與版權地址資訊。

    footer

一套 React 瀑布流藝廊首頁模板：不等高的作品卡片排成瀑布流，上方有分類篩選與搜尋。以 Next.js App Router、Tailwind CSS 與 Motion 製作，篩選、搜尋與按讚都在前端完成。

適用情境

  • 攝影、插畫或 3D 作品的社群藝廊首頁
  • 創作者平台或策展網站的作品探索頁
  • 設計團隊的靈感收藏頁
  • 需要依類別瀏覽大量圖卡的作品集

拿到後要改哪裡

  1. 把 page.tsx 裡的 `WORKS` 陣列換成你的作品；每筆的 `aspect` 決定卡片高度比例，`category` 決定它出現在哪個篩選分類。
  2. 卡片目前以 `gradient` 漸層與 emoji 代替圖片，要放真實作品圖就在 `GalleryCard` 裡改成你的圖片。
  3. 分類在 `CATEGORIES` 與 `CATEGORY_LABEL` 定義，增減分類時兩處與 `CategoryId` 型別要一起改。
  4. 「駐站創作者」區塊讀的是 `CURATORS` 陣列，換成你的創作者資料。
  5. 搜尋只比對標題與作者名稱，按讚狀態也只存在元件 state 裡；要保存或搜尋更多欄位，請接上你自己的 API 或 CMS。

你拿到的是原始碼

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

瀏覽其他 103 套模板 →