Hero132: Expanding Panels Hero

Full-bleed hero built entirely out of side-by-side image panels: hovering or focusing a panel expands it and reveals its name and caption while the others compress, with a giant heading floating above the whole strip on a pointer-events-none layer.

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

Base UI flavor

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

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

Quick start

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

import { Hero132, hero132Demo } from "@/components/beste/block/hero132";

export default function Page() {
  return <Hero132 {...hero132Demo} />;
}

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

import { Hero132 } from "@/components/beste/block/hero132";

export default function Page() {
  return (
    <Hero132
      heading="Rooms made of light."
      items={[
        {
          image: {
            src: "https://images.unsplash.com/photo-1529809540960-3b92284fff20?w=1200&h=1400&fit=crop",
            alt: "Empty office bathed in soft window light",
          },
          name: "The quiet floor",
          caption: "Workspace study, Auralis interiors",
          href: "/work/quiet-floor",
        },
        {
          image: {
            src: "https://images.unsplash.com/photo-1669250937307-b08a1118b216?w=1200&h=1400&fit=crop",
            alt: "Concrete stairwell with a single shaft of light",
          },
          name: "Stair, descending",
          caption: "Form held against shadow",
          href: "/work/stair",
        },
      ]}
    />
  );
}

Props

type PanelItem = {
  image: PanelImage;
  name: string;
  caption: string;
  href: string;
};

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

Behavior notes

• Panels are flex children whose flex-grow ratio changes on interaction: the active panel gets flex-[2.5] and the rest flex-[1], animated with a 700ms ease-out transition on flex-grow for an accordion-style expand, not a crossfade.
• Both onMouseEnter and onFocus set a panel active, so keyboard tab order expands panels too, unlike a pure hover-only implementation.
• Panels also auto-cycle every 4000ms via setInterval, independent of hover or focus.
• Only the active panel shows its name/caption block at full opacity; inactive panels keep the text at opacity-0 and their image dimmed to opacity-70.
• The heading sits in a pointer-events-none wrapper stacked above the panels, so clicks pass straight through it to the panel links beneath.