Motif Stats

Numbers someone can plan around, on a colour block: a panel in one of the palette's blocks with a drawing (Motif) half out of its corner, a short line and a heading, then the figures in a row, each large in the block's emphasis colour with its unit beside it and a line under a hairline. The numbers count up when the panel comes into view (CountUp) and the panel opens a little as it arrives (Reveal). Zero JavaScript of its own.

Sample figures

Numbers to plan around

3days: From brief to the first posts.
12posts: A month on the smallest package.
48hours: Before the edit of a shoot is back.

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Variants · each row writes the attribute the prop writes; the section's own CSS answers

densitycompactcozyroomy

Measured

JavaScript of its own

0 B

Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 18.4 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · newly available

Chrome 91 · Firefox 128 · Safari 17; needs property, counter-style. Elsewhere: the final numbers, shown at once.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/motif-stats

src/pages/index.astro

---
import MotifStats from '@/components/moonarc/pro/MotifStats.astro';
---
<MotifStats
  eyebrow="From the price list"
  motif="wave"
  stats={[
    { value: 3, unit: 'days', label: 'From brief to the first posts.' },
    { value: 12, unit: 'posts', label: 'A month on the smallest package.' },
    { value: 48, unit: 'hours', label: 'Before the edit of a shoot is back.' },
  ]}
>
  <span slot="headline">Numbers you can <em>plan around</em></span>
</MotifStats>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: count-up, motif, reveal.

Props

Prop	Type	Default	Description
`stats`	`{ value: number; unit?: string; label: string; prefix?: string; decimals?: number }[]`	none	The figures: the number (counted up), what it counts set small beside it, and the line under it.
`eyebrow`	`string`	none	A short line above the heading.
`headline`	`string`	none	The heading. Slot "headline" wins and may hold an <em>.
`block`	`1 \| 2 \| 3 \| 4 \| 5`	`2`	The colour block the panel paints.
`motif`	`'sun' \| 'gate' \| 'flower' \| 'grid' \| 'phone' \| 'plate' \| 'wave' \| 'shapes'`	none	The drawing hanging out of the panel's top corner; none when unset.
`level`	`2 \| 3`	`2`	Heading level.
`density`	`'compact' \| 'cozy' \| 'roomy'`	`'cozy'`	Padding ×0.8 / ×1 / ×1.25 through --ma-density.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-mstats.ma-mstats__art.ma-mstats__eyebrow.ma-mstats__grid.ma-mstats__headline.ma-mstats__label.ma-mstats__number.ma-mstats__panel.ma-mstats__stat.ma-mstats__unit.ma-mstats__value

Slots

slot="eyebrow"slot="headline"

Reduced motion

The final numbers are there from the start and the panel does not open.

With `ClientRouter`

Inherits CountUp and Reveal; nothing of its own to rebind.

Why it is built this way

The figures take the block's emphasis colour, which the palette picks to read at 4.5 : 1 on that block: a lagoon panel gets its butter, a wine one its blush.
Each number starts 120 ms after the previous, so the row reads left to right.
The drawing hangs out of the corner and is cut by the panel's edge: a picture that does not fit reads as part of the panel, one that fits reads as a sticker on it.

Replaces: Stats sections (Tailwind Plus). See the migration table.

Count Up

Text

Counts a number up from zero to its value when it scrolls into view, with thousands separators, decimals, prefix and suffix.

newly · Chrome 91 · Firefox 128 · Safari 17scroll

Motif

Backgrounds

A drawn picture for a slot that has no photograph yet: a sun over the sea, a split gate, a flower, a grid of tiles, a phone going live, a plate set for dinner, waves under a moon or three shapes.

every browserhover

Stats Row

Pro

Shows big numbers that count up when scrolled into view, 120 ms apart, with labels and an optional bar under each, in a hairline row.