Sun Path and Aspect

Realestate72: Sun Path and Aspect

A sun and aspect section for a development: a small line-drawn sun path (a hairline horizon, a fine arc over a soft daylight fill and three suns sitting on the arc at morning, midday and evening with labelled times) that draws itself once in view, above three hairline-topped columns for east-, south- and west-facing homes. Each column has a title, a line on the light it gets and the home types that face that way as outline tags; a note closes the block.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate72.tsx plus the Badge24 eyebrow component it imports; no shadcn/ui primitives are needed.

Quick start

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

import { Realestate72, realestate72Demo } from "@/components/beste/block/realestate72";

export default function Page() {
  return <Realestate72 {...realestate72Demo} />;
}

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

import { Realestate72 } from "@/components/beste/block/realestate72";

export default function Page() {
  return (
    <Realestate72
      eyebrow="Sun and aspect"
      heading="Which homes get the morning, which get the evening"
      description="Every home faces one of three ways. Here is what that means for light."
      markers={[
        { label: "Morning", time: "7:00" },
        { label: "Midday", time: "13:00" },
        { label: "Evening", time: "18:30" },
      ]}
      aspects={[
        { title: "East-facing", description: "Sun on the bedrooms first thing.", types: ["Type A", "Type B"] },
        { title: "South-facing", description: "Light across the river all day.", types: ["Type C", "Type E"] },
        { title: "West-facing", description: "Evening sun on the terraces.", types: ["Type D", "Type E"] },
      ]}
      labels={{ drawing: "The sun's path through the day" }}
      note="Aspect is given per home on the floor plans."
    />
  );
}

Props

type Marker = {
  label: string;
  time: string;
};

type Aspect = {
  title: string;
  description: string;
  types: string[];
};

Behavior notes

• The drawing is mounted only once its frame is 10% inside the viewport: the horizon grows from its centre out to both ends at once, then the arc draws from east to west over 1.8 seconds with pathLength from 0 to 1, then the daylight fill fades in and the suns scale in from 0.6 to 1, 0.15 seconds apart. The middle sun is filled and slightly larger; the others are hollow.
• Strokes are set in grid units (arc 1.1, horizon 0.75) so they render as fine lines at the drawing's maximum width; each path becomes visible at the instant its stroke starts drawing, so no end cap shows early.
• Sun positions are computed on the ellipse itself (at 32, 90 and 148 degrees), so each sun sits exactly on the arc; the marker labels are HTML positioned by the same percentages, so they stay on their suns at any width, and the first three markers map to them in order.
• The three columns rise 0.12 seconds apart with their hairlines while the arc is still drawing, and the type tags inside each column follow 0.08 seconds apart.
• The drawing is a role="img" named by labels.drawing; the marker labels and times are ordinary text, readable in order.
• With prefers-reduced-motion the drawing renders complete on mount and no text, hairline or tag animates.