Tracing Beam

沿 SVG 路徑隨捲動前進的光束，適合長文、時間軸與逐步導覽。

一條沿左側軌道垂直延伸的漸層光束，端點跟著捲動進度前進，並用 spring 平滑；快速捲動時尾端會被速度拉出彗星般的拖影。把內容當 children 傳入即可，元件會自動量測高度決定路徑長度。

載入預覽⋯

Playground

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

軌道間距 (px)gutter

彈簧剛性（越大越跟手）stiffness

500

彈簧阻尼（越大越穩定）damping

<TracingBeam />

npx shadcn@latest add https://webberui.com/r/tracing-beam.json

或在 components.json 設定 registries 後，改用 @webberui/tracing-beam 安裝。

安裝依賴後，從 registry JSON（/r/tracing-beam.json 的 files[0].content）複製 tracing-beam.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

import { TracingBeam } from "@/components/ui/tracing-beam";

<TracingBeam>
  <article className="prose">{/* 你的長文內容 */}</article>
</TracingBeam>;

光束會依 children 的實際高度延伸。內容用會捲動的祖先容器包起來，捲動時光束就會前進。