WebberUI

滾動擦除首頁

捲動進度擦除英雄「幀序列」（程序生成漸層幀），文字疊層逐段換

Pro互動首頁interactive-home8 個區段
看實機展示查看方案

安裝

npx shadcn@latest add "https://webberui.com/r/scroll-scrub-frames-home.json?t=<安裝 token>"

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

包含的區段

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

  1. 1

    捲動擦除英雄

    導覽列與滿版程序生成幀序列，隨捲動擦除播放並逐段替換文案，下方接客戶跑馬燈。

    hero
  2. 2

    產品功能

    六格卡片說明 GPU 幀級平行、零設定上雲、逐幀協作審片等雲端渲染核心能力。

    features
  3. 3

    工作流程展示

    以視差瀏覽器視窗框呈現渲染佇列、逐幀預覽與時間軸縮圖的實際操作畫面。

    product
  4. 4

    關鍵數據

    四項營運數字以進場滾動計數呈現 GPU 節點、加速倍率、日渲染幀數與可用率。

    stats
  5. 5

    客戶心聲

    三則動態設計團隊的使用回饋，附頭像縮寫與職稱的引言卡片。

    testimonial
  6. 6

    定價方案

    獨立創作者、工作室與企業三種按算力計價方案，中間方案標示最受歡迎。

    pricing
  7. 7

    行動呼籲

    底部光暈聚焦的最終轉換區，主打免綁卡立即開始雲端渲染。

    cta
  8. 8

    頁尾

    品牌簡介、社群連結與產品／資源／公司／法務四欄導覽及版權資訊。

    footer

你拿到的是原始碼

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

瀏覽其他 103 套模板 →