Detail Tour

Feature321: Detail Tour

A pinned scroll section that tours one large photograph like a camera move: it opens on the whole picture, glides and zooms into each detail in turn, holds, and eases back out at the end. Beside the photograph the eyebrow and heading stay put while one detail at a time crossfades in above a row of hairline segments, and the tour closes with a short line, an Arrow Pill and an underline link.

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

Base UI flavor

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

This installs the block to components/beste/block/feature321.tsx plus the button23 and button2 buttons it uses.

Quick start

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

import { Feature321, feature321Demo } from "@/components/beste/block/feature321";

export default function Page() {
  return <Feature321 {...feature321Demo} />;
}

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

import { Feature321 } from "@/components/beste/block/feature321";

export default function Page() {
  return (
    <Feature321
      eyebrow="Low Hum Studios, Room A"
      heading="Every part of the room is part of the sound."
      description="Take a slow look around Room A before you book it."
      image={{
        src: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=2400&q=85",
        alt: "A recording studio control room with guitars on the wall above an analog mixing console and racks of outboard gear",
      }}
      imageAspect={1.5}
      details={[
        {
          title: "The guitar wall",
          text: "Six guitars, set up and tuned the morning of your session.",
          x: 0.39,
          y: 0.18,
          zoom: 1.9,
        },
        {
          title: "The console",
          text: "A 48-channel analog desk, restored by hand in 2019.",
          x: 0.3,
          y: 0.61,
          zoom: 2.2,
        },
      ]}
      closing="Room A is open most Tuesdays and every other weekend."
      buttons={[
        { label: "Book Room A", href: "/book" },
        { label: "See Room B", href: "/rooms/b" },
      ]}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

type TourDetail = {
  title: string;
  text: string;
  x: number; // center across the photo, 0 (left) to 1 (right)
  y: number; // center down the photo, 0 (top) to 1 (bottom)
  zoom: number; // 1 shows the whole photo, clamped to 1 through 6
};

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

Behavior notes

• The section is 400svh tall with a sticky stage of 100svh - 78px (at least 640px). Scroll progress, smoothed by a spring, is split into a short hold on the whole photo, then a move and a hold for each detail, then a move back out.
• Zoom interpolates in log space, and between 2 close-ups (both zooms above 1.4) the camera breathes out by up to 20%. The pan is clamped so the photo edges never show.
• A vignette fades in as the camera zooms, reaching full strength at a zoom of 2.6.
• The side column crossfades between panels (intro, each detail, closing); inactive panels are invisible and aria-hidden, and 1 hairline segment per detail fills as its stop is reached.
• The camera layer is sized from imageAspect and re-measured by a ResizeObserver; the photo fades in on load.
• On phones the heading sits above the photo and the text lives in a rounded sheet below it; from md the text takes 4 columns and the photo 8.
• With reduced motion the section is not pinned: it shows the whole photograph, the details as a plain list of h3 items, then the closing line and buttons.