Gallery Rail

About this component

A horizontal gallery wall of photographs in frames of different proportions, hung on one eye line with a title and credit under each. Travel along the wall comes from a number or a live scroll value, or the wall drifts slowly on its own. Each photograph moves a little slower than its frame, and frames grow slightly as they reach the middle. Content such as a heading can hang first on the wall. Photographs load just before they arrive. Reduced motion turns the wall into a plain horizontal scroll.

Usage

The import and the props worth knowing about, in one place.

import { GalleryRail } from "@/components/beste/component/gallery-rail";

<GalleryRail
  className="h-[36rem]"
  items={[
    { src: "https://images.unsplash.com/photo-1579437469180-e31a7aa7273d?w=1400&q=80", alt: "A pebble beach", title: "The long bay", caption: "Nina Simone, 2022", aspect: 1.5 },
    { src: "https://images.unsplash.com/photo-1689202893906-7528e0e89379?w=1400&q=80", alt: "A rocky bay", title: "Under the pines", caption: "Miles Davis, 2024", aspect: 0.75 },
  ]}
/>

// Driven by scroll: pass a framer-motion MotionValue (or any { get() }) as progress
const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] });
<GalleryRail progress={scrollYProgress} autoplay={false} lead={<h2>Room 4</h2>} />

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`items`	`GalleryRailItem[]`	—	The photographs along the wall, in order.
`lead`	`ReactNode`	—	Content hung first on the wall, such as a heading and buttons.
`gap`	`number`	—	Space between frames in pixels; narrow screens use less.
`frameHeight`	`number`	—	Frame height as a share of the rail height, 0.3 to 0.8.
`parallax`	`number`	—	How much slower each photograph moves than its frame, 0 to 1.
`lift`	`number`	—	How much a frame grows as it reaches the middle, 0 to 1.
`shadow`	`boolean`	—	Soft cast shadow under each print.
`progress`	`number \| GalleryRailProgressSource`	—	Travel along the wall from start (0) to end (1): a number or a live source such as a scroll MotionValue.
`autoplay`	`boolean`	—	Drift slowly along the wall and back on its own. Defaults to on when no progress is given.
`speed`	`number`	—	Pace of the autoplay drift.
`paused`	`boolean`	—	Stop the drift where it is.
`className`	`string`	—