Slow Timeline

About76: Slow Timeline

A practice history told down a single rule: a sticky column holds the heading, intro and pill action while an ink line draws itself down the timeline beside it, past serif years, titles and short descriptions.

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

Base UI flavor

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

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

Quick start

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

import { About76, about76Demo } from "@/components/beste/block/about76";

export default function Page() {
  return <About76 {...about76Demo} />;
}

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

import { About76 } from "@/components/beste/block/about76";

export default function Page() {
  return (
    <About76
      eyebrow="How we got here"
      heading="Seven years, told slowly."
      description="Nothing about the practice was planned. It grew the way the work does."
      button={{ label: "Where we are going", href: "/next", tone: "outline" }}
      milestones={[
        { year: "2019", title: "Two rooms above a bakery", description: "One practitioner, a borrowed chair and a waiting list of friends of friends." },
        { year: "2022", title: "A second and third chair", description: "Two colleagues joined, and the evening practice opened." },
        { year: "2026", title: "Still small on purpose", description: "Three practitioners, one address, and a decision not to grow faster than the listening can." },
      ]}
    />
  );
}

Props

type Milestone = {
  year: string;
  title: string;
  description: string;
};

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

Behavior notes

• The drawn line is a second rule stacked on the static one and scaled on scaleY from a top origin, so it grows downward as a mask rather than being redrawn; the pale rule underneath stays visible as the track it fills.
• Its progress is measured with the offset ["start 75%", "end 55%"], which finishes the line while the last milestone is still on screen instead of only when the list has left the viewport.
• Milestones use a tighter -20% viewport margin than the header, so an entry settles in once it is properly inside the reading area rather than the moment it clips the bottom edge.
• Years are set in tabular-nums at text-foreground/40, so a column of four-digit years stays optically aligned and reads as a scale rather than as content competing with the titles.
• The list is an ol and the milestone titles are h3, so the chronology is a real ordered list for a screen reader; the dots and both rules are aria-hidden.
• The left column is md:sticky md:top-28, so the heading and action stay in view for the length of the timeline and collapse to normal flow below md, where a sticky column would cover the content.
• With reduce, the line is drawn at full height from the start rather than animating, so the timeline never reads as unfinished.