Ink Numbers Band

Stats78: Ink Numbers Band

A band of numbers on the ink surface under film grain: a wide statement beside a pale pill, then four figures that count up along a ruled row.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/stats78?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/stats78?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats78.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports stats78Demo alongside the block: the exact props behind the preview above. Spread it to get a working stats band in one line.

import { Stats78, stats78Demo } from "@/components/beste/block/stats78";

export default function Page() {
  return <Stats78 {...stats78Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Stats78 } from "@/components/beste/block/stats78";

export default function Page() {
  return (
    <Stats78
      heading="Seven years, three chairs, and the numbers that matter to us."
      button={{ label: "How we count", href: "/method", tone: "light" }}
      figures={[
        { value: 7, label: "Years in practice" },
        { value: 3200, suffix: "+", label: "Sessions since 2019" },
        { value: 88, suffix: "%", label: "Would recommend us" },
      ]}
    />
  );
}

Props

type Figure = {
  value: number;
  suffix?: string;
  label: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• There is no eyebrow prop: the band is meant to be the quietest stats block in the set, and the statement opens it directly.
• The heading takes a tightened stagger={0.04} and is set one step smaller than its siblings, because it carries a full sentence rather than a phrase.
• button falls back to the light tone rather than primary, which is right on a dark band: an unspecified button comes out pale instead of taking the brand colour.
• The dividing rules are md:border-l with md:first:border-l-0 unsetting the first, drawn against background/20 for the dark surface, so a four-up row is separated without an outer line.
• Each figure counts from zero when it reaches the viewport, is rounded every frame and printed in tabular-nums with thousands grouping, so the row does not shift while the numbers climb.
• useInView is set to once, so scrolling back up does not replay the count.
• The grain filter takes its id from useId, so two grain surfaces on one page cannot collide on a global SVG id.