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
Add the component to your Framer canvas
Enter your statistic in the Number field (e.g., "95%", "8.5 years", "10K+")
Add a label and description to provide context
Choose your background type — gradient works great for dark themes, or upload a custom image
Adjust the glow color and intensity to match your brand
Upload decorative images for the corners (optional)
Customize fonts to match your design system
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
B-MOAT
