About the House Statement

About Ostria

Ostria began as a family house on the cove and became twelve rooms without losing its manners: thick island walls, shutters that creak a little, and the quiet comforts you only notice when they are missing.

Weathered blue double doors open onto a balcony with a white chapel dome and the sea

The house

Doors from the 1960s still open onto the balconies. We sanded them back, kept the old blue and let the sea do the rest.

A plaster bedside niche with a brass lamp, a cup and dried flowers beside a linen bed

The rooms

Beds dressed in washed linen, reading lamps set into the plaster and a niche beside every pillow for the things you carry.

An arched alcove of ceramic plates beside a rush armchair on a terracotta floor

The details

Plates from a potter on the next island, cement tiles saved from the old kitchen and chairs woven in the village.

About this block

About the House StatementPRO

An about section for a small hotel: one small eyebrow over a long statement set in light serif, followed by three tall photographs that drift in their frames, each with a small label and a short serif paragraph about the house, the rooms and the details.

Hotel32: About the House Statement

An uppercase eyebrow and a long light serif statement blur up into view, followed by three tall photographs that slide gently inside their frames as you scroll, each captioned with a small label and a short serif paragraph.

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

Base UI flavor

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

This installs the block to components/beste/block/hotel32.tsx. It has no other registry components or shadcn/ui primitives; motion comes from framer-motion.

Quick start

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

tsx
import { Hotel32, hotel32Demo } from "@/components/beste/block/hotel32";

export default function Page() {
  return <Hotel32 {...hotel32Demo} />;
}

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

tsx
import { Hotel32 } from "@/components/beste/block/hotel32";

export default function Page() {
  return (
    <Hotel32
      eyebrow="About Ostria"
      statement="Ostria began as a family house on a Paros cove and became twelve rooms without losing its manners."
      pillars={[
        {
          label: "The house",
          text: "Doors from the 1960s still open onto the balconies, sanded back to the old blue.",
          image: { src: "https://oud.pics/b/hotel/ostria-balcony-doors.webp", alt: "Weathered blue doors open onto a balcony and the sea" },
        },
        {
          label: "The rooms",
          text: "Washed linen, reading lamps set into the plaster and a niche beside every pillow.",
          image: { src: "https://oud.pics/b/hotel/ostria-bedside-niche.webp", alt: "A plaster bedside niche with a brass lamp" },
        },
        {
          label: "The details",
          text: "Plates from a potter on the next island and chairs woven in the village.",
          image: { src: "https://oud.pics/b/hotel/ostria-reading-alcove.webp", alt: "An arched alcove of ceramic plates beside a rush armchair" },
        },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
eyebrowstring–Small uppercase line above the statement
statementstring–The long serif paragraph that leads the section
pillarsPillar[][]Photo cards under the statement, each with a label and a paragraph
classNamestring–Extra classes for the outer <section>
ts
type Pillar = {
  label: string;
  text: string;
  image: { src: string; alt: string };
};

Behavior notes

  • The eyebrow and statement fade, rise and unblur once on entering the viewport, with the statement 0.15 seconds behind the eyebrow.
  • Each card rises in with a 0.12 second stagger by index, and its photo is scaled to 116% and moves from -7% to 7% vertically inside its 3:4 frame as the frame crosses the viewport.
  • Photos stay blurred and transparent until the file has loaded, so slow images never pop in sharp.
  • The cards stack on a phone, sit two across from sm and three across from lg; a third card on sm wraps onto its own row.
  • With reduced motion the entrances, the parallax and the load blur are all disabled.
  • Each of eyebrow, statement and the pillar grid is left out when its prop is missing or empty.

More Hotel blocks

View all Hotel
PRO

hotel3

Room Collection List

PRO

hotel46

Press Mentions and Laurels

PRO

hotel33

Line Logo Hosts Quote

Get Pro