資料展示
Tracing Beam
沿 SVG 路徑隨捲動前進的光束，適合長文、時間軸與逐步導覽。
一條沿左側軌道垂直延伸的漸層光束，端點跟著捲動進度前進，並用 spring 平滑；快速捲動時尾端會被速度拉出彗星般的拖影。把內容當 children 傳入即可，元件會自動量測高度決定路徑長度。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add tracing-beamPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
40
500
90
編輯中的呼叫預設屬性
<TracingBeam/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/tracing-beam.json或在 components.json 設定 registries 後，改用 @webberui/tracing-beam 安裝。
使用
import { TracingBeam } from "@/components/ui/tracing-beam";
<TracingBeam>
<article className="prose">{/* 你的長文內容 */}</article>
</TracingBeam>;光束會依 children 的實際高度延伸。內容用會捲動的祖先容器包起來，捲動時光束就會前進。
放在巢狀捲動容器內
預設追蹤的是視窗的捲動。若元件放在固定高度的 overflow-y-auto 容器內，請把該容器的 ref 傳給 container。光束的推進與速度拖影都取自該容器的捲動。
const scrollerRef = React.useRef<HTMLDivElement>(null);
<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
<TracingBeam container={scrollerRef}>{/* 內容 */}</TracingBeam>
</div>以整個視窗為捲動容器時可省略 container，行為與原本相同。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 沿光束呈現的內容，高度由此量測 |
colors | [string, string, string] | ["#18CCFC", "#6344F5", "#AE48FF"] | 光束漸層三色（由上而下） |
gutter | number | 40 | 內容與左側軌道的水平間距（px） |
stiffness | number | 500 | 追蹤捲動的 spring 剛性，越大越跟手 |
damping | number | 90 | 追蹤捲動的 spring 阻尼，越大越穩定 |
container | RefObject<HTMLElement> | — | 巢狀捲動容器的 ref；省略則以視窗為捲動容器 |
className | string | — | 透傳到最外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，光束靜態呈現完整漸層，不做脈動與捲動動畫
- 光束軌道為純裝飾，標記
aria-hidden，不干擾螢幕閱讀器朗讀內容 - 首次渲染與 SSR 一致，掛載後才量測高度並啟用捲動追蹤，避免 hydration 落差