A Day at the House Timeline

A day at Ostria

Noschedule,onlyaroughshapetotheday.

Nobody will knock before noon. If you want a plan, this is roughly how the house moves from the first swim to the last light.

A woman stepping from pale rocks into clear turquoise water
7:30
  1. 7:30

    A swim before anyone else

    The rocks below the house are warm by now and the water is still glass.

    A woman stepping from pale rocks into clear turquoise water
  2. 9:00

    Breakfast, wherever you are

    On the terrace, or on a tray in bed with figs from the garden and coffee the way you like it.

    A breakfast tray with coffee, figs and yogurt on a linen bed
  3. 13:30

    Lunch from the boats

    Whatever came in that morning, grilled simply and eaten slowly in the shade of the vine.

    A whole grilled sea bream with charred lemon and olive oil
  4. 17:00

    Heat and stone

    An hour in the hammam while the afternoon wind picks up outside.

    A domed stone hammam with shafts of light falling through steam
  5. 20:00

    The pool at dusk

    Lanterns go on, someone brings a glass of island wine, the sea turns from blue to pink.

    An infinity pool meeting the sea at dusk with two loungers
  6. 21:30

    Dinner under the vine

    One long table, a few small ones, candles and whatever the kitchen decided this afternoon.

    A long candlelit table under a vine pergola above the sea at dusk
About this block

A Day at the House TimelinePRO

A scroll-led day at a small hotel: a vertical line fills as you read down a list of moments from the morning swim to dinner, each with a large serif time, and the one in the middle of the screen brightens while a pinned photograph beside it crossfades to match with the time set in a small pill.

Hotel25: A Day at the House Timeline

A vertical line fills as you scroll down a list of moments in a hotel day, each headed by a large serif time; the moment in the middle of the screen brightens while a pinned photograph beside it crossfades to match and a small pill shows its time.

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://beste.dev/r/hotel25?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hotel25.tsx plus the text1 word stagger it uses for the heading.

Quick start

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

tsx
import { Hotel25, hotel25Demo } from "@/components/beste/block/hotel25";

export default function Page() {
  return <Hotel25 {...hotel25Demo} />;
}

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

tsx
import { Hotel25 } from "@/components/beste/block/hotel25";

export default function Page() {
  return (
    <Hotel25
      eyebrow="A day at Ostria"
      heading="No schedule, only a rough shape to the day."
      description="Nobody will knock before noon. This is roughly how the house moves."
      moments={[
        {
          time: "7:30",
          title: "A swim before anyone else",
          description: "The rocks below the house are warm by now and the water is still glass.",
          image: { src: "https://oud.pics/b/hotel/ostria-swimmer.webp", alt: "A woman stepping from pale rocks into clear water" },
        },
        {
          time: "13:30",
          title: "Lunch from the boats",
          description: "Whatever came in that morning, grilled simply.",
          image: { src: "https://oud.pics/b/hotel/ostria-grilled-fish.webp", alt: "A whole grilled sea bream with charred lemon" },
        },
        {
          time: "21:30",
          title: "Dinner under the vine",
          description: "One long table, a few small ones and candles.",
          image: { src: "https://oud.pics/b/hotel/ostria-dining-terrace.webp", alt: "A candlelit table under a vine pergola" },
        },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
eyebrowstring–Small uppercase line above the heading
headingstring–Serif <h2>, staggered word by word through Text1
descriptionstring–Paragraph at the right of the header
momentsMoment[][]The timeline entries, top to bottom
classNamestring–Extra classes for the outer <section>
ts
type Moment = {
  time: string;
  title: string;
  description: string;
  image: { src: string; alt: string };
};

Behavior notes

  • The line beside the list is a scaleY transform tied to scroll, running from when the list's top reaches 60 percent of the viewport to when its end reaches the middle.
  • A moment becomes active when it crosses a narrow band around the middle of the viewport (a -45% 0px -50% 0px viewport margin); its dot fills, and its time, title and text step up from faded to full color.
  • From the large breakpoint the photo column is sticky at top-24; changing the active moment crossfades the photo with a slight zoom-out and swaps the time pill with a short slide.
  • Below the large breakpoint the sticky photo is hidden and each moment shows its own 4:3 photo under its text instead.
  • Every photo fades in from a 24px blur only after it has loaded.
  • With reduced motion the line is drawn full length and the header entrance fades are skipped.

More Hotel blocks

View all Hotel
PRO

hotel50

Hours of the House Dial

PRO

hotel2

Day in Four Hours Hero

PRO

hotel31

Memory Line and Photo Wave

Get Pro