Philosophy Statement

About74: Philosophy Statement

An about section built around a belief rather than a history: the statement settles in word by word above a portrait that drifts inside its frame, two paragraphs and a pill action sit beside it, and a ruled list of principles closes the column underneath.

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

Base UI flavor

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

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

Quick start

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

import { About74, about74Demo } from "@/components/beste/block/about74";

export default function Page() {
  return <About74 {...about74Demo} />;
}

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

import { About74 } from "@/components/beste/block/about74";

export default function Page() {
  return (
    <About74
      eyebrow="What we believe"
      heading="Change does not need to be forced. It needs somewhere safe to happen."
      paragraphs={[
        "We began as two rooms above a bakery and a conviction that most people already know what they need.",
        "So we keep the pace slow on purpose, and the work is allowed to look like nothing for a while.",
      ]}
      button={{ label: "Meet the practice", href: "/practice", tone: "dark" }}
      image={{ src: "/rooms/bench.jpg", alt: "A sunlit room with plaster walls and a low timber bench" }}
      principles={[
        { title: "Slowness is a method", description: "We would rather take a season than force a week." },
        { title: "You set the depth", description: "How far we go, and how fast, is always your call." },
      ]}
    />
  );
}

Props

type Principle = {
  title: string;
  description: string;
};

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

Behavior notes

• The portrait is scaled to 1.2 and translated between -10% and 10% of its own height across the whole scroll range, so it drifts inside a frame that never moves; the extra scale is what keeps the edges covered at both ends of the travel.
• Photos start at blur(24px) and clear only once the file has actually decoded. The onLoad handler is paired with a complete check on mount, so an image served from cache does not sit blurred forever waiting for an event that already fired.
• Every animation is written against useReducedMotion: the blur-in, the word stagger and the drift all collapse to their finished state rather than being skipped, so nothing is left invisible.
• The right column is a flex with justify-between, so the principles list is pinned to the bottom of the column and lines up with the foot of the portrait rather than trailing straight after the paragraphs.
• Each principle is a dt/dd pair inside a dl, laid out two-up from md, so the titles and descriptions stay in a real definition list instead of a visual grid of divs.
• Every part is optional. Without image the copy column keeps its place in the 12-column grid rather than stretching, and without principles the section ends after the button.