A Day in the Development

Realestate68: A Day in the Development

A day-in-the-life timeline for a development: a header, then a vertical list of moments (a river walk at 7:00, courtyard coffee at 9:00, lunch from the market at 13:00, the terrace at 18:00) along a hairline spine that draws downwards. Each moment has the time as a light figure, a title, a line and a small square crop of a photograph that opens once it has loaded and drifts slightly against the scroll.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate68.tsx plus the Badge24 eyebrow component it imports; no shadcn/ui primitives are needed.

Quick start

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

import { Realestate68, realestate68Demo } from "@/components/beste/block/realestate68";

export default function Page() {
  return <Realestate68 {...realestate68Demo} />;
}

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

import { Realestate68 } from "@/components/beste/block/realestate68";

export default function Page() {
  return (
    <Realestate68
      eyebrow="A day at Alder Row"
      heading="From the river walk at seven to the terrace at six"
      description="Most of a day here happens within a few hundred steps of the front door."
      moments={[
        {
          time: "7:00",
          title: "Along the river walk",
          description: "Twenty minutes out and back under the birches before the city wakes up.",
          image: { src: "https://oud.pics/b/realestate/alder-river-walk.webp", alt: "The stone promenade beside the buildings" },
        },
        {
          time: "18:00",
          title: "The terrace at dusk",
          description: "West light along the river wall and a long evening on the oak chairs.",
          image: { src: "https://oud.pics/b/realestate/alder-roof-terrace.webp", alt: "The penthouse terrace with oak chairs" },
        },
      ]}
    />
  );
}

Props

type Moment = {
  time: string;
  title: string;
  description: string;
  image?: { src: string; alt: string };
};

Behavior notes

• The spine is a one pixel rule that scales from the top over 1.8 seconds once the list is in view; each moment's dot scales from 0.6 and its time, text and photograph follow 0.12 seconds after the one above.
• Photographs are cropped square with object-cover; each frame waits for its own load event (or an already complete image) and for the frame to be in view before it opens from the top, while the image settles from a 1.18 to a 1.12 scale.
• Each crop drifts from -6% to 6% against the scroll through useScroll on its own frame; with prefers-reduced-motion the drift is off and every frame renders open.
• On desktop the row is a twelve-column grid: time in two columns, title and line in six, the crop right-aligned in the last three; on phones everything stacks to the right of the spine.
• A moment without an image simply omits the crop and keeps the rest of the row.