Realestate15: Video Hero with Mute Toggle

A development hero on a wide video frame. The frame is unveiled from the top once the clip can play, a dark scrim rises from the bottom edge, and on it sit a rule eyebrow, a large sans headline, a lead and two pill buttons (a paper one and an outline one), all bottom-left. A round mute toggle in the top corner switches the sound of the autoplaying, looping, inline clip.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate15.tsx plus the badge24 rule eyebrow, the button25 pill behind both buttons, and the shadcn/ui button primitive they build on.

Quick start

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

import { Realestate15, realestate15Demo } from "@/components/beste/block/realestate15";

export default function Page() {
  return <Realestate15 {...realestate15Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Realestate15 } from "@/components/beste/block/realestate15";

export default function Page() {
  return (
    <Realestate15
      eyebrow="Alder Row, Riverside"
      heading="A brick warehouse, a birch courtyard and the river at the end of the lane."
      description="Twenty-four homes between a restored 1870s warehouse and a new pale concrete wing."
      buttons={[
        { label: "Register your interest", href: "/register", tone: "neutral", icon: ArrowRight },
        { label: "View the residences", href: "/residences", tone: "outline" },
      ]}
      video={{
        src: "https://oud.pics/b/hotel/ostria-video-exterior.mp4",
        poster: "https://oud.pics/b/realestate/alder-courtyard-exterior.webp",
        title: "The warehouse and the concrete wing around the birch courtyard",
      }}
      labels={{ mute: "Mute the video", unmute: "Unmute the video" }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "dark" | "outline" | "primary" | "neutral";
  icon?: LucideIcon;
};

Behavior notes

• The video is autoPlay muted loop playsInline with preload="metadata" and the poster shown until the first frame; canplay or loadeddata (or a ready state of 3 or more on mount) sets ready, which opens the frame from the top over 1.6 seconds while the footage settles from a 1.12 scale to 1.
• The text sequence waits for the frame: the eyebrow's rule draws at 0.6 s, then the headline (0.8 s), the lead (0.95 s), the buttons (1.05 s) and the mute toggle (1.2 s) rise in on mount.
• The scrim is a single gradient from foreground/80 at the bottom to transparent at the top, so the text stays legible without darkening the whole frame; the text colours are background, background/70 and background/80.
• The mute toggle is an aria-pressed button whose label switches between labels.unmute and labels.mute; it sets the muted property on the video element directly so the loop keeps playing when sound comes on.
• The frame has no fixed ratio: it is at least 32rem tall (36rem from md, 40rem from xl) and the text flows in normal layout at its bottom, so a long headline or lead simply makes the frame taller and can never overflow the footage. The video fills the frame with object-cover behind the text.
• With prefers-reduced-motion the clip reveal, the scale and every entrance are skipped and the hero renders in its final state.