Expanding Journey Strips

Feature322: Expanding Journey Strips

A pinned scroll section on a dark surface where a row of tall photo strips opens one at a time as the page scrolls: the open strip grows wide and shows its title, detail, text and link, while the others close to slivers carrying a number and a vertical title.

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

Base UI flavor

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

This installs the block to components/beste/block/feature322.tsx plus the button2 button it uses.

Quick start

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

import { Feature322, feature322Demo } from "@/components/beste/block/feature322";

export default function Page() {
  return <Feature322 {...feature322Demo} />;
}

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

import { Feature322 } from "@/components/beste/block/feature322";

export default function Page() {
  return (
    <Feature322
      eyebrow="Small-group walking trips"
      heading="Five journeys, walked slowly."
      description="Small groups, local guides and the same bed for two nights at a time."
      journeys={[
        {
          title: "Isle of Skye",
          detail: "Seven days, May to September",
          text: "Ridge walks above the sea cliffs, with long evenings in a stone inn on the harbor.",
          image: {
            src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=2000&q=80",
            alt: "Green ridges under low cloud with a single road winding below the cliffs",
          },
          link: { label: "See the journey", href: "/journeys/skye" },
        },
        {
          title: "Patagonia",
          detail: "Twelve days, November to March",
          text: "The granite towers of the far south, reached on foot from one quiet lakeside lodge.",
          image: {
            src: "https://images.unsplash.com/photo-1478827387698-1527781a4887?w=2000&q=80",
            alt: "Snow-capped granite peaks above a turquoise lake and a small island lodge",
          },
          link: { label: "See the journey", href: "/journeys/patagonia" },
        },
      ]}
      spread={6}
    />
  );
}

Props

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

type Journey = {
  title: string;
  detail?: string; // short line such as length and season
  text: string;
  image: { src: string; alt: string };
  link?: ActionButton;
};

Behavior notes

• The section is h-[340svh] tall with a sticky frame; scroll progress from 0.06 to 0.94 maps across the strips, and each step rests on a strip before an eased glide to the next.
• A single requestAnimationFrame loop writes flexGrow, shade, label and content opacity straight to the DOM, and pauses when an IntersectionObserver reports the section offscreen or the tab is hidden.
• Photos keep the full row size through a ResizeObserver and CSS variables, so they are cropped rather than rescaled as strips change width.
• Clicking a closed strip scrolls the page to its position over 900ms plus 180ms per strip crossed (up to 4), blending straight from the open strip so the ones between never open. Any wheel, touch or scroll key cancels the jump. The open strip's button is removed from the tab order.
• Below md the strips stack as bands that open in height instead of width, and the detail line is hidden below sm.
• With reduced motion, the section loses its pinned height and every journey is shown at once in equal strips with no click targets or labels.
• Each journey title is an h3, and the link renders as a Button2 underline link only when link is set.