stats comparison bar-chart competitors benchmark performance css-chart metrics comparison bar-chart competitors benchmark performance css-chart metrics versus competitor comparison bar chart section CSS-only benchmark chart with headline number product vs competition stats section
Stats Display Trend Comparison
Fetch pattern JSON:
curl https://webspire.de/patterns/stats-display/trend-comparison.json trend-comparison.html
<section class="ws-stats-display bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-accent)]">Performance</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">10× smaller than the competition</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-color-text-soft)]">Bundle size in KB (minified + gzipped). Smaller is better.</p>
</div>
<!-- Big headline number -->
<div class="mt-12 flex flex-col items-center gap-1">
<span class="text-7xl font-black tracking-tight text-[var(--ws-color-text)] sm:text-8xl">2.5<span class="text-4xl font-bold text-[var(--ws-color-text-soft)] sm:text-5xl">KB</span></span>
<span class="text-sm text-[var(--ws-color-text-soft)]">Motion One · minified + gzipped</span>
</div>
<!-- Bar chart -->
<div class="mt-14 mx-auto max-w-2xl space-y-4">
<!-- Row: Motion One (highlight) -->
<div class="flex items-center gap-4">
<span class="w-28 shrink-0 text-right text-sm font-semibold text-[var(--ws-color-text)]">Motion One</span>
<div class="relative flex-1 overflow-hidden rounded-full bg-[var(--ws-color-bg-secondary)] h-8">
<div class="absolute inset-y-0 left-0 flex items-center rounded-full bg-[var(--ws-color-accent)]" style="width: 10%">
<span class="ml-auto pr-2 text-xs font-bold text-white">2.5</span>
</div>
</div>
</div>
<!-- Row: Competitor A -->
<div class="flex items-center gap-4">
<span class="w-28 shrink-0 text-right text-sm text-[var(--ws-color-text-soft)]">GSAP</span>
<div class="relative flex-1 overflow-hidden rounded-full bg-[var(--ws-color-bg-secondary)] h-8">
<div class="absolute inset-y-0 left-0 flex items-center rounded-full bg-[var(--ws-color-border)]" style="width: 46%">
<span class="ml-auto pr-2 text-xs font-medium text-[var(--ws-color-text-soft)]">11.5</span>
</div>
</div>
</div>
<!-- Row: Competitor B -->
<div class="flex items-center gap-4">
<span class="w-28 shrink-0 text-right text-sm text-[var(--ws-color-text-soft)]">Framer Motion</span>
<div class="relative flex-1 overflow-hidden rounded-full bg-[var(--ws-color-bg-secondary)] h-8">
<div class="absolute inset-y-0 left-0 flex items-center rounded-full bg-[var(--ws-color-border)]" style="width: 100%">
<span class="ml-auto pr-2 text-xs font-medium text-[var(--ws-color-text-soft)]">24.8</span>
</div>
</div>
</div>
<!-- Row: Competitor C -->
<div class="flex items-center gap-4">
<span class="w-28 shrink-0 text-right text-sm text-[var(--ws-color-text-soft)]">Anime.js</span>
<div class="relative flex-1 overflow-hidden rounded-full bg-[var(--ws-color-bg-secondary)] h-8">
<div class="absolute inset-y-0 left-0 flex items-center rounded-full bg-[var(--ws-color-border)]" style="width: 60%">
<span class="ml-auto pr-2 text-xs font-medium text-[var(--ws-color-text-soft)]">14.9</span>
</div>
</div>
</div>
</div>
<!-- Footer note -->
<p class="mt-8 text-center text-xs text-[var(--ws-color-text-soft)]">Numbers are approximate. Measured at bundlephobia.com — March 2025.</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statscomparisonbar-chartcompetitorsbenchmarkperformancecss-chartmetrics
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker, bold claim headline, and subtitle. |
| hero-stat | Yes | Single dominant number (e.g. "2.5 KB") with label. |
| bars | Yes | 4 horizontal bars — 1 highlighted (your product) + 3 competitor bars with inline value labels. |
| footnote | No | Source note with measurement date. |
Horizontal bar chart built with pure CSS (no chart library). One dominant headline metric at the top, followed by 4 labeled rows: the highlighted product in accent color, 3 competitors in muted tones. Bar widths are inline style percentages — the longest bar is 100%. Different from stats-display/colored-blocks (3 isolated metrics) — this variant tells a competitive story where size/cost/speed comparisons matter.