行銷展示區塊
提示框自動演出
行銷頁用的提示框自動演出 React 元件：發光邊框輸入框逐字打出提示、假游標滑入點擊送出、結果卡彈出，循環播放，滑鼠移入暫停。
給產品首頁、功能介紹區塊用的「看它自己跑」展示。你提供一份腳本（每組一段提示文字與一張結果卡內容），元件依序演出：發光邊框的輸入框逐字打出提示、尾端閃爍游標條；打完後假游標從右下角外滑到送出鈕點下去，按鈕縮放回饋並轉成小 spinner；接著結果卡以彈簧動畫從下方彈出，停留一段時間後淡出換下一組。整個元件純展示、不可輸入，只在進入可視範圍時播放，滑鼠移入即暫停。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add prompt-showcasePlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
40
0.6
2600
編輯中的呼叫預設屬性
<PromptShowcase/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/prompt-showcase.json或在 components.json 設定 registries 後，改用 @webberui/prompt-showcase 安裝。
使用
import { PromptShowcase } from "@/components/ui/prompt-showcase";
<PromptShowcase
script={[
{
prompt: "幫我把這週的會議紀錄整理成三點重點",
result: (
<ol className="list-decimal pl-5">
<li>官網改版延到 11 月中上線</li>
<li>客服回覆時間目標縮短為 4 小時</li>
<li>下週三前確認秋季活動預算</li>
</ol>
),
},
{
prompt: "為手作甜點店寫一句秋季新品標語",
result: <p>「栗子落下的季節，甜一口剛剛好。」</p>,
delayMs: 3200,
},
]}
placeholder="問小幫手任何事…"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
script | PromptShowcaseItem[] | — | 演出腳本：依序播放每組提示與結果 |
value | number | — | 受控模式下目前播放的腳本索引；未提供時由元件內部管理（非受控） |
defaultValue | number | 0 | 非受控模式的起始腳本索引 |
onChange | (index: number) => void | — | 換到下一組腳本時回呼，參數為新索引 |
charMs | number | 40 | 每個字元的打字間隔（毫秒） |
delayMs | number | 2600 | 結果卡預設停留時間（毫秒），可被腳本項目的 delayMs 覆寫 |
glow | number | 0.6 | 外發光層的不透明度（0–1） |
loop | boolean | true | 播完最後一組後是否回到第一組重播；false 時停在最後一組結果 |
autoPlay | boolean | true | 是否自動播放；只在進入可視範圍時播放。false 時直接顯示目前這組的完整結果 |
pauseOnHover | boolean | true | 滑鼠移入時是否暫停演出 |
placeholder | string | "輸入任何問題…" | 打字前顯示的灰色佔位文字 |
sendLabel | string | "送出" | 送出鈕的無障礙名稱 |
label | string | "提示示範" | 整個示範區塊（figure）的無障礙名稱 |
className | string | — | 透傳到最外層 figure |
PromptShowcaseItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
prompt | string | — | 要逐字打出的提示文字 |
result | ReactNode | — | 送出後彈出的結果卡內容 |
delayMs | number | — | 結果卡停留時間（毫秒）；未提供時使用元件的 delayMs |
細節
- 一輪時序：輸入框靜止 300ms → 逐字打出（每字
charMs）→ 停 250ms → 假游標以 600ms、cubic-bezier(0.23,1,0.32,1)滑到送出鈕 → 點擊縮放 160ms、送出鈕轉 spinner 400ms → 結果卡 spring 彈出（stiffness 320、damping 26）→ 停留delayMs→ 淡出 200ms 換下一組。 - 逐字打字以
Array.from切字元，中文一字一格、emoji 不會被切成半個。 - 發光邊框用 CSS
@property --wb-ps-angle註冊角度變數，讓conic-gradient的起始角能被 keyframes 旋轉；不支援@property的瀏覽器退化為靜態漸層邊框。 - 可用 CSS 變數覆寫外觀：
--wb-ps-glow-1（預設#60a5fa）、--wb-ps-glow-2（預設#a78bfa）、--wb-ps-glow-period（旋轉一圈，預設3s）、--wb-ps-fade（文字淡出，預設200ms）；元件也會把charMs寫到--wb-ps-char-ms供你的樣式參考。 - 結果區用隱形卡片把所有結果疊在同一格撐出最大高度，循環切換時版面不會跳動。
- 暫停（滑鼠移入或捲出畫面）只停住排程，恢復後從目前這一段繼續，不會從頭打字。
可及性
- 外層是帶
aria-label的figure（不使用role="img"），結果卡內容可被螢幕閱讀器正常讀取 - 打字中的文字對輔助科技隱藏，完整提示以
sr-only文字提供，不會一個字一個字被朗讀 - 結果區為
aria-live="polite"，新的結果卡出現時會被朗讀 - 附件 icon、送出鈕與假游標都是裝飾：
aria-hidden、tabIndex={-1}，不攔截焦點也不可點；滑鼠只用來觸發暫停 - 使用者系統開啟「減少動態效果」時，不打字、不移動游標、不旋轉邊框，直接顯示目前這組完整提示與結果卡，且不循環