WebberUI

沉浸式滾動敘事

長篇 scrollytelling：單一連續敘事逐段展開、滾動綁定動畫

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

安裝

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

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

包含的區段

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

  1. 1

    序幕主視覺

    極簡導覽列搭配孢子粒子背景與「一顆種子的旅程」巨型漸層標題序幕。

    hero
  2. 2

    五幕釘固敘事

    隨捲動釘固的五幕故事，中央植物 SVG 從種子生長到綻放並同步變換氛圍色。

    timeline
  3. 3

    品牌宣言

    視差位移與逐字模糊浮現的宣言金句，帶出再生農業的品牌理念。

    content
  4. 4

    根系裡的數字

    四格數字滾動看板，呈現種子、土壤復原率與碳匯週期等關鍵數據。

    stats
  5. 5

    種子計畫訂閱

    漸層玻璃卡片內的電子郵件訂閱表單，送出後切換為成功回饋訊息。

    cta
  6. 6

    頁尾

    品牌簡介、社群連結、三欄網站導覽與回到頂端按鈕的深色頁尾。

    footer

你拿到的是原始碼

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

瀏覽其他 103 套模板 →