StatsHeroPro

# 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.