Stats Marquee
Data Display
Dashboard
Continuous scrolling statistics with gradient background.
Preview
Hover to pause animation
94%
Tasks Completed
2.4h
Avg Focus Time
12
Active Projects
8
Team Members
+23%
Productivity
156
Goals Met
4.9
Team Rating
30-day
Streak
94%
Tasks Completed
2.4h
Avg Focus Time
12
Active Projects
8
Team Members
+23%
Productivity
156
Goals Met
4.9
Team Rating
30-day
Streak
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stats | Stat[] | Default stats | Array of statistics to display |
duration | number | 30 | Animation duration in seconds |
pauseOnHover | boolean | true | Pause animation on hover |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { StatsMarquee } from '@/components/marquee'
<StatsMarquee
stats={[
{ value: '94%', label: 'Tasks Completed', icon: Shield },
{ value: '2.4h', label: 'Avg Focus Time', icon: Zap },
{ value: '12', label: 'Active Projects', icon: Globe },
{ value: '+23%', label: 'Productivity', icon: TrendingUp },
]}
/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Key metrics with icons: Value and label pairs with icon badges
- Gradient background: Indigo to violet gradient
- Icon badges: Semi-transparent icon containers
- Continuous scroll: Seamless infinite loop
- Pause on hover: Stop animation for reading
- Eye-catching design: Perfect for hero sections
Accessibility
Accessibility considerations
ARIA Attributes
role="marquee" for scrolling contentaria-label for stat itemsKeyboard Navigation
| Key | Action |
|---|---|
| Hover | Pause animation |
Notes
- High contrast white text on gradient
- Pause on hover for reading
- Consider static alternative for accessibility