Practitioner Portraits

About75: Practitioner Portraits

A team section for a small practice: the heading settles in word by word beside an intro and a pill action, then a row of portraits drifts inside its frames as the page scrolls, each carrying a serif name, a small-caps role and a short bio.

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

Base UI flavor

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

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

Quick start

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

import { About75, about75Demo } from "@/components/beste/block/about75";

export default function Page() {
  return <About75 {...about75Demo} />;
}

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

import { About75 } from "@/components/beste/block/about75";

export default function Page() {
  return (
    <About75
      eyebrow="The practitioners"
      heading="Three people. One way of listening."
      description="We trained in different rooms and arrived at the same conviction: the work goes better when nobody is in a hurry."
      button={{ label: "Choose who to talk to", href: "/team", tone: "outline" }}
      people={[
        {
          name: "Hania Rani",
          role: "Psychotherapist",
          bio: "Fifteen years in long-term therapy, with a soft spot for people who say they are fine.",
          image: { src: "/team/hania.jpg", alt: "Portrait of a psychotherapist" },
        },
        {
          name: "Sufjan Stevens",
          role: "Coach and counsellor",
          bio: "Works with career change, endings and the strange quiet after a big decision.",
          image: { src: "/team/sufjan.jpg", alt: "Portrait of a coach" },
        },
      ]}
    />
  );
}

Props

type Person = {
  name: string;
  role: string;
  bio: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• Each portrait owns its own scroll listener rather than sharing the section's, so the three photographs drift at their own moment as they reach the viewport instead of moving together in lockstep.
• The travel is deliberately short, -8% to 8% against a 1.18 scale, because a portrait that moves as far as a landscape band reads as a glitch on a face.
• Photos arrive blurred and clear on decode, with a complete check on mount so a cached image is not left waiting for an onLoad that already fired.
• The header row aligns on md:items-end, which puts the intro and its button on the same baseline as the heading rather than beside the top of a heading that may run to two or three lines.
• Cards enter with a 0.12s stagger by index, so on a three-up grid the row resolves left to right instead of appearing as one block.
• Names are h3 under the section h2, and roles are plain paragraphs, so the outline stays readable when this block sits inside a longer about page.
• Nothing here is a link. The card is presentational, and button is the only interactive element in the section.