文字動畫
Velocity Marquee
隨滾動速度變速、快速回滾時短暫反向的無限循環跑馬燈。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add velocity-marqueePlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
編輯中的呼叫預設屬性
<VelocityMarquee/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/velocity-marquee.json使用
children 可以是任何內容。記得在尾端保留間距（如 pr-8 或結尾分隔符），循環才會無縫：
import { VelocityMarquee } from "@/components/ui/velocity-marquee";
<VelocityMarquee baseVelocity={5}>
<span className="pr-8 text-5xl font-bold">
WebberUI — Animate everything ·
</span>
</VelocityMarquee>也可以放 logo 列，搭配負的 baseVelocity 反向滾動：
<VelocityMarquee baseVelocity={-3}>
<div className="flex items-center gap-12 pr-12">
<LogoA className="h-8" />
<LogoB className="h-8" />
<LogoC className="h-8" />
</div>
</VelocityMarquee>放在巢狀捲動容器內
預設追蹤的是視窗的捲動。若元件放在固定高度的 overflow-y-auto 容器內，請把該容器的 ref 傳給 container。跑馬燈的加速倍率取自該容器的捲動速度，而不是視窗。
const scrollerRef = React.useRef<HTMLDivElement>(null);
<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
<VelocityMarquee container={scrollerRef}>{/* 內容 */}</VelocityMarquee>
</div>以整個視窗為捲動容器時可省略 container，行為與原本相同。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | ReactNode | — | 跑馬燈內容，內部會複製四份達成無縫循環 |
baseVelocity | number | 5 | 基礎速度（每秒移動內容寬度的百分比），負值＝反向 |
direction | "left" | "right" | "left" | 行進方向，"right" 等同於將 baseVelocity 取負 |
container | RefObject<HTMLElement> | — | 巢狀捲動容器的 ref；滾動速度也取自該容器，省略則以視窗為捲動容器 |
className | string | — | 套用到外層容器 |
細節
- 滾動變速：
useScroll().scrollY→useVelocity取得滾動速度（px/s）→useSpring平滑 → 映射為速度倍率，再由useAnimationFrame逐幀累加位移。頁面滾得越快，跑馬燈跑得越快；停止滾動後由 spring 緩緩回到基礎速度 - 快速往回滾動時速度倍率為負，跑馬燈會短暫倒轉行進方向，隨即恢復
- 位移以自製
wrap函式循環於-25% ~ 0%之間，內容渲染四份，視覺上永遠無縫；單份內容寬度建議至少為容器的三分之一，避免露出空白 - 動畫只跑在
transform上，不觸發 layout；第 2～4 份內容標記aria-hidden，螢幕閱讀器只會讀到一份 - 使用者系統開啟「減少動態效果」時，退化為靜態單份內容、不滾動