Browser Screenshot Hero with Notifications

Hero72: Browser Screenshot Hero with Notifications

Centered hero anchored by a browser-chrome screenshot mockup: up to four notification-style cards float at the mockup's corners and a star-rating pill floats beneath it, with an optional CSS keyframe animation that makes all of them gently bob.

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

Base UI flavor

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

This installs the block to components/beste/block/hero72.tsx and the shadcn/ui badge and button components it depends on.

Quick start

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

import { Hero72, hero72Demo } from "@/components/beste/block/hero72";

export default function Page() {
  return <Hero72 {...hero72Demo} />;
}

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

import { Hero72 } from "@/components/beste/block/hero72";

export default function Page() {
  return (
    <Hero72
      badge={{ label: "New Release", variant: "secondary" }}
      heading="Your workspace, reimagined"
      description="A focused interface that keeps your team moving."
      buttons={[{ label: "Try It Now", href: "/signup" }]}
      screenshot={{ src: "https://example.com/app-screenshot.png", alt: "App screenshot" }}
      browserUrl="app.example.com"
      floatingCards={[
        { icon: "check", color: "emerald", title: "Task completed", subtitle: "Design review", position: "top-left" },
        { icon: "trending", color: "amber", title: "+24% growth", subtitle: "This week", position: "bottom-right" },
      ]}
      rating={{ score: "4.9", count: "from 2,000+ reviews" }}
      enableAnimation
    />
  );
}

Props

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

type FloatingCard = {
  icon: "check" | "users" | "message" | "trending";
  color: "emerald" | "violet" | "blue" | "amber";
  title: string;
  subtitle: string;
  position: "top-left" | "bottom-left" | "top-right" | "bottom-right";
};

Behavior notes

• enableAnimation deliberately accepts a boolean or the string "true" (enableAnimation === true || enableAnimation === "true"), which matters when the value arrives as a string from a CMS or query param; any other value, including "false", is treated as disabled.
• Each floatingCards entry has a fixed position (top-left, bottom-left, top-right, bottom-right) mapped to absolute offsets; top cards are hidden below md and bottom cards below lg, so the corner cards are desktop-only decoration.
• When animation is enabled, every card and the rating pill run an independent CSS float keyframe (a translateY bob) with a per-position delay, producing a staggered rather than synchronized motion.
• The screenshot sits in a [perspective:1000px] wrapper and tilts on hover (hover:[transform:rotateX(2deg)], 500ms transition), with a bottom gradient overlay fading the image into the background color.
• The mock browser chrome (traffic-light dots, optional URL bar) is entirely static; browserUrl only toggles whether the address bar text renders.