Floor Plan Downloads

Realestate83: Floor Plan Downloads

A download list for a development's floor plans: five hairline rows, one per home type, each with a tiny schematic plan glyph (an outline rectangle with two or three partition strokes, the terrace dashed) that draws itself in once the list is in view, the type name and title, a single measure line (the interior as a light figure, a hairline, then the outside space) that never wraps, and a download link with a file size. Rows rise in order and a note closes the list.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate83.tsx plus the badge24 rule eyebrow; the block uses no shadcn/ui primitives of its own.

Quick start

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

import { Realestate83, realestate83Demo } from "@/components/beste/block/realestate83";

export default function Page() {
  return <Realestate83 {...realestate83Demo} />;
}

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

import { Realestate83 } from "@/components/beste/block/realestate83";

export default function Page() {
  return (
    <Realestate83
      eyebrow="Floor plans"
      heading="Every plan, ready to download"
      description="Scaled PDF plans for the home types at Alder Row, with room dimensions in metres and feet."
      plans={[
        {
          name: "Type A",
          title: "Two bedroom",
          interior: "78 m²",
          outside: "9 m² balcony",
          file: { href: "/plans/type-a.pdf", size: "PDF, 1.1 MB" },
          glyph: { walls: ["M1.5 1.5H62.5V46.5H1.5Z"], thin: ["M24 1.5V46.5", "M24 24H62.5"], dashed: [] },
        },
        {
          name: "Type C",
          title: "Three bedroom",
          interior: "112 m²",
          outside: "14 m² terrace",
          file: { href: "/plans/type-c.pdf", size: "PDF, 1.4 MB" },
          glyph: { walls: ["M1.5 1.5H62.5V46.5H1.5Z"], thin: ["M20 1.5V46.5", "M42 1.5V46.5", "M20 26H62.5"], dashed: [] },
        },
        {
          name: "Type E",
          title: "Penthouse",
          interior: "146 m²",
          outside: "62 m² roof terrace",
          file: { href: "/plans/type-e.pdf", size: "PDF, 1.8 MB" },
          glyph: { walls: ["M1.5 1.5H44.5V46.5H1.5Z"], thin: ["M1.5 24H44.5", "M24 1.5V24"], dashed: ["M44.5 1.5H62.5V46.5H44.5"] },
        },
      ]}
      labels={{ interior: "Interior", outside: "Outside", download: "Download plan" }}
      note="Plans are drawn at 1:100 from the construction drawings. Final layouts may differ slightly."
    />
  );
}

Props

type Glyph = {
  walls: string[];
  thin: string[];
  dashed: string[];
};

type Plan = {
  name: string;
  title: string;
  interior: string;
  outside?: string;
  file: { href: string; size: string };
  glyph: Glyph;
};

type Labels = {
  interior?: string;
  outside?: string;
  download?: string;
};

Behavior notes

• Glyph paths are SVG path strings on a 64 by 48 grid rendered at 64 by 48 pixels: walls draw at stroke 1.5 in the foreground colour, thin partitions at stroke 1 in the muted colour, and dashed paths at stroke 1 with a 2 by 2 dash for outdoor space such as a terrace.
• The glyph paths are mounted only once the list scrolls into view (useInView, once, 10% before the bottom of the viewport), then draw with pathLength from 0 to 1 over 1.2 s: the outline first, partitions 0.5 s later and 0.12 s apart, dashed paths last. Each row's drawing starts on that row's own delay so the glyphs appear down the list in order.
• Every row rises 16 px into place 0.1 s apart with its top hairline scaling from the left on the same delay; a closing hairline draws under the last row and the note rises after it.
• The download link is a Next Link with a Download icon that nudges down on hover; the file size sits under it as a caption. On desktop the row is a twelve-column grid (glyph 2, type 4, measure 4, link 2); on small screens the glyph and type share the first line and the areas and link wrap below.
• The areas share one line with whitespace-nowrap: the interior in the figure style, a short vertical hairline, then the outside space in muted text. The interior and outside labels are read by screen readers only, so the line stays visually minimal; omit outside and the hairline goes with it.
• With prefers-reduced-motion every initial state is skipped and glyphs render complete as soon as they mount.