Marquee
Data Display
Layout
Animated scrolling content with gradient masks and pause-on-hover functionality.
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 Badges
Pass your own array of metrics with colors
React
TypeScript
Next.js
Tailwind CSS
Node.js
PostgreSQL
Redis
GraphQL
React
TypeScript
Next.js
Tailwind CSS
Node.js
PostgreSQL
Redis
GraphQL
Color Options
All available color variants
Indigo
Teal
Violet
Amber
Rose
Emerald
Blue
Cyan
Purple
Orange
Indigo
Teal
Violet
Amber
Rose
Emerald
Blue
Cyan
Purple
Orange
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'
// Default metrics (AI/ML evaluation metrics)
<MetricsBadgeMarquee />
// Custom metrics
<MetricsBadgeMarquee
metrics={[
{ label: 'React', color: 'blue' },
{ label: 'TypeScript', color: 'indigo' },
{ label: 'Next.js', color: 'violet' },
{ label: 'Tailwind CSS', color: 'teal' },
]}
/>
// Available colors
// 'indigo', 'teal', 'violet', 'amber', 'rose',
// 'emerald', 'blue', 'cyan', 'purple', 'orange'Types
TypeScript interface definition
interface Metric {
label: string
color: 'indigo' | 'teal' | 'violet' | 'amber' | 'rose' |
'emerald' | 'blue' | 'cyan' | 'purple' | 'orange'
}Features
Built-in functionality
- Seamless loop: Content is duplicated for continuous scrolling
- Gradient masks: Fade effects on left and right edges
- Pause on hover: Animation stops when user hovers over content
- 10 color options: Pre-defined color schemes for badges
- Smooth animation: 30-second linear infinite scroll
- ForwardRef support: Supports ref forwarding for advanced use cases
- 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