Homes Remaining Counter

Realestate57: Homes Remaining Counter

An availability call to action for a development's sales page built around one huge figure: the number of homes still for sale counts up from zero as it enters the viewport, with the eyebrow above it and a short paragraph and a pill button beside it. Under the row a full-width hairline draws across and then fills in dark to the share of homes sold, captioned with the sold count out of the total and the percentage.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate57.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 realestate57Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Realestate57, realestate57Demo } from "@/components/beste/block/realestate57";

export default function Page() {
  return <Realestate57 {...realestate57Demo} />;
}

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

import { Realestate57 } from "@/components/beste/block/realestate57";
import { ArrowRight } from "lucide-react";

export default function Page() {
  return (
    <Realestate57
      eyebrow="Availability"
      total={24}
      sold={9}
      locale="en-US"
      labels={{ remaining: "homes remaining", sold: "sold since launch", of: "of" }}
      description="Nine homes went in the first month. The penthouse is still available."
      button={{ label: "See what is left", href: "/residences", icon: ArrowRight }}
    />
  );
}

Props

type Labels = {
  remaining?: string;
  sold?: string;
  of?: string;
};

Behavior notes

• The remaining figure is a spring from 0 to total - sold with a 1.4 second duration and no bounce, started once the figure row is 10% inside the viewport; it rounds on every frame and is formatted with Intl.NumberFormat, and the element is aria-live="polite".
• sold is clamped to total, so the figure never goes below zero and the bar never passes the end of the hairline.
• The bar is two layers on one hairline: the full-width border line scales in from the left over 1.2 seconds, then the dark fill, sized to the sold share in percent, scales in over 1.4 seconds starting 0.2 seconds later.
• The caption reads sold count, of, total and the sold label, with the percentage rounded on the right; it rises after the bar.
• With prefers-reduced-motion the figure shows the final value at once and the bar and text render complete.