Velocity Marquee
隨滾動速度變速、快速回滾時短暫反向的無限循環跑馬燈。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
<VelocityMarquee />
安裝
npx shadcn@latest add https://webberui.com/r/velocity-marquee.json安裝依賴後，複製 velocity-marquee.tsx 到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | ReactNode | — | 跑馬燈內容，內部會複製四份達成無縫循環 |
baseVelocity | number | 5 | 基礎速度（每秒移動內容寬度的百分比），負值＝反向 |
direction | "left" | "right" | "left" | 行進方向，"right" 等同於將 baseVelocity 取負 |
className | string | — | 套用到外層容器 |
細節
- 滾動變速：
useScroll().scrollY→useVelocity取得滾動速度（px/s）→useSpring平滑 → 映射為速度倍率，再由useAnimationFrame逐幀累加位移。頁面滾得越快，跑馬燈跑得越快；停止滾動後由 spring 緩緩回到基礎速度 - 快速往回滾動時速度倍率為負，跑馬燈會短暫倒轉行進方向，隨即恢復
- 位移以自製
wrap函式循環於-25% ~ 0%之間，內容渲染四份，視覺上永遠無縫；單份內容寬度建議至少為容器的三分之一，避免露出空白 - 動畫只跑在
transform上，不觸發 layout；第 2～4 份內容標記aria-hidden，螢幕閱讀器只會讀到一份 - 使用者系統開啟「減少動態效果」時，退化為靜態單份內容、不滾動