Slideshow Hero with Background Crossfade

Hero127: Slideshow Hero with Background Crossfade

Full-bleed hero where the background itself is the slideshow: every item's photo is stacked in the same absolutely-positioned layer and crossfades opacity on a timer, while a giant heading and a floating meta card (thumbnail, category, numbered pager, title, location) sit on top and stay in sync with whichever photo is active.

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

Base UI flavor

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

This installs the block to components/beste/block/hero127.tsx and its dependencies.

Quick start

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

import { Hero127, hero127Demo } from "@/components/beste/block/hero127";

export default function Page() {
  return <Hero127 {...hero127Demo} />;
}

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

import { Hero127 } from "@/components/beste/block/hero127";

export default function Page() {
  return (
    <Hero127
      heading="Spaces that hold their silence."
      items={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1622318614813-8f27b0ae8ce3?w=2000&auto=format&fit=crop",
            alt: "Pale concrete living room washed in afternoon light",
          },
          category: "Residence",
          name: "House on the Quiet Slope",
          location: "Engadin, Switzerland",
          href: "https://beste.co",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1539984831038-a068fe437441?w=2000&auto=format&fit=crop",
            alt: "Minimal stone interior with a long horizontal window",
          },
          category: "Atelier",
          name: "The Long Room",
          location: "Vals, Graubünden",
          href: "https://beste.co",
        },
      ]}
    />
  );
}

Props

type SlideItem = {
  image: { src: string; alt: string };
  category: string;
  name: string;
  location: string;
  href: string;
};

Behavior notes

• Every item's photo is always mounted in the DOM as its own absolutely-positioned <img>; only the active one has opacity-100 (the rest opacity-0), and a 700ms transition-opacity produces the crossfade, rather than swapping the src of a single <img>.
• Rotation runs on a setInterval inside useEffect at a fixed 4000ms cadence, the same timing used by hero119 and hero128; it does not pause on hover and keeps ticking whether or not a visitor has manually picked a slide.
• The numbered pager buttons inside the floating card (01, 02, ...) let a visitor jump directly to a slide by index and set aria-current, but this does not reset or restart the underlying auto-advance timer.
• The heading and the floating card share one justify-between flex row that only becomes a horizontal row at lg; on smaller screens they stack, heading first, card second.
• Unlike hero119 (a single static background photo with a separately curated card), the background here is driven by the same items array as the card, so the backdrop, heading area, and meta card always describe the same active project.