Floating Glassmorphism Card Hero

Hero87: Floating Glassmorphism Card Hero

Fullscreen hero built around a single centered glassmorphism card that floats over an inset, dimmed background image or video. The card holds an optional funding/news announcement pill, badge, heading, description, and buttons, all with permanently dark styling.

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

Base UI flavor

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

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

Quick start

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

import { Hero87, hero87Demo } from "@/components/beste/block/hero87";

export default function Page() {
  return <Hero87 {...hero87Demo} />;
}

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

import { ArrowRight } from "lucide-react";
import { Hero87 } from "@/components/beste/block/hero87";

export default function Page() {
  return (
    <Hero87
      badge={{ label: "Beta Access", variant: "secondary" }}
      heading="Rethink how you build for the web"
      description="A radically simple platform that eliminates the gap between design and production."
      buttons={[
        { label: "Request Access", href: "/signup", icon: ArrowRight },
        { label: "Read the Docs", href: "/docs", variant: "outline" },
      ]}
      backgroundMedia={{ type: "image", src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop" }}
      announcement={{ label: "We just raised $20M Series A — Read more", href: "/blog/series-a" }}
    />
  );
}

Props

type ButtonItem = {
  label: string;
  href: string;
  variant?: "default" | "outline";
  icon?: LucideIcon;
};

Behavior notes

• All hero content (announcement, badge, heading, description, buttons) lives inside one centered card (max-w-2xl, bg-black/50, backdrop-blur-xl, bordered) rather than being laid directly over the background media, unlike every other hero in this set.
• This component has no invertColor prop: the card's dark, translucent styling and white text are hardcoded, so it is designed for use over any background image or video without a light-mode variant.
• announcement renders as a pill link above the badge with a trailing ArrowRight that translates right on hover via a named group/hero87 class, a common "we raised funding, read more" banner pattern.
• backgroundMedia sits in the same inset rounded panel used across this hero family, but with a flat bg-black/40 overlay rather than a gradient, since the card itself carries the primary legibility layer.