Metrics Badge Marquee
Data Display
Layout
Infinite scrolling badge ticker for showcasing metrics, tags, or features.
Preview
Hover to pause the animation
BERTScore
String Equality
SacreBLEU
METEOR
ROUGE Score
F1 Score
Precision
Recall
Perplexity
BLEU Score
BERTScore
String Equality
SacreBLEU
METEOR
ROUGE Score
F1 Score
Precision
Recall
Perplexity
BLEU Score
Custom Metrics
Pass your own metrics array with different colors
React
TypeScript
Tailwind CSS
Next.js
Radix UI
Lucide Icons
React
TypeScript
Tailwind CSS
Next.js
Radix UI
Lucide Icons
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
metrics | Metric[] | Default AI/ML metrics | Array of metrics to display |
Usage
Import and implementation examples
import { MetricsBadgeMarquee } from '@/components/ui/marquee/MetricsBadgeMarquee'
// Default metrics
<MetricsBadgeMarquee />
// Custom metrics
<MetricsBadgeMarquee
metrics={[
{ label: 'BERTScore', color: 'indigo' },
{ label: 'F1 Score', color: 'emerald' },
{ label: 'Precision', color: 'blue' },
]}
/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Infinite scroll: Seamless looping animation
- Color badges: 10 color variants available
- Pause on hover: Stop animation for reading
- Smooth animation: 30s loop duration
- Gradient fade masks: Smooth edge transitions
- Auto-duplicate: Content duplicated for seamless loop
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="marquee" for scrolling contentaria-hidden for duplicate contentKeyboard Navigation
| Key | Action |
|---|---|
| Hover | Pause animation |
Notes
- Pause on hover allows reading content
- Consider static alternative for screen readers
- Reduced motion preferences should be respected