Cinematic Image Hero

Hero115: Cinematic Image Hero

Full-bleed background-image hero with the eyebrow, headline, description and CTAs pinned to the bottom-left over a dark scrim. The scrim is heaviest where the copy sits and fades toward the top of the frame, keeping the upper portion of the photo visible.

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

Base UI flavor

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

This installs the block to components/beste/block/hero115.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 hero115Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero115, hero115Demo } from "@/components/beste/block/hero115";

export default function Page() {
  return <Hero115 {...hero115Demo} />;
}

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

import { Hero115 } from "@/components/beste/block/hero115";

export default function Page() {
  return (
    <Hero115
      label="Northwind Studio"
      heading="Work that lands <strong>before you finish scrolling.</strong>"
      description="An independent practice building identities and sites for founders who want the work to prove it."
      buttons={[
        { label: "Start a project", href: "https://beste.co", variant: "primary" },
        { label: "View our work", href: "https://beste.co", variant: "outline" },
      ]}
      media={{
        src: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=2400&h=1400&fit=crop",
        alt: "Abstract architectural form lit at night",
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  variant?: "primary" | "outline";
};

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

Behavior notes

• The background image is a plain <img> absolutely positioned to fill the section (absolute inset-0 size-full object-cover), not a CSS background-image, so it participates in normal image loading/priority behavior.
• The scrim is a single fixed gradient (from-foreground/90 via-foreground/55 to-foreground/30, bg-gradient-to-t) that is darkest at the bottom, where the content sits, and lightens toward the top; it is not configurable per instance.
• Content is bottom-left anchored with a tall minimum height (min-h-[620px], md:min-h-[720px]) rather than a fixed aspect ratio, so the section grows if the viewport is short.
• The primary button variant uses Button1 with tone="primary" and an ArrowUpRight icon (overriding the component's default ArrowRight), which visually distinguishes it from other heroes using the same button component.
• There is no autoplay, carousel, or JS-driven animation; the section is a single static frame.