Cinematic Hero with Overlapping Media

Hero80: Cinematic Hero with Overlapping Media

Centered hero with two independent media slots: a dimmed background image or video inset behind the heading and buttons, and a second foreground image or video pulled up with a large negative top margin so it visually overlaps the bottom of the background zone.

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

Base UI flavor

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

This installs the block to components/beste/block/hero80.tsx along with the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Hero80, hero80Demo } from "@/components/beste/block/hero80";

export default function Page() {
  return <Hero80 {...hero80Demo} />;
}

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

import { Hero80 } from "@/components/beste/block/hero80";

export default function Page() {
  return (
    <Hero80
      badge={{ label: "New", variant: "secondary" }}
      heading="Build stunning websites with easy tools"
      description="Turn ideas into beautiful, professional sites with an intuitive no-code platform."
      buttons={[
        { label: "Get Started", href: "/signup" },
        { label: "Watch Demo", href: "/demo", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop" }}
      media={{ type: "image", src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=800&fit=crop", alt: "Dashboard preview" }}
      invertColor
    />
  );
}

Props

type MediaItem = {
  type: "image" | "video";
  src: string;
  alt?: string;
};

Behavior notes

• backgroundMedia and media are two independent slots: the background sits in an inset rounded panel (inset-x-6 top-6) directly behind the centered text, while media is a second element pulled upward with a responsive negative margin (-mt-24 on mobile up to -mt-48 on lg), so it overlaps the bottom edge of the background panel.
• invertColor (default true) switches the heading and description to white text with a bg-black/60 overlay on the background media; setting it to false swaps to default foreground colors and a bg-background/80 overlay.
• Both media slots branch on type: "video" renders an autoPlay/loop/muted/playsInline <video>, "image" renders an absolutely positioned object-cover <img>.
• Unlike the other heroes in this set, this one is not fullscreen in its metadata: it uses generous vertical padding (py-32 up to py-64 on lg) rather than min-h-screen to size the top zone.