River Walk Photo Story

Realestate30: River Walk Photo Story

A photo story for a development's riverside setting: the eyebrow, heading and intro in the header grid, a wide photograph that is unveiled from the top once loaded and drifts against the scroll, then a single horizontal hairline that draws across the width with three small dots fixed at 20%, 50% and 80%. Each dot carries a caption with a title and a line that rise in order beneath it; on phones the captions stack with their own hairlines.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate30.tsx plus the badge24 rule eyebrow and the shadcn/ui button primitive it depends on.

Quick start

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

import { Realestate30, realestate30Demo } from "@/components/beste/block/realestate30";

export default function Page() {
  return <Realestate30 {...realestate30Demo} />;
}

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

import { Realestate30 } from "@/components/beste/block/realestate30";

export default function Page() {
  return (
    <Realestate30
      eyebrow="The river walk"
      heading="A mile of promenade that starts at the courtyard gate"
      description="No roads to cross, benches every hundred metres, and the water the whole way."
      image={{
        src: "https://oud.pics/b/realestate/alder-river-walk.webp",
        alt: "The stone promenade along the river beside the brick warehouse",
      }}
      captions={[
        { title: "The gate", description: "Step out of the courtyard and you are on the promenade." },
        { title: "Riverside Market", description: "Four minutes along, the covered hall opens at 7." },
        { title: "Granary Square", description: "The path ends in the park, with the lido on the left." },
      ]}
    />
  );
}

Props

type Caption = {
  title: string;
  description: string;
};

Behavior notes

• The photograph is gated on its own load event and on the frame being in view, then opens from the top over 1.6 s while the image settles from a slight zoom; it drifts from -6% to 6% against the scroll, or stays still with prefers-reduced-motion.
• The hairline draws from left to right over 1.6 s once the caption row enters the viewport; the three dots are static marks that fade in with their captions, 0.12 s apart, starting at 0.5 s so the line is ahead of them.
• Captions are laid on a 20-column grid so each one starts exactly under its dot: columns 5, 11 and 17, which is 20%, 50% and 80% of the width. The dot positions are fixed in the block, not configurable.
• Below the medium breakpoint the shared hairline and the floating dots are hidden; each caption stacks with its own hairline on top and a dot inline before the title.
• Only the first three captions are placed; the block slices the array to the number of fixed positions.