---
title: "Counter Stats Card — Free Framer component · Best of Framer"
description: "Free Framer component · by B-Moat · Interactive. The Counter Stats Card enhances the presentation of data by transforming static figures into dynamic, engaging visuals, combining…"
canonical: "https://framer.elliotli.dev/component/counter-stats-card"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Counter Stats Card

# Counter Stats Card

Animated stat cards with subtle glow

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

![Counter Stats Card preview image 1](https://framer.elliotli.dev/og/component/counter-stats-card/2361eeef373f4fd4/1600x1200.jpg)

## Summary

The Counter Stats Card enhances the presentation of data by transforming static figures into dynamic, engaging visuals, combining a sophisticated dark theme with smooth animations…

## Description

Present key metrics through a refined, premium card interface designed to elevate visual impact and clarity. This component features scroll-activated counter animations, subtle glow accents, customizable backgrounds, and elegant corner detailing, making it well-suited for SaaS landing pages, portfolios, and marketing platforms.

The Counter Stats Card enhances the presentation of data by transforming static figures into dynamic, engaging visuals, combining a sophisticated dark theme with smooth animations to create a polished and professional display. Ideal for highlighting conversion rates, user metrics, and performance indicators, it delivers both aesthetic appeal and functional depth.

**Key Features:**

-   🔢 **Animated Counter** — Numbers count up smoothly when the card scrolls into view. Supports percentages, prefixes, suffixes, and even decimals (e.g., "8.5 years")
    
-   ✨ **Premium Visual Effects** — Outer glow, vignette depth, and organic corner accents create a luxurious, multi-dimensional appearance.
    
-   🎨 **Flexible Backgrounds** — Choose between solid colors, custom gradients, or upload your own background images.
    
-   🖼️ **Decorative Elements** — Upload custom images for left and right decorations, with adjustable sizing and positioning.
    
-   🌟 **Corner Accents** — Built-in organic blobs and geometric patterns with customizable colors add subtle visual interest.
    
-   📝 **Full Typography Control** — Independent font controls for numbers, labels, and descriptions with extended styling options.
    
-   📐 **Responsive & Flexible** — Adapts to any container width while maintaining visual integrity across all screen sizes.
    
-   🎛️ **Border & Spacing** — Complete control over border radius (entire or per-side) and padding.
    
-   ⚡ **Performance Optimized** — Animations disabled in Framer canvas to prevent editor lag, only active on published sites.
    

**Use Cases**

-   SaaS Landing Pages — Highlight key metrics like uptime, user satisfaction, or performance stats
    
-   Marketing Sites — Showcase conversion rates, customer counts, or ROI figures
    
-   Portfolio Pages — Display project statistics, years of experience, or achievement numbers
    
-   Dashboard Widgets — Present important KPIs with visual impact
    
-   Pricing Pages — Feature plan limits, included features, or usage statistics
    

**Property Controls**

-   **Content** — Enter your number (supports ranges, decimals, %, prefixes/suffixes), label, and description text.
    
-   **Background** — Toggle between solid color, gradient, or image upload.
    
-   **Appearance** — Customize all colors (number, label, description, glow, corner effects).
    
-   **Typography** — Extended font controls for each text element with size, weight, spacing, and line height.
    
-   **Decorations** — Upload left/right images, toggle visibility, adjust size, and padding positioning.
    
-   **Effects** — Enable/disable counter animation, set duration, toggle card glow with adjustable color and intensity, toggle corner accents with color customization.
    
-   **Layout** — Control padding, border radius (entire or per-side), and decoration placement.
    

**Quick Guide**

1.  Add the component to your Framer canvas
    
2.  Enter your statistic in the Number field (e.g., "95%", "8.5 years", "10K+")
    
3.  Add a label and description to provide context
    
4.  Choose your background type — gradient works great for dark themes, or upload a custom image
    
5.  Adjust the glow color and intensity to match your brand
    
6.  Upload decorative images for the corners (optional)
    
7.  Customize fonts to match your design system
    
8.  Preview the animation by scrolling the card into view
    

**Notes**

-   Counter animation triggers automatically when 30% of the card is visible
    
-   Ranges (like "12-14") display as entered without animation
    
-   Component is optimized for dark backgrounds but works with any color scheme
    
-   Left and Right Decorative images should have transparent backgrounds for best results
    

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

-   All · #2994

## Details

- **Author**: B-Moat
- **Published**: 2026-05-15
- **Updated**: 2026-05-15
- **Added**: 2026-04-23
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase