Made by Hand Materials

Hotel26: Made by Hand Materials

Close-up photographs of a hotel's materials sit in an offset mosaic, each wiping open from below as it enters and drifting at its own speed as you scroll, with a serif name, where it was made and a short note under it.

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

npx shadcn add "https://beste.dev/r/hotel26?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Hotel26, hotel26Demo } from "@/components/beste/block/hotel26";

export default function Page() {
  return <Hotel26 {...hotel26Demo} />;
}

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

import { Hotel26 } from "@/components/beste/block/hotel26";

export default function Page() {
  return (
    <Hotel26
      eyebrow="Made by hand"
      heading="Four materials, and the people nearby who still work them."
      description="We built the house with what the island and its neighbors already knew how to make."
      materials={[
        {
          name: "Lime plaster",
          origin: "Troweled on site",
          description: "Breathes in summer and keeps the rooms cool.",
          image: { src: "https://oud.pics/b/hotel/ostria-olive-shadow-wall.webp", alt: "Olive leaf shadows on a lime-plastered wall" },
        },
        {
          name: "Island marble",
          origin: "Quarried on Paros",
          description: "Every basin is cut from a single block.",
          image: { src: "https://oud.pics/b/hotel/ostria-marble-basin.webp", alt: "A pale marble washbasin with a brass tap" },
        },
      ]}
    />
  );
}

Props

type Material = {
  name: string;
  origin: string;
  description: string;
  image: { src: string; alt: string };
};

Behavior notes

• Tiles cycle through four fixed placements on a 12-column grid from the medium breakpoint (wide 4:3, offset square, square, wide 4:3 with staggered top margins), so a fifth material repeats the first placement. Below the medium breakpoint they stack full width.
• Each tile drifts vertically with scroll as a parallax; the square tiles travel farther (up to 56px each way) than the wide ones (24 to 32px), which keeps the mosaic shifting against itself.
• The photo frame opens with a clip-path wipe from the bottom once it is in view, and the caption fades up 0.4s later; both run once.
• Hovering a tile scales its photo to 1.05 over 1.6s.
• Each photo fades in from a 24px blur only after it has loaded. With reduced motion the parallax, wipe and entrance fades are skipped.