Floor Selector with Section Drawing

Realestate34: Floor Selector with Section Drawing

A floor selector for a development's sales page. On the left a line-drawn building section (ground to roof across five levels, the pitched warehouse roof beside the wing's set-back flat roof and terrace) draws itself wall by wall once it scrolls into view, with a round marker beside each level. Hovering, focusing or clicking a marker tints that level and swaps the panel on the right to the level's name, a short note and the homes on it, listed as unit, type, status and price under 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/realestate34?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/realestate34.tsx plus the badge24 eyebrow; it uses no shadcn/ui primitives.

Quick start

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

import { Realestate34, realestate34Demo } from "@/components/beste/block/realestate34";

export default function Page() {
  return <Realestate34 {...realestate34Demo} />;
}

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

import { Realestate34 } from "@/components/beste/block/realestate34";

export default function Page() {
  return (
    <Realestate34
      eyebrow="Floor by floor"
      heading="Choose a level, see what is on it"
      description="Hover or tap a level to list its homes."
      levels={[
        {
          name: "Ground floor",
          short: "G",
          note: "Courtyard-facing homes with their own front doors off the birch walk.",
          homes: [
            { unit: "W.02", type: "Type B", status: "available", price: "$695,000" },
            { unit: "C.01", type: "Type A", status: "available", price: "$640,000" },
          ],
        },
        {
          name: "First floor",
          short: "1",
          note: "The first of the river-facing floors, with the arched windows at their full height.",
          homes: [
            { unit: "W.03", type: "Type A", status: "available", price: "$655,000" },
            { unit: "W.04", type: "Type C", status: "reserved", price: "$895,000" },
            { unit: "C.04", type: "Type A", status: "sold", price: "$660,000" },
          ],
        },
      ]}
      level={1}
      labels={{ drawing: "Section drawing of the warehouse and the courtyard wing", homes: "homes", available: "Available", reserved: "Reserved", sold: "Sold", empty: "No homes on this level." }}
    />
  );
}

Props

type Status = "available" | "reserved" | "sold";

type Home = {
  unit: string;
  type: string;
  status: Status;
  price: string;
};

type Level = {
  name: string;
  short: string;
  note: string;
  homes: Home[];
};

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

Behavior notes

• The section is drawn inside the block on a 600 by 440 grid with slabs at fixed heights: walls, slabs and roofs are heavy strokes, windows, balconies and the river light strokes, the terrace railing and the undercroft dashed. Every path animates its pathLength from zero once the drawing scrolls into view, heavy lines first and details about a second later.
• Levels map to the drawing by index, ground floor first: the band for level four covers the warehouse gable and the wing's set-back top floor. Levels past the fifth are listed in the panel if selected but have no marker or band.
• Hovering a level's band in the drawing or its marker, or focusing the marker, previews that level; clicking either makes it the selected level, which stays when the pointer leaves. The active band fills with the primary colour at low opacity and its marker turns primary.
• The band highlight stays hidden until the walls have finished drawing (about 1.5 s after the block enters the viewport), so the tint never appears on an empty frame.
• The panel on the right is keyed by the active level, so every change fades the old content out over 0.2 s and rises the new name, note and rows in; the home count sits beside the name.
• Status is a small round dot and a word (foreground for available, muted for reserved, border for sold) and sold rows switch the whole row to the muted text colour.
• With prefers-reduced-motion the drawing renders complete, markers appear at once and the panel swaps without the rise.