InfiniteMarquee

All features demonstrated below

01 — Default

Left scroll · Pause on hover

Hover over the marquee to pause it.

🚀 Next.js
⚡ Vite
🎨 Tailwind CSS
🔷 TypeScript
🌐 React
🛠 Node.js
🐙 GitHub
02 — Right Direction

Right scroll · Reverse on hover

Hover to flip the scroll direction.

✦ Design Systems
✦ UI Components
✦ Accessibility
✦ Motion Design
✦ Dark Mode
✦ Figma Tokens
03 — Vertical

Upward scroll · Vertical marquee

Direction set to up. Hover to pause.

🏆Best Developer Tool 2024
⭐5-star on Product Hunt
🚀Zero dependencies
♿Fully accessible
🎯Drag to scroll support
04 — Fade Edges

Fade mask on both edges

fade="true" · fade-size="100"

🌟
Feature
🔥
Popular
💎
Premium
⚡
Fast
❤️
Loved
🎵
Smooth
05 — Speed & Drag

Slow vs Fast · Drag disabled on top row

Top: drag="false" speed 20 · Bottom: draggable speed 140

speed: 20 · no drag
speed: 20 · no drag
speed: 20 · no drag
speed: 20 · no drag
speed: 20 · no drag
speed: 140 · draggable ↔
speed: 140 · draggable ↔
speed: 140 · draggable ↔
speed: 140 · draggable ↔
speed: 140 · draggable ↔

All 5 instances auto-initialized via data-marquee