Residences Floor Plan Picker

Realestate11: Residences Floor Plan Picker

A residence picker for a development: a list of home types with their starting prices on the left and a line-drawn floor plan on the right that redraws itself, wall by wall, whenever you choose another type. Numbered room markers on the plan light up as you hover the room list, and a five-figure spec row (interior, outside, bedrooms, bathrooms, from) sits under the plan with the type's note, availability and an enquiry button beside it.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate11.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the enquiry button, and the shadcn/ui button primitive it builds on.

Quick start

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

import { Realestate11, realestate11Demo } from "@/components/beste/block/realestate11";

export default function Page() {
  return <Realestate11 {...realestate11Demo} />;
}

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

import { Realestate11 } from "@/components/beste/block/realestate11";

export default function Page() {
  return (
    <Realestate11
      eyebrow="The residences"
      heading="Three ways to live at Alder Row"
      description="Pick a type to see how the rooms sit together."
      units={[
        {
          plan: "two",
          name: "Type A",
          title: "Two bedroom",
          description: "A corner home with a bedroom either side of the bathroom.",
          rooms: ["Living and kitchen", "Bedroom one", "Bathroom", "Bedroom two", "Balcony"],
          specs: { interior: "78 m²", exterior: "9 m²", beds: "2", baths: "1", from: "$640,000" },
          available: 5,
        },
        {
          plan: "penthouse",
          name: "Type E",
          title: "Penthouse",
          description: "The top of the warehouse, with the terrace along the river side.",
          rooms: ["Living and dining", "Kitchen", "Main bedroom", "Dressing and bathroom", "Bedroom two", "Study", "Roof terrace"],
          specs: { interior: "146 m²", exterior: "62 m²", beds: "2", baths: "2", from: "$1,650,000" },
          available: 1,
        },
      ]}
      labels={{ interior: "Interior", exterior: "Outside", beds: "Bedrooms", baths: "Bathrooms", from: "From", available: "available", soldOut: "All reserved", plan: "Floor plan" }}
      button={{ label: "Enquire about this type", href: "/enquire" }}
    />
  );
}

Props

type PlanName = "two" | "three" | "penthouse";

type Unit = {
  plan: PlanName;
  name: string;
  title: string;
  description: string;
  rooms: string[];
  specs: { interior: string; exterior: string; beds: string; baths: string; from: string };
  available: number;
};

type Labels = {
  interior?: string;
  exterior?: string;
  beds?: string;
  baths?: string;
  from?: string;
  available?: string;
  soldOut?: string;
  plan?: string;
};

Behavior notes

• The three floor plans are drawn inside the block on a 600 by 440 grid and chosen by plan; walls are heavy strokes, fittings and door swings light strokes, outside space dashed. Every path animates its pathLength from zero, walls first and fittings about a second later, so the plan appears to be drawn.
• The plan only mounts once its box has entered the viewport (useInView, once, with a 10% margin), so the first drawing is always seen. Choosing another type fades the old plan out and draws the new one.
• Room markers are placed in rooms order: the first room name gets marker 1, and a plan has a fixed number of marker positions (five for two, seven for three and penthouse). Extra room names past that count are listed but get no marker.
• Hovering or focusing a room name, or a marker, turns both to the primary colour. Picking another type resets the hovered room.
• The spec values cross-fade when the type changes while their captions and hairlines stay put; the availability line reads available after the count, or soldOut when the count is zero.
• The selected type carries a two-pixel primary bar on the left of its row that slides between rows with a shared layout animation.
• The type list enters row by row (0.1 s apart) once the block is in view, and the note, room list and button below it follow 0.4 s later, so the left column arrives in the same sequence as the plan.