WebberUI
English

沉浸式滾動敘事

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

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

安裝

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

一套 React 滾動敘事（scrollytelling）模板：一段連續故事分成五幕，畫面釘在原地，隨捲動切換文字、背景色與一株逐步長大的 SVG 植物。以 Next.js App Router、Tailwind CSS 與 Motion 製作。

適用情境

  • 品牌故事或企業理念頁
  • 產品或計畫的長篇介紹頁
  • 專題報導、年度報告等敘事型內容
  • 以訂閱或報名作結的活動頁

拿到後要改哪裡

  1. 五幕內容在 page.tsx 的 `ACTS` 陣列：標題、英文副標、內文與註記；每一幕的背景色與光暈色依序對應 `BG_STOPS` 與 `GLOW_STOPS`，增減幕數時三者要一起調整。
  2. 植物動畫在 `GrowingPlant`，根、莖、葉、花各自對應一段捲動進度，可依你的故事換成其他 SVG 圖形。
  3. 宣言與數字區分別是 `ManifestoSection` 與 `STATS` 陣列，頁尾連結在 `FOOTER_COLS`。
  4. 訂閱表單（`CtaSection`）只在前端切換為已送出狀態，不會寄出資料；`submit` 要接上你自己的電子報服務或 API。

你拿到的是原始碼

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

瀏覽其他 103 套模板 →