Results Meter Card

What is Results Meter Card?

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 .

Animated arc meter with metric switching