Results Meter Card — Animated arc meter with metric switching

What is Results Meter Card?

Results Meter Card is a premium segmented arc gauge designed for dashboards, landing pages, and data-driven sections. Display key performance metrics inside a polished card with animated arc segments, count-up numbers, trend badges, and contextual insight strips. Switch between multiple metrics on the fly with built-in pill toggles — ideal for showcasing progress, targets, scores, and financial summaries.

Core Features

• Segmented arc meter with configurable segment count (12–36) and thickness, plus hue-aware gradient fill for a smooth tonal progression across filled segments

• Up to six switchable metrics with pill toggle navigation, each with its own value, prefix/suffix, comparison label, trend badge, and insight text

• Five designer-curated theme presets — Glass, Dark Premium, Midnight, Warm Ivory, and Ocean — plus a full Custom mode with nine independent colour controls

• Count-up number animation with eased cubic timing, staggered segment entry, ambient glow effects, and a leading-segment pulse

• Trend badges with automatic positive/negative colour coding, and a contextual insight strip with four icon styles

• Fully responsive layout that adapts arc radius and typography to any container width

Controls inside Framer

Content

• Title

• Subtitle

• Metrics array (label, value, prefix, suffix, comparison, insight, trend) — up to 6 entries

Arc Settings

• Segments (12–36)

• Thickness (6–16 px)

• Gradient Fill toggle

• Min Value

• Max Value

Theme

• Theme preset selector (Glass, Dark Premium, Midnight, Warm Ivory, Ocean, Custom)

Custom Colours (visible when Theme is set to Custom)

• Card Background

• Filled Segments

• Unfilled Segments

• Title

• Value

• Comparison

• Insight Text

• Toggle Active

• Toggle Inactive

Animation

• Enable Animation toggle

• Count Up toggle

• Stagger Fill toggle

• Speed (Fast, Medium, Slow)

Visibility

• Metric Toggles (show/hide)

• Trend Badge (show/hide)

• Hover Highlight (on/off)

• Insight Strip (show/hide)

• Insight Icon (show/hide)

• Icon Style (Arrow Up, Checkmark, Star, Chart)

Typography

• Font family

Layout

• Border Radius (0–40 px)

Best use cases

• SaaS and fintech dashboards — present revenue, conversion rates, or user growth with animated progress arcs

• Agency and portfolio landing pages — highlight project completion, client satisfaction scores, or performance benchmarks

• Health, fitness, and wellness apps — visualise goals, streaks, or wellness scores with clear, engaging meters

• Investor decks and pitch pages — communicate KPIs with polished, presentation-ready data cards

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.