Manifesto Reading

Feature323: Manifesto Reading

A pinned scroll section where one large statement lights up word by word as the page scrolls, small rounded photos open inside the sentence as the wave reaches them, and a signature row fades in once the whole statement is lit.

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

Base UI flavor

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

This installs the block to components/beste/block/feature323.tsx.

Quick start

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

import { Feature323, feature323Demo } from "@/components/beste/block/feature323";

export default function Page() {
  return <Feature323 {...feature323Demo} />;
}

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

import { Feature323 } from "@/components/beste/block/feature323";

export default function Page() {
  return (
    <Feature323
      eyebrow="What we believe"
      parts={[
        "We make places, objects and",
        {
          image: {
            src: "https://images.unsplash.com/photo-1718981464703-c167144381eb?w=600&q=80",
            alt: "Drafting table covered with sketches",
          },
        },
        "brands that ask for nothing but a second look.",
      ]}
      signature={{
        name: "Nick Drake",
        role: "Founding partner",
        avatar: {
          src: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&q=80",
          alt: "Portrait of Nick Drake",
        },
      }}
      tone="dark"
    />
  );
}

Props

type ManifestoImage = {
  src: string;
  alt: string;
};

type ManifestoPart = string | { image: ManifestoImage };

type Signature = {
  name: string;
  role: string;
  avatar?: ManifestoImage;
};

Behavior notes

• The section is 300svh tall with a sticky stage of 100svh minus 78px. Reading progress maps page scroll from 6% to 78% of the section onto 0 to 1, clamped.
• Text parts are split on whitespace into words. Each word or image token gets a window of 0.12 progress, staggered by its index, and words fade from 0.15 to full opacity inside it.
• An image token grows from 0em to 2.2em wide with a 0.25em right margin and settles from a 1.35 scale to 1, so it pushes the text aside as it opens. The pill images use empty alt.
• The statement is an h2. The animated words are aria-hidden, and an sr-only copy joins the text parts for screen readers, so image alts in parts are not announced.
• The signature fades in when progress reaches 0.97 and hides again below 0.85, so it does not flicker at the threshold.
• With reduced motion the section is not pinned, every word is fully lit, every photo is open and the signature is shown from the start.