Bounded Carousel Hero

Hero109: Bounded Carousel Hero

A contained 16:9 hero carousel that rotates through slides, each with its own badge, heading, description, image and CTA. Unlike a fullscreen hero, the carousel lives inside a padded, rounded card capped between 420px and 640px tall, so it reads as a boxed showcase panel rather than a page-filling banner.

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

Base UI flavor

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

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

Quick start

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

import { Hero109, hero109Demo } from "@/components/beste/block/hero109";

export default function Page() {
  return <Hero109 {...hero109Demo} />;
}

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

import { Hero109 } from "@/components/beste/block/hero109";

export default function Page() {
  return (
    <Hero109
      autoPlay
      interval={5000}
      transition="kenBurns"
      showDots
      slides={[
        {
          id: "slide-1",
          badge: { label: "New", variant: "secondary" },
          heading: "Launch week is here",
          description: "Ship your product page in an afternoon, not a sprint.",
          image: {
            src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1500&h=844&fit=crop",
            alt: "Team celebrating a product launch",
          },
          buttons: [{ id: "btn-1", label: "See the release", href: "https://beste.co" }],
        },
        {
          id: "slide-2",
          badge: { label: "Design", variant: "secondary" },
          heading: "Built for detail",
          description: "Every transition, spacing and shadow considered.",
          image: {
            src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1500&h=844&fit=crop",
            alt: "Designer reviewing a layout on a laptop",
          },
          buttons: [{ id: "btn-1", label: "View the system", href: "https://beste.co" }],
        },
      ]}
    />
  );
}

Props

type HeroSlide = {
  id: string;
  badge?: { label: string; variant?: "default" | "secondary" | "outline" };
  heading?: string;
  description?: string;
  image?: { src: string; alt: string };
  buttons?: ButtonItem[];
};

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

Behavior notes

• Slide transitions run through framer-motion AnimatePresence; the transition prop swaps in a different variant/transition pair: slide moves on the x-axis with a spring and tracks direction (left/right), zoom and kenBurns scale the image in and out, blur animates a CSS blur filter, fade is a plain opacity cross-fade.
• Hovering the carousel card pauses the autoplay timer (onMouseEnter/onMouseLeave toggle an isPaused state); moving off resumes it. Clicking a dot jumps straight to that slide and sets the transition direction based on whether it is ahead or behind the current one.
• Slide text (badge, heading, description, buttons) animates in independently of the image, with each element staggered by 0.1s of delay so the badge appears first and the buttons last.
• The image layer always stacks two fixed gradient overlays, a bottom-to-top black gradient and a left-to-right one, purely for text legibility; there is no prop to configure or disable them.
• The frame is clamped to aspect-[16/9] with a min-h-[420px]/max-h-[640px] range and sits inside a rounded-3xl, padded card, which is what makes it "bounded" rather than a fullscreen hero.