Room 4, new acquisitions
Forty prints by five photographers who spent the same season on the same stretch of shoreline. Open daily until the end of October.
Low tide
Chet Baker, 2023
The long bay
Nina Simone, 2022
Under the pines
Miles Davis, 2024
Inlet
Joni Mitchell, 2024
Afternoon
Etta James, 2023
Green water
Bill Evans, 2024
A pinned scroll hero for a photography exhibition built on the gallery-rail component: the heading, intro, an Arrow Pill and an underline link hang first on a long gallery wall, and as the page scrolls the wall travels sideways past large photographs in frames of different proportions, each with a title and credit beneath. Every photograph moves a little slower than its frame and each frame grows slightly as it reaches the middle. Every wall setting passes through the gallery prop. Reduced motion turns the wall into a plain horizontal scroll.
A pinned hero where the heading, intro, an Arrow Pill and an underline link hang first on a long gallery wall built with the gallery-rail component, and scrolling moves the wall sideways past framed photographs of different proportions, each with a title and credit, drifting inside their frames and growing slightly at the middle.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/hero251?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero251?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero251.tsx plus the gallery-rail component and the button23 and button2 buttons it uses.
The installed file exports hero251Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero251, hero251Demo } from "@/components/beste/block/hero251";
export default function Page() {
return <Hero251 {...hero251Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero251 } from "@/components/beste/block/hero251";
export default function Page() {
return (
<Hero251
eyebrow="Room 4, new acquisitions"
heading="One summer on the coast."
description="Forty prints by five photographers who spent the same season on the same stretch of shoreline."
buttons={[
{ label: "Plan your visit", href: "/visit" },
{ label: "See the full exhibition", href: "/exhibition" },
]}
gallery={{
items: [
{
src: "https://images.unsplash.com/photo-1701870856373-bc7273fe6c2c?w=1400&q=80",
alt: "Swimmers seen from above near a rocky shoreline",
title: "Low tide",
caption: "Chet Baker, 2023",
aspect: 0.8,
},
{
src: "https://images.unsplash.com/photo-1579437469180-e31a7aa7273d?w=1400&q=80",
alt: "A pebble beach curving along a turquoise bay",
title: "The long bay",
caption: "Nina Simone, 2022",
aspect: 1.5,
},
],
gap: 88,
frameHeight: 0.6,
parallax: 0.5,
lift: 0.5,
shadow: true,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Muted line above the headline on the first panel |
heading | string | – | Headline, rendered as the page h1 |
description | string | – | Intro under the headline |
buttons | ActionButton[] | [] | The first renders as an Arrow Pill (Button23), the rest as underline links (Button2) |
gallery | Omit<GalleryRailProps, "className" | "lead" | "progress" | "autoplay"> | – | Forwards the GalleryRail props from the gallery-rail component (items, gap, frame height, parallax, lift, shadow, speed, paused) |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};
type GalleryRailItem = {
src: string;
alt?: string;
/** Title of the work, shown under the frame */
title?: string;
/** Credit line under the title */
caption?: string;
/** Width divided by height of the frame, such as 0.75 for portrait or 1.5 for landscape */
aspect?: number;
};320svh tall with a sticky stage of 100svh minus 78px (at least 640px); scroll progress between 0.02 and 0.96 is clamped to 0 to 1 and fed to the rail as a live progress value with autoplay off.lead, so they hang first on the wall and travel away with it.parallax) and each frame grows slightly as it reaches the middle (lift); frames all share one eye line at frameHeight of the rail.