Photo Figures

Stats77: Photo Figures

A story told with three figures: a portrait photograph drifting inside its frame beside the heading, a paragraph, a ruled list where each number sits opposite its explanation, and a pill.

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/stats77?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Stats77, stats77Demo } from "@/components/beste/block/stats77";

export default function Page() {
  return <Stats77 {...stats77Demo} />;
}

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

import { Stats77 } from "@/components/beste/block/stats77";

export default function Page() {
  return (
    <Stats77
      eyebrow="The evening practice"
      heading="Opened for the hour nobody else had."
      description="The people who most needed a room were the ones who could not leave work to reach one."
      button={{ label: "Reserve an evening hour", href: "/evenings", tone: "outline" }}
      image={{ src: "/photos/dock.jpg", alt: "A wooden dock reaching into a still lake at dusk" }}
      figures={[
        { value: 1180, suffix: "+", label: "Evening sessions since 2023" },
        { value: 64, suffix: "%", label: "Had never tried therapy before" },
      ]}
    />
  );
}

Props

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

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

Behavior notes

• The figures are laid out as rows rather than columns, with a fixed 10rem first track from md, so a long explanation wraps beside its number instead of under it and every figure starts on the same vertical rule.
• Rows align on items-baseline, so a large serif numeral and a two-line label sit on the same first line.
• Each figure counts from zero when it reaches the viewport, with useInView set to once so scrolling back does not replay it, and is printed in tabular-nums with thousands grouping.
• The two columns are vertically centred, so a short figure list stays level with a tall portrait.
• The photograph drifts -10% to 10% against a 1.2 scale and clears from blur(24px) on decode, with a complete check on mount for cached files.
• The button waits until 0.6s, after the last figure has arrived, so it does not appear mid-count.
• Without image the copy column keeps its grid position rather than stretching across the section.