Sticky Chapters

Feature276: Sticky Chapters

Chapters read down a ruled column while one photograph stays pinned beside them, swapping to match whichever chapter is currently in the middle of the screen and dimming the titles that are not.

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

Base UI flavor

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

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

Quick start

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

import { Feature276, feature276Demo } from "@/components/beste/block/feature276";

export default function Page() {
  return <Feature276 {...feature276Demo} />;
}

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

import { Feature276 } from "@/components/beste/block/feature276";

export default function Page() {
  return (
    <Feature276
      eyebrow="What a season looks like"
      heading="The work has a shape, even when it does not feel like it."
      button={{ label: "Begin your season", href: "/book" }}
      chapters={[
        {
          title: "Arriving",
          description: "The first weeks are for laying things out without sorting them.",
          image: { src: "/photos/lake.jpg", alt: "Morning mist lifting off a still lake" },
        },
        {
          title: "Leaving well",
          description: "Endings are planned, not abrupt.",
          image: { src: "/photos/dock.jpg", alt: "A wooden dock reaching into a still lake at dusk" },
        },
      ]}
    />
  );
}

Props

type Chapter = {
  title: string;
  description: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• Each row watches itself with a -45% 0px -45% 0px margin, so a chapter counts as current only while it occupies the middle band of the viewport. That narrow strip is what makes the swap feel decided rather than twitchy.
• The sticky photograph is keyed on the active index inside AnimatePresence, so the outgoing picture cross-fades under the incoming one instead of being replaced in a single frame.
• Titles that are not current sit at text-foreground/40 and lift to full over 700ms, so the column reads as one chapter at a time without anything being hidden.
• Below md the sticky column is dropped entirely and each chapter renders its own image inline, because a pinned photograph on a phone would take the whole screen.
• Numbers are derived from the index and padded to two digits, so 01, 02 stay correct as chapters are added or removed.
• Chapters are an ol with divide-y and a border at both ends, so the sequence is a real ordered list for a screen reader.
• The photographs clear from blur(24px) on decode, with a complete check on mount so a cached file is not left blurred.