Realestate14: Elevation Drawing Hero

A development hero built around a line drawing instead of a photograph: eyebrow, large sans headline and two pill buttons on the left, three facts under hairlines on the right, then a front elevation of a gabled brick warehouse with arched windows joined to a flat-roofed concrete wing with balconies, drawn stroke by stroke on mount with heavy walls first and light fittings after. A row of numbered part names sits under the drawing; hovering, focusing or clicking one lights that part of the elevation in the accent colour.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate14.tsx plus the badge24 rule eyebrow, the button25 pill behind both buttons, and the shadcn/ui button primitive they build on.

Quick start

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

import { Realestate14, realestate14Demo } from "@/components/beste/block/realestate14";

export default function Page() {
  return <Realestate14 {...realestate14Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Realestate14 } from "@/components/beste/block/realestate14";

export default function Page() {
  return (
    <Realestate14
      eyebrow="Alder Row, Riverside"
      heading="An 1870s warehouse and a new wing, read from the river."
      buttons={[
        { label: "View the residences", href: "/residences", icon: ArrowRight },
        { label: "Download the brochure", href: "/brochure", tone: "outline" },
      ]}
      facts={[
        { value: "24", label: "Homes across the two buildings" },
        { value: "2 to 4", label: "Bedrooms, plus one penthouse" },
        { value: "Spring 2027", label: "Completion" },
      ]}
      parts={[
        { part: "warehouse", title: "The brick warehouse" },
        { part: "wing", title: "Courtyard wing" },
        { part: "balconies", title: "Balconies" },
      ]}
      labels={{ drawing: "Line drawing of the front elevation" }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "dark" | "outline" | "primary" | "neutral";
  icon?: LucideIcon;
};

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

type Part = {
  part: "warehouse" | "roof" | "windows" | "wing" | "balconies";
  title: string;
};

Behavior notes

• Everything animates on mount in one sequence: the eyebrow's rule draws, the headline rises at 0.1 s, the facts and their hairlines follow from 0.25 s and the buttons at 0.35 s, while the drawing starts with the ground line at once.
• The elevation is drawn with pathLength from 0 to 1: the ground line and the heavy walls (stroke 3) of the warehouse, roof and wing go first, then the light fittings (stroke 1.2) of each part, then the balconies and finally two birches; the part names row and its hairline rise once the drawing is nearly complete.
• Every stroke belongs to one of five parts (warehouse, roof, windows, wing, balconies). Hovering, focusing or clicking a part name switches that part's strokes to stroke-primary with a 0.5 s colour transition, and the name itself turns to the accent; clicking the active name again clears it.
• The drawing is a single svg with a role="img" and the labels.drawing text as its accessible name; the part names are real buttons with aria-pressed, so the highlight is reachable by keyboard.
• With prefers-reduced-motion the drawing renders complete, hairlines are full width and every text entrance is skipped.