Band and Figures

About82: Band and Figures

A wide photographic band under the heading, then a set of figures that count up as they arrive, each on its own rule, beside a short paragraph explaining what the practice counts and what it refuses to.

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

Base UI flavor

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

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

Quick start

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

import { About82, about82Demo } from "@/components/beste/block/about82";

export default function Page() {
  return <About82 {...about82Demo} />;
}

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

import { About82 } from "@/components/beste/block/about82";

export default function Page() {
  return (
    <About82
      eyebrow="The practice in numbers"
      heading="Small, and measured by the right things."
      image={{ src: "/photos/field.jpg", alt: "Tall grass in a sunlit field" }}
      description="We do not count sessions sold. We count the people who came back."
      button={{ label: "Read the yearly letter", href: "/letter", tone: "outline" }}
      figures={[
        { value: 82, suffix: "%", label: "Ended on purpose, not by drifting away" },
        { value: 41, suffix: "%", label: "Arrived because a friend sent them" },
        { value: 19, label: "Months, the average stay" },
        { value: 0, label: "Sessions cut short for the next appointment" },
      ]}
    />
  );
}

Props

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

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

Behavior notes

• The band is a 21/9 frame with the photograph scaled to 1.3 and drifting -14% to 14%, the widest travel in the set. A letterbox crop can carry that much movement without ever showing an edge, which a portrait frame cannot.
• Each figure counts from zero when it personally reaches the viewport, and useInView is set to once, so scrolling back up does not restart it.
• The count is rounded every frame and printed in tabular-nums, so nothing shifts sideways while the number climbs. Unlike the sibling figure blocks, this one prints the raw number with no thousands grouping, which suits percentages and small counts.
• A value of 0 is honest here: it animates from zero to zero and simply reads 0, so a deliberate "none" is not mistaken for a figure that failed to load.
• Figures are dd before dt inside a dl, so the number is the value and the sentence under it is the term describing it.
• Each figure carries its own border-t, so the rules come from the items themselves and a two-column grid produces an even ruled field at any count.
• Every part is optional: without image the figures follow straight after the heading, and without figures the section is a heading, a paragraph and an action.