# StatsHeroPro
A dashboard-grade stats hero block for Framer. Each metric is its own card with optional gradient backgrounds, multi-series charts, multi-segment donut rings, value-labeled axes, and animated count-ups — all in one component, all responsive out of the box.
---
## Why You'll Like It
- Cards that look like a real dashboard. Per-card gradient backgrounds, soft shadows, rounded corners, varied widths via Card Span (1–6). Mix a wide chart card with a narrow donut, just like the reference dashboards on Dribbble.
- Four polished visualizations per stat. Multi-series Sparkline (smooth gradient area fill), multi-series grouped Bar Chart, multi-segment Donut Ring (with center value, suffix, and sub-label), and Pictogram (icon repetition). Pick one per card and they all animate in sync with the count-up.
- Real chart axes. Y-axis grid lines with compact value labels (10K, 12만, 1.2M). X-axis category labels under the chart. Legend auto-renders for multi-series viz with colored dots and labels.
- Numbers that animate themselves. Each stat counts up from zero on scroll-in. Locale-aware formatting (US/UK/Korean/Japanese/Chinese/EU/BR) with optional compact mode so big numbers stay readable.
- Comparison badges that read themselves. Type `+34% YoY` and the badge picks the right color (green ▲) and arrow automatically. Toggle "Invert" for metrics where lower is better — like response time or churn — and the colors flip.
- Auto-fit responsive grid. Set a Min Column Width and the cards reflow automatically as the container shrinks. Or switch to fixed columns if you want strict control.
- Four design presets. Modern (cards on gray), Minimal (borderless on white), Bold (dark dashboard), Soft (pastel) — or go Custom for full control.
- Polished out of the box. Drop on the canvas and you immediately see a hero gradient card, a multi-series sparkline, a multi-segment donut, and a multi-series bar chart — all matching one of the dashboard inspirations on the marketplace.
---
## Install Into Your Framer Project
After purchase you'll receive a `.txt` file containing the component URL.
1. Open the `.txt` file and copy the URL (Ctrl + C / Cmd + C).
2. Go to your Framer dashboard and open the project where you want to use it.
3. Click into the canvas.
4. Paste the URL directly onto the canvas (Ctrl + V / Cmd + V).
Framer will detect the link and place the component on your page. Drag, resize, configure from the right-side property panel.
---
## Setup in 60 Seconds
1. Drop the component on your canvas.
2. Open the property panel on the right.
3. Stats — open the array, replace the four sample cards with your real metrics. Each card has a Label, a Value, and a Visualization dropdown.
4. Style Preset — pick Modern, Minimal, Bold (Dark), or Soft for an instant look.
5. (Optional) Enable Gradient BG on a hero card and pick two colors.
That's it. Scroll the section into view in the live preview and watch the cards animate.
---
## Four Visualization Modes
Each card has a Visualization dropdown. Pick one of:
### Sparkline (multi-line)
Trend lines with optional smooth bezier curves and gradient area fill (top opaque → bottom transparent). Add multiple Series to compare two or more lines on the same chart with an auto legend.
### Bar Chart (grouped)
Multi-series grouped bars. Each Series renders as its own colored bar at every X position, side by side. Perfect for "Sale 1 vs Sale 2 across 12 months."
### Donut Ring (multi-segment)
Multiple Series each contribute a segment around the ring. The center can show the first segment's percentage, the stat value, or the total of all segments — your call. Add a sub-label like "Conversion" beneath the big percentage.
### Pictogram
For "X out of Y" stories: "8 out of 10 customers recommend us." Pick any character or emoji as the icon, set Total Icons (e.g. 10), and the filled count is computed from the value.
### None
Pure number — no visualization. Use for the cleanest, most minimal cards (or hero cards with a gradient background).
---
## Card Spans for Varied Layouts
Each stat card has a Card Span (1–6). The grid lays cards left to right; a card with span 2 takes the next two columns. Mix a 1-column gradient hero next to a 2-column chart next to a 1-column donut and you get a real-feeling dashboard, not just a row of equal squares.
The default sample uses spans 1, 2, 1, 2 to demonstrate.
---
## Real Chart Axes
Turn on Y-Axis Grid for any chart-type stat and the chart automatically draws:
- Horizontal grid lines at "nice" intervals
- Value labels on the left (10K, 20K, 30K, 40K — or 1만, 2만, 3만 in Korean)
Turn on X-Axis Labels and provide a comma-separated list of labels (e.g. `Jan, Feb, Mar, Apr` or `1, 2, 3, 4`). Labels space evenly under the chart.
Both axes inherit colors and sizes from the Chart Axes group, so the look stays consistent across all your cards.
---
## Multi-Series Setup
Each stat has a Series array. Add one item per line / bar series:
- Label — used in the auto legend
- Data Points — comma-separated numbers (used by Sparkline + Bar)
- Value — single number (used by Donut as segment size)
- Color — drives the chart and the legend dot
For a single-line sparkline, just add one series. For a multi-line comparison chart, add 2–3 series with different colors. The legend appears automatically below the chart when there are 2+ series.
---
## What You Can Customize
Every group below is a collapsible panel in the Framer property pane.
- Style Preset — Modern, Minimal, Bold (Dark), Soft, or Custom.
- Stats — full array of cards. Each one has its own Card BG (with optional Gradient), text colors, icon, comparison delta, viz settings, and series.
- Header — eyebrow + title + subtitle with full typography control.
- Card Style — default card BG, radius, padding, alignment, border, shadow, shadow intensity.
- Number Style — font family, size, weight, color, letter-spacing, locale, prefix/suffix sizing.
- Label Style — typography under the icon row.
- Description — optional sentence under the stat.
- Comparison Delta — up/down/neutral colors, arrow toggle, optional pill background.
- Visualization — chart height, sparkline (stroke/smooth/area gradient/dots), bar (gap/group gap/radius), donut (size/ring width/track/center text + suffix + sub-label), pictogram (columns/size/gap/off opacity).
- Chart Axes — grid color/stroke/dashed, Y label color/size, X label color/size/gap.
- Legend — show, spacing, font, color, dot size, item gap, alignment.
- Icon Style — optional icon next to the label (off by default for cleaner cards).
- Animation — scroll trigger, count-up duration, easing curve, stagger, play-once, viz draw-in.
- Layout — auto-fit responsive (with min column width) or fixed columns, gaps, container framing.
- Footer / Source — optional small line under the cards.
Most designers only touch Stats, Style Preset, and a color or two. Pick a preset, edit your cards, ship.
---
## Locale & Compact Formatting
Set the Locale in Number Style. The component uses your browser's `Intl.NumberFormat`:
| Value | Locale | Compact off | Compact on |
|---|---|---|---|
| 12500 | en-US | 12,500 | 12.5K |
| 12500 | ko-KR | 12,500 | 1.3만 |
| 4700000 | en-US | 4,700,000 | 4.7M |
| 4700000 | ja-JP | 4,700,000 | 470万 |
| 4700000 | de-DE | 4.700.000 | 4,7 Mio. |
Compact mode is recommended for any metric with 5+ digits. The Y-axis labels use the same compact helper so big chart values like 40,000 render as 40K — exactly like the references.
---
## Great For
- SaaS marketing pages ("Built for teams that ship")
- Investor decks rendered as web pages
- Annual report / year-in-review microsites
- Pricing pages (12K teams, 4.9★ rating, 99.98% uptime)
- Case studies showing client results
- Recruiting pages ("Why work here")
- Product launch pages with key metrics
- Anywhere a row of static numbers would work, but better
---
## A Few Tips
- For headline impact, set Number Font Size to 40–60 and Letter Spacing to a slight negative (-1 to -1.5).
- Use a Gradient BG on one or two hero cards to break up the grid and create visual hierarchy.
- For multi-series charts, keep your colors complementary (e.g. orange + purple) — it reads more clearly than two similar shades.
- Y-axis grid is the single fastest way to make a card feel "dashboard-grade" instead of "marketing-fluff."
- For Korean / Japanese sites, set Locale appropriately so big numbers use the local convention (만, 億, 万).
- Use Card Span 2 on the chart cards and Card Span 1 on the donuts and gradient hero cards for the cleanest layouts.
---
## Need Help?
If a chart doesn't appear:
- Check that the Visualization dropdown isn't on "None".
- For Sparkline / Bar: each Series needs a Data Points field with at least 2 numbers.
- For Donut: each Series needs a Value > 0.
- For Pictogram: confirm Pictogram Icon and Total Icons are filled in.
If the cards aren't reflowing on small screens:
- Make sure Auto-Fit Columns is on in the Layout group.
- Lower Min Column Width (default 260) if you want narrower cards.
If a stat looks crowded:
- Increase the card padding (Card Style → Padding).
- Enable Compact mode for big numbers.
- Reduce decimal places if you don't need them.
Everything else just works.
MJ Jung
