Video Beside Facts

Realestate63: Video Beside Facts

A split media section for a development's sales page: a 4:3 video on the left that plays muted on a loop, is unveiled from the top once the browser can play it and drifts slowly against the scroll, with a round play and pause toggle sitting in its corner. On the right, a rule eyebrow, a heading, a lead paragraph, three figures with their captions on hairline rows and a pill button to the residences.

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

Base UI flavor

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

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

Quick start

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

import { Realestate63, realestate63Demo } from "@/components/beste/block/realestate63";

export default function Page() {
  return <Realestate63 {...realestate63Demo} />;
}

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

import { Realestate63 } from "@/components/beste/block/realestate63";

export default function Page() {
  return (
    <Realestate63
      eyebrow="The warehouse homes"
      heading="Rooms built for the light off the river."
      description="The warehouse keeps its double-height volumes and tall arched windows."
      video={{
        src: "https://oud.pics/b/hotel/ostria-video-sea-suite.mp4",
        poster: "https://oud.pics/b/realestate/alder-warehouse-living.webp",
        label: "A slow pan across a double-height warehouse living room",
      }}
      facts={[
        { value: "5.4 m", label: "Ceiling height in the warehouse living rooms" },
        { value: "3.1 m", label: "Restored arched windows with slim oak frames" },
      ]}
      button={{ label: "View the warehouse homes", href: "/residences" }}
      labels={{ play: "Play video", pause: "Pause video" }}
    />
  );
}

Props

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

type Labels = { play?: string; pause?: string };

Behavior notes

• The video is autoPlay muted loop playsInline with preload="metadata"; the frame stays a flat bg-muted panel until the canplay event fires (or readyState already allows playback on mount) and the frame has scrolled into view, then opens with a top-to-bottom clip over 1.6 s while the video settles from 1.18 to 1.12 scale.
• The frame drifts from -6% to 6% against the page scroll through useScroll on the frame itself; with prefers-reduced-motion the drift is zero, the frame renders open and the clip is paused as soon as it can play.
• The round toggle calls play() or pause() on the element and reads the actual state back from the play and pause events, so the icon stays right even when the browser blocks autoplay; its accessible name switches between labels.play and labels.pause.
• The toggle fades up 1 s after the frame opens so it never sits on an empty panel; the text column rises heading first, then the lead, then the fact rows 0.1 s apart with their hairlines drawing alongside, and the button last.
• Figures use tabular-nums so values of the same length line up; the caption of each fact is kept to one short line at text-sm.