Manifesto Lines

About78: Manifesto Lines

A manifesto set as a numbered list: each line arrives on its own as a large serif statement in a ruled row, beside a sticky photograph that drifts inside its frame for the length of the list.

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

Base UI flavor

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

This installs the block to components/beste/block/about78.tsx plus the button22 sliding-marker pill it uses.

Quick start

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

import { About78, about78Demo } from "@/components/beste/block/about78";

export default function Page() {
  return <About78 {...about78Demo} />;
}

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

import { About78 } from "@/components/beste/block/about78";

export default function Page() {
  return (
    <About78
      eyebrow="A short manifesto"
      lines={[
        "We would rather listen for an hour than advise for a minute.",
        "Nobody is a case. Nobody is a category.",
        "Silence in the room is work, not a gap in it.",
      ]}
      button={{ label: "See the practice", href: "/practice", tone: "dark" }}
      image={{ src: "/photos/lake.jpg", alt: "Morning mist lifting off a still lake below wooded hills" }}
    />
  );
}

Props

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

Behavior notes

• Lines are numbered from the index and padded to two digits, so the list reads 01, 02, 03 without the numbers being content anyone has to keep in sync when a line is added or removed.
• Every line shares one flat 0.1s delay rather than a growing stagger, because a list this tall is read one row at a time; an index-scaled delay would leave the last statement waiting seconds after it is already on screen.
• The rows use a tighter -15% viewport margin than the rest of the section, so a statement settles in once it is properly inside the reading area rather than the moment it clips the bottom edge.
• The list is an ol with divide-y and a border on both ends, so the rules come from the list itself; adding a line adds a rule, and nothing has to be styled per position.
• The photograph is md:sticky md:top-28 and drifts between -10% and 10% of its own height against a 1.2 scale, so it stays beside the list for the whole read while still moving; below md the sticky is dropped and it becomes the first block in the stack.
• This is the one block in the set that does not use text1: the statements are already the largest type on the page and a per-word stagger on five of them in a row would turn reading into waiting.
• Both parts are optional. Without image the list keeps its column position rather than stretching, and without lines only the eyebrow and the action remain.