Hero113: Statement Reel Hero

Centered, oversized-type studio hero: an eyebrow label, a large two-tone headline, a subheading, a primary CTA and a "watch the film" trigger, sitting above a wide cinematic banner image. Either watch trigger opens a lightbox that embeds a YouTube video.

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://ui.beste.co/r/hero113?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero113?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero113.tsx, the badge6 component it uses for the eyebrow label, the button1 component it uses for the primary CTA pill, and their dependencies.

Quick start

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

import { Hero113, hero113Demo } from "@/components/beste/block/hero113";

export default function Page() {
  return <Hero113 {...hero113Demo} />;
}

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

import { Hero113 } from "@/components/beste/block/hero113";

export default function Page() {
  return (
    <Hero113
      label="Northwind Studio"
      heading="Stories that <strong>hold the room.</strong>"
      subheading="Cinematic brand films and launch reels for teams that want the work to carry the pitch."
      primaryButton={{ label: "Book a call", href: "https://beste.co" }}
      playLabel="Watch the reel"
      media={{
        src: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1920&h=820&fit=crop",
        alt: "Film crew setting up a studio shot",
        videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
      }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type MediaItem = {
  src: string;
  alt: string;
  videoUrl: string;
};

Behavior notes

• There are two independent triggers for the same video modal: a text-and-play-icon button next to the primary CTA, and a translucent, backdrop-blurred button centered over the banner image. Both call the same setOpen(true); either requires playLabel and media to both be set.
• The modal is conditionally rendered ({open && media && ...}), not SSR-mounted-and-hidden, so it is absent from the initial HTML until a user opens it.
• The modal closes on a click on the dark backdrop or the corner close button; clicks inside the video frame are stopped from bubbling (stopPropagation) so they do not close it. There is no Escape-key handler.
• The embedded video is a plain <iframe> pointed at ${media.videoUrl}?autoplay=1, so videoUrl must already be an embeddable URL (for example a YouTube /embed/ link), not a watch-page link.
• The banner image has a group/hero113 hover-scale transition (scale-105 over 700ms) that fires on hovering the whole banner, independent of the modal state.