Walkthrough Exhibition Rail

Gallery14: Walkthrough Exhibition Rail

The show read as a walk: works stacked down the page on their mounts, with a sticky rail that marks whichever one holds the middle of the screen and jumps to any other.

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

Base UI flavor

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

This installs the block to components/beste/block/gallery14.tsx plus the badge7 eyebrow it uses.

Quick start

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

import { Gallery14, gallery14Demo } from "@/components/beste/block/gallery14";

export default function Page() {
  return <Gallery14 {...gallery14Demo} />;
}

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

import { Gallery14 } from "@/components/beste/block/gallery14";

export default function Page() {
  return (
    <Gallery14
      badge={{ label: "Walk the show" }}
      heading="Scroll the exhibition the way you would walk it."
      dates="Rooms one to three, until 2 June"
      works={[
        {
          src: "/show/01.jpg",
          alt: "Letterpress work on rag paper",
          number: "01",
          title: "Alphabet for a Quiet Room",
          artist: "Hélène Marchal",
          medium: "Letterpress on rag paper, 2025",
          room: "One",
          note: "Hung first because it sets the pace for the room.",
        },
        {
          src: "/show/02.jpg",
          alt: "Folded paper work",
          number: "02",
          title: "Fold, Unfolded",
          artist: "Marta Ekelund",
          medium: "Folded cotton paper, 2024",
          room: "One",
          note: "Lit from one side only, so it changes shape as you cross the room.",
        },
      ]}
      labels={{ indexTitle: "Where you are", roomTitle: "Room", jumpLabel: "Go to this work" }}
    />
  );
}

Props

type Work = {
  src: string;
  alt: string;
  number: string;
  title: string;
  artist: string;
  medium: string;
  room: string;
  note: string;
};

type Gallery14Labels = {
  indexTitle?: string;
  roomTitle?: string;
  jumpLabel?: string;
};

Behavior notes

• The rail follows the walk through an IntersectionObserver with rootMargin: "-45% 0px -45% 0px", so the marked entry is whichever work owns the middle band of the viewport rather than whatever is merely on screen.
• The observer is created once and disconnected on unmount, and it watches element refs directly, so no scroll listener runs on every frame.
• Rail entries scroll their work into view with block: "center" and behavior: "smooth", which puts the target in the same band the observer is watching, so the mark lands where you expect.
• The current entry is expressed twice, by rule colour and by weight, and carries aria-current, so the state is announced as well as drawn.
• The rail is md:sticky md:top-24 md:self-start, and self-start is what allows it to stick at all inside a grid.
• The rail also shows the current room above the list, so a long show reads as a sequence of rooms rather than a flat list of numbers.
• Works sit on bg-muted mounts with the picture on bg-background, so each one reads as hung rather than as a card in a feed.
• This block has no lightbox: the walk is the view, and every work is already shown at full page width.