Within Minutes Travel Table

Realestate25: Within Minutes Travel Table

A travel-time table for a development's location page: an eyebrow, heading and intro in the header grid, then a list of nearby places with their walking, cycling and driving minutes as three light figure columns that count up from zero as each row comes into view. Hairlines draw between the rows, which rise in order, the place note darkens on hover, and a footnote under the last hairline explains how the times were measured.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate25.tsx plus the badge24 rule eyebrow and the shadcn/ui button primitive it depends on.

Quick start

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

import { Realestate25, realestate25Demo } from "@/components/beste/block/realestate25";

export default function Page() {
  return <Realestate25 {...realestate25Demo} />;
}

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

import { Realestate25 } from "@/components/beste/block/realestate25";

export default function Page() {
  return (
    <Realestate25
      eyebrow="Within minutes"
      heading="Everything the day needs, a few minutes from the gate"
      description="Most errands are on foot, and the bike stays faster than the car for anything in the neighborhood."
      places={[
        { title: "Mill Lane station", description: "Trains to the city every 6 minutes", walk: 6, cycle: 2, drive: 4 },
        { title: "Riverside Market", description: "Food hall and weekend farmers' market", walk: 4, cycle: 2, drive: 3 },
        { title: "The airport", description: "Direct train from Mill Lane in 38 minutes", walk: 0, cycle: 0, drive: 52 },
      ]}
      labels={{ place: "Place", walk: "On foot", cycle: "By bike", drive: "By car", minutes: "min" }}
      note="Typical times on a weekday morning, measured from the courtyard gate."
      locale="en-US"
    />
  );
}

Props

type Place = {
  title: string;
  description: string;
  walk: number;
  cycle: number;
  drive: number;
};

type Labels = {
  place?: string;
  walk?: string;
  cycle?: string;
  drive?: string;
  minutes?: string;
};

Behavior notes

• Each minute figure is a spring (stiffness 90, damping 22) that starts at zero and is released when the figure itself enters the viewport, so a long table counts up row by row as you scroll; with prefers-reduced-motion the exact value shows at once.
• A figure of 0 means the mode does not apply (nobody walks to the airport): it prints a dash and no unit instead of counting.
• Rows rise in order, 0.1 s apart, each with its own hairline drawing from the left at the same moment; the column captions enter just before the first row and the footnote after the last hairline.
• On screens below the medium breakpoint the column captions move inside each row, above their figure, so every number keeps its label.
• Figures are formatted with Intl.NumberFormat for the given locale and no decimals.