Energy Figures Rings

Realestate22: Energy Figures Rings

An energy performance row for a development's sales page: eyebrow, heading and lead, then four figures (an EPC rating, zero gas, a percentage saving, solar capacity) each set inside a thin ring. Once the row scrolls into view the ring draws its track, fills to a share and the number counts up from zero, with a title and a short note under each. A closing hairline row carries a source note and an outline button.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate22.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the note row button, and the shadcn/ui button primitive behind it.

Quick start

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

import { Realestate22, realestate22Demo } from "@/components/beste/block/realestate22";

export default function Page() {
  return <Realestate22 {...realestate22Demo} />;
}

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

import { Realestate22 } from "@/components/beste/block/realestate22";

export default function Page() {
  return (
    <Realestate22
      eyebrow="Energy"
      heading="Built to cost less to run"
      description="Thick walls, triple glazing, heat pumps and a roof of solar panels."
      figures={[
        { text: "A", share: 1, title: "EPC rating", description: "Every home is rated A before any solar is counted." },
        { value: 38, suffix: "%", share: 0.38, title: "Lower running costs", description: "Against a home of the same size built to the 2010 regulations." },
        { value: 12, suffix: " kW", share: 0.6, title: "Rooftop solar", description: "Panels on the warehouse roof feed the shared supply." },
      ]}
      note="Figures from the design-stage energy statement, March 2026."
      button={{ label: "Read the energy statement", href: "/energy" }}
      locale="en-US"
    />
  );
}

Props

type Figure = {
  value?: number;
  text?: string;
  suffix?: string;
  share: number;
  title: string;
  description: string;
};

Behavior notes

• A figure shows text when it is set (for a rating letter or a word), otherwise it counts value from zero on a 1.4 second spring with no bounce, rounded and formatted with Intl.NumberFormat; suffix sits after it in a smaller muted size and does not count.
• share is clamped between 0 and 1 and sets how much of the ring fills: the ring is two SVG circles rotated to start at twelve o'clock, a 1 stroke track in the border colour that draws fully first, then a 1.5 stroke foreground arc whose pathLength animates to the share 0.4 seconds later.
• Rings and count-ups start together once the figure row enters the viewport (useInView, once, with a 10% margin), offset by 0.12 seconds per column; nothing starts off-screen.
• Each column rises with a hairline drawing across its top, and the note row's hairline and content follow as the last step of the sequence.
• With prefers-reduced-motion the rings render filled, the figures show their final values and nothing moves.