Timeline Rail

Casa Valtorre, a family vineyard since 1924

A hundred harvests, one family.

Four generations on the same south-facing hill. Scroll through a century of vines, cellars and the people who kept them.

Book a cellar visitOur wines
Young vines on a hillside at dusk

1924

The first rows

Giulio Valtorre plants two hectares of vines on a hill everyone else used for sheep.

Two hands holding a bunch of dark grapes

1938

Picked by hand

The whole village comes up for the harvest, a habit that has never quite stopped.

Wine bottles lined up on a cellar shelf

1971

A name on the label

The first bottles leave the hill under the family name instead of a merchant's.

A long cellar of steel fermentation tanks

1989

The new cellar

Steel tanks go in under the old barn, cool enough to wait out the longest summers.

Four glasses of wine on an oak barrel

2004

A table in the barrel room

Tastings begin at one long table, poured by whoever is on the hill that day.

Rows of vines glowing in the late sun

2016

Back to the soil

Every row is farmed organically, with cover crops and sheep returning between the vines.

A vineyard estate across rolling green hills

2024

The hundredth harvest

Giulio's great-granddaughters pick the same first rows, now thicker than your arm.

About this block

Timeline RailPRO

A pinned scroll feature section for a heritage house built on the scroll-rail component, set on a dark surface: the heading, intro, an Arrow Pill and an underline link open a century-long timeline that travels sideways as the page scrolls. Each milestone pairs a photograph of its own size and proportion with a very large light year numeral, a short title and one sentence, all hung on a continuous hairline with a dot per year. Older photographs are printed in monochrome or faded tones, each photograph drifts inside its frame, numerals drift against the travel, and text brightens as its milestone reaches the middle. A thin progress line along the bottom fills with the scroll. Reduced motion turns the timeline into a plain horizontal scroll.

Feature313: Timeline Rail

A pinned scroll timeline on a dark surface built on the scroll-rail component: a lead panel with the heading, intro, an Arrow Pill and an underline link opens a row of milestones that travels sideways as the page scrolls. Each milestone pairs a photograph of its own size and proportion with a very large light year numeral, a short title and one sentence, hung on a continuous hairline with a dot per year.

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.

Upgrade Now

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

bash
npx shadcn add "https://ui.beste.co/r/feature313?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/feature313.tsx plus the scroll-rail component and the button23 and button2 buttons it uses.

Quick start

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

tsx
import { Feature313, feature313Demo } from "@/components/beste/block/feature313";

export default function Page() {
  return <Feature313 {...feature313Demo} />;
}

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

tsx
import { Feature313 } from "@/components/beste/block/feature313";

export default function Page() {
  return (
    <Feature313
      eyebrow="Casa Valtorre, a family vineyard since 1924"
      heading="A hundred harvests, one family."
      description="Four generations on the same south-facing hill. Scroll through a century of vines, cellars and the people who kept them."
      buttons={[
        { label: "Book a cellar visit", href: "/visit" },
        { label: "Our wines", href: "/wines" },
      ]}
      milestones={[
        {
          year: "1924",
          title: "The first rows",
          text: "Giulio Valtorre plants two hectares of vines on a hill everyone else used for sheep.",
          image: { src: "https://images.unsplash.com/photo-1464638681273-0962e9b53566?w=1200&q=80", alt: "Young vines on a hillside at dusk" },
          size: "md",
          aspect: 1.4,
          tone: "archive",
        },
        {
          year: "2016",
          title: "Back to the soil",
          text: "Every row is farmed organically, with cover crops and sheep returning between the vines.",
          image: { src: "https://images.unsplash.com/photo-1504279577054-acfeccf8fc52?w=1200&q=80", alt: "Rows of vines glowing in the late sun" },
          size: "lg",
          aspect: 1.2,
          tone: "color",
        },
      ]}
      rail={{ gap: 0, smoothing: 0.5 }}
    />
  );
}

Props

PropTypeDefaultDescription
eyebrowstring–Small line above the heading in the lead panel
headingstring–Section heading, rendered as an h2
descriptionstring–Intro under the heading
buttonsActionButton[][]The first renders as a light Arrow Pill, every later one as a Button2 underline link
milestonesMilestone[][]The timeline panels, in order
railOmit<ScrollRailProps, "className" | "children" | "progress" | "autoplay" | "align">–Forwarded to the ScrollRail component: gap, speed, smoothing and paused
classNamestring–Extra classes for the outer <section>
ts
type ActionButton = {
  label: string;
  href: string;
};

type Milestone = {
  year: string;
  title: string;
  text: string;
  image: { src: string; alt: string };
  size?: "sm" | "md" | "lg"; // default "md"
  aspect?: number; // width divided by height, default 1.2
  tone?: "archive" | "faded" | "color"; // default "color"
};

Behavior notes

  • The section is 380svh tall with a sticky stage of 100svh - 78px (at least 640px); scroll progress from 0.02 to 0.96 drives the rail with autoplay off, and a thin line along the bottom fills with the same value.
  • size sets how much of the space above the year the photograph fills (62%, 80% or 100%) and the panel width from md (30, 36 or 44rem); aspect sets the frame's ratio.
  • tone="archive" prints the photo grayscale with a sepia tint, faded adds a light sepia and lower saturation, and color leaves it untouched.
  • Inside each panel the photo drifts in its frame (data-rail-depth="0.12"), the year drifts against the travel (0.3), and the title and sentence stay dimmed until the panel reaches the middle (data-rail-focus="0.35").
  • Colors invert the theme: bg-foreground with text-background, so the surface is dark in light mode.
  • With reduced motion the section is not pinned, the rail becomes a plain horizontal scroll and the progress line is hidden.

More Feature blocks

View all Feature
PRO

feature316

Figures Rail

PRO

feature315

Services Slide Rail

PRO

feature318

Collection Rail

Get Pro access