---
title: "Compare Ring — Free Framer component · Best of Framer"
description: "Free Framer component · by Joshua Roberts · Text. Arcs that fill. Dots that race."
canonical: "https://framer.elliotli.dev/component/compare-ring"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Compare Ring

# Compare Ring

Arcs that fill. Dots that race.

[View on Framer](https://framer.com/marketplace/components/compare-ring/?via=elliot-li)

![Compare Ring preview image 1](https://framer.elliotli.dev/og/component/compare-ring/448d43783c0b9051/1600x1200.jpg)

## Summary

Arcs that fill. Dots that race.

## Description

## **Comparison Ring ⭕**

Ditch the static stat block. This component turns any comparison into a living ring — arcs that fill to show scale, or dots that lap the track to show speed. Built for the moment a number needs to feel like proof, not just text.

### **Best use cases:**

Competitive comparisons, wait-time or turnaround stats, pricing and feature scorecards, KPI dashboards, and any "us vs. them" moment where the difference deserves a motion graphic instead of a table.

### **How to Use:**

1.  **Drag and drop the component onto your canvas.**
    
2.  **Add your comparisons to the array** — label, value, prefix/suffix, and color for each.
    
3.  **Choose a mode:** Compare (arcs fill to each value) or Race (dots lap the ring at independent speeds).
    
4.  **Customize the ring geometry** (Size, Start angle, Gauge span) and motion (Transition, Stagger, Emphasis) to match your layout.
    

### **Highlights:**

-   **Two modes in one component:** arc-fill Compare and lap-based Race
    
-   **Any values, any units** — free-text prefix/suffix, no shared scale required
    
-   **Native Framer Motion transitions**, including springs and custom easing curves
    
-   **Full gauge support** — partial-span rings, not just full circles
    
-   **Per-item control over direction**, animate-from-full, and independent lap speed
    
-   **Synchronized Race heats** — every dot restarts together after the last one finishes
    
-   **Pulse, glow, and breathe emphasis effects** with adjustable intensity and speed
    
-   **Continuous loops run on pure CSS** — zero ongoing JS cost after mount
    
-   **Independent typography** for labels, the center value, and the subtext
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6111

## Details

- **Author**: Joshua Roberts
- **Published**: 2026-07-15
- **Updated**: 2026-07-18
- **Added**: 2026-07-15
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing