網頁簡報引擎

把簡報直接做成網頁的一頁。投影片以設計稿尺寸（預設 1280×720）排版，再依容器寬高用 transform: scale() 等比縮放，字級與間距不會因螢幕大小變形。支援鍵盤 ← → Space Home End 與觸控左右滑動翻頁、F 全螢幕、N 講者備註、? 快捷鍵說明；換頁有 slide／fade／zoom／none 四種轉場，底部進度條與逐位滾動的頁碼即時更新。開啟 syncHash 後頁碼寫進網址（#3 為第 3 頁），列印或「另存 PDF」時每頁剛好一張投影片。另附 TitleSlide、StatsSlide、CodeSlide 等九種版面子元件，丟進去就是一份完整簡報。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SlideDeckShell/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/slide-deck-shell.json

使用

import {
  SlideDeckShell,
  TitleSlide,
  ListSlide,
  StatsSlide,
  ClosingSlide,
} from "@/components/ui/slide-deck-shell";

<SlideDeckShell label="Q3 產品回顧" transition="slide" syncHash>
  <TitleSlide
    eyebrow="2026 Q3"
    title="Q3 產品回顧"
    subtitle="三個月、兩次大改版"
    notes="開場先自我介紹"
  />
  <ListSlide
    title="三項主要成果"
    ordered
    items={["編輯器重寫", "團隊素材庫", "行動版審稿"]}
  />
  <StatsSlide
    title="關鍵數字"
    items={[
      { value: 12480, label: "月活躍使用者" },
      { value: 64, suffix: "%", label: "30 日留存率" },
    ]}
  />
  <ClosingSlide title="謝謝大家" contact="hello@example.com" />
</SlideDeckShell>

// 也可以用資料驅動（slides 優先於 children）
<SlideDeckShell
  slides={[
    { id: "cover", content: <TitleSlide title="封面" />, notes: "備註" },
    { id: "end", content: <ClosingSlide title="結束" /> },
  ]}
/>

Props

SlideDeckShell

DeckSlideData

SlideDeckShellLabels

版面子元件

所有版面元件都接受 notes（講者備註）、background（任何 CSS background 值）與 className。

DeckStat

細節

• 縮放：以 ResizeObserver 量測容器，縮放比取「容器寬 ÷ baseWidth」與「容器高 ÷ 設計稿高」的較小者，全螢幕時自動上下或左右留邊。投影片裡可以直接用 px 與一般 Tailwind 字級排版。
• 轉場：AnimatePresence mode="wait"，退場與進場依序播放，整次換頁的總時長是 --wb-deck-duration（預設 400ms），曲線是 --wb-deck-ease（預設 cubic-bezier(0.22,1,0.36,1)）。兩個變數在換頁前從 CSS 讀取，可在任何祖先元素覆寫。強調色用 --wb-deck-accent，預設跟隨文字色。
• 鍵盤：預設 keyboard="focus"，只有點過簡報（或 Tab 聚焦）後才接收方向鍵與 Space，不會搶走頁面捲動；全螢幕時改為監聽整個視窗。輸入框裡的按鍵一律放行。
• 觸控：水平滑動超過 50px，或速度超過 0.3px/ms 即翻頁；垂直滑動交給頁面捲動（touch-action: pan-y）。
• 全螢幕：F 鍵或按鈕呼叫 Fullscreen API，瀏覽器不支援時隱藏按鈕。Esc 先關閉快捷鍵說明；全螢幕下的 Esc 由瀏覽器處理退出。
• 講者備註：顯示在簡報下方，全螢幕時改為右側欄。children 模式從每個子元件的 notes prop 收集。
• 列印：@media print 下隱藏控制列、停用縮放與轉場，所有投影片依序輸出，紙張尺寸設為投影片尺寸，「另存 PDF」時每頁剛好一張。這段 @page 規則在元件掛載期間對整個頁面生效，建議簡報放在獨立路由。
• 不做 PPTX 匯出：本元件是純前端元件，需要 PPTX 請先用瀏覽器列印成 PDF，或另行轉檔。
• CodeSlide 只做等寬字、行號與複製鈕，不做語法高亮；需要高亮可以把內容換成 WebberUI 的 code-block。

可及性

• 根元素為 role="region"、aria-roledescription="簡報" 並以 label 命名；每頁為 role="group"、aria-roledescription="投影片"，aria-label 如「第 3 頁，共 8 頁」
• 只渲染目前這一頁，退場中的頁設為 inert 並對輔助科技隱藏
• 翻頁時 aria-live="polite" 區域朗讀「第 N 頁，共 M 頁」；底部進度條為 role="progressbar"
• 所有控制鈕都是 type="button"、帶 aria-label 與 focus-visible 外框；備註按鈕帶 aria-pressed
• 快捷鍵說明為 role="dialog"、aria-modal，開啟時焦點移到關閉鈕並鎖在對話框內，關閉後焦點回到原處
• 使用者系統開啟「減少動態效果」時，所有轉場改為 150ms 純淡入，數字直接顯示終值、條列不做 stagger、頁碼不滾動