Sales Progress Photo Cards

Realestate69: Sales Progress Photo Cards

Sales progress for a development as a grid of photo cards, one per home type: a 4:3 photograph that unveils once loaded with an availability pill on it, the type and title, a three-part bar for sold, reserved and available homes and the counts beside coloured dots. A dark summary card closes the grid with the total counting up, three status figures, a note and a button.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate69.tsx plus the badge24 rule eyebrow, the button25 quiet pill used in the summary card, and the shadcn/ui button primitive it builds on.

Quick start

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

import { Realestate69, realestate69Demo } from "@/components/beste/block/realestate69";

export default function Page() {
  return <Realestate69 {...realestate69Demo} />;
}

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

import { Realestate69 } from "@/components/beste/block/realestate69";

export default function Page() {
  return (
    <Realestate69
      eyebrow="Sales progress"
      heading="Where the 24 homes stand today"
      description="Updated after every reservation."
      rows={[
        { name: "Type A", title: "Two bedroom", sold: 2, reserved: 1, available: 5, image: { src: "https://oud.pics/b/realestate/alder-warehouse-living.webp", alt: "A double-height living room" } },
        { name: "Type E", title: "Penthouse", sold: 1, reserved: 0, available: 1, image: { src: "https://oud.pics/b/realestate/alder-roof-terrace.webp", alt: "A roof terrace over the river" } },
      ]}
      locale="en-US"
      labels={{ sold: "sold", reserved: "reserved", available: "available", homes: "Homes in phase 1", soldOut: "All sold" }}
      note="Figures correct as of 15 October 2026."
      button={{ label: "Ask about a home", href: "/contact" }}
    />
  );
}

Props

type Row = {
  name: string;
  title: string;
  sold: number;
  reserved: number;
  available: number;
  image: { src: string; alt: string };
};

type Labels = {
  sold?: string;
  reserved?: string;
  available?: string;
  homes?: string;
  soldOut?: string;
};

Behavior notes

• Cards sit in a grid of one, two and then three columns (sm, lg). With five home types the dark summary card fills the sixth cell, so the grid closes evenly on desktop.
• Each photograph stays clipped until its file has loaded and its frame is in view, then opens from the top over 1.6 s while settling from a 1.18 to a 1.12 scale, and drifts from -6% to 6% with the scroll. Cards rise 0.1 s apart and each photo starts on its card's delay.
• The pill on each photo shows the available count, or labels.soldOut when nothing is left. The bar under the title splits the type into sold (foreground), reserved (primary) and available (a faint foreground) by share; segments grow from the left one after another, and empty statuses are left out of the bar but still listed, dimmed, in the counts.
• The summary card adds up every row: the total counts up from zero once the grid is in view, followed by the three status figures under thin hairlines, each counting up 0.1 s apart. Counting uses a 1.4 s spring formatted with Intl.NumberFormat.
• With prefers-reduced-motion the photos, bars and figures render in their final state.