Metrics Badge Marquee

Ready

Infinite scrolling badge ticker for showcasing metrics, tags, or features

Default Metrics

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

Features

Infinite scroll
Color badges (10 color variants)
Hover to pause animation
Smooth 30s loop animation
Gradient fade masks on edges
Auto-duplicate for seamless loop

Usage

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' },
  ]}
/>