Photo Call to Action

Realestate56: Photo Call to Action

A single wide photograph as the call to action for a development's sales page: a 21:9 frame that is unveiled from the top once the image has loaded and drifts slowly against the scroll, a dark scrim rising from its bottom edge, a pale eyebrow, a heading and a paper pill button in the bottom left corner, and one small figure with its label in the top right. The text rises in sequence as the photograph opens.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate56.tsx together with the badge24 eyebrow and button25 pill components and the shadcn/ui button primitive behind the button.

Quick start

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

import { Realestate56, realestate56Demo } from "@/components/beste/block/realestate56";

export default function Page() {
  return <Realestate56 {...realestate56Demo} />;
}

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

import { Realestate56 } from "@/components/beste/block/realestate56";
import { ArrowRight } from "lucide-react";

export default function Page() {
  return (
    <Realestate56
      eyebrow="Alder Row at dusk"
      heading="See the river from your own window before spring 2027."
      image={{
        src: "https://oud.pics/b/realestate/alder-river-dusk.webp",
        alt: "The warehouse and the concrete wing from across the river at dusk",
      }}
      fact={{ value: "15 of 24", label: "Homes available" }}
      button={{ label: "Book a viewing", href: "/viewing", icon: ArrowRight }}
    />
  );
}

Props

type Fact = {
  value: string;
  label: string;
};

Behavior notes

• The frame waits for two things before it opens: the image's own load event (or complete when it came from cache) and the frame being 10% inside the viewport. It then unclips from the top over 1.6 seconds while the photograph settles from a 1.18 to a 1.12 scale.
• A useScroll on the frame moves the image from -6% to 6% of its height as the section crosses the viewport, so the photograph drifts slowly against the page.
• The scrim is a single gradient from foreground/80 at the bottom to transparent at the top, which is why the text keeps the paper colour against any photograph.
• The eyebrow (rendered still, so it moves with its wrapper), fact, heading and button are gated on the same reveal and rise into place at 0.5, 0.6, 0.7 and 0.85 seconds, so nothing appears before the photograph starts to open.
• With prefers-reduced-motion the frame, the image and all the text render in their final state and the parallax is switched off.