Auto Cycling Photo HeroPRO

Hero153: Auto Cycling Photo Hero

A full-bleed hero whose background photograph cycles on a timer. The caption of the current slide sits on a rule at the foot, next to progress bars that fill across the interval and double as controls.

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

Base UI flavor

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

This installs the block to components/beste/block/hero153.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Hero153, hero153Demo } from "@/components/beste/block/hero153";

export default function Page() {
  return <Hero153 {...hero153Demo} />;
}

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

import { Hero153 } from "@/components/beste/block/hero153";

export default function Page() {
  return (
    <Hero153
      badge={{ label: "In rotation" }}
      heading="The work changes every few seconds. So does the brief."
      description="A studio built for projects that refuse to sit still."
      button={{ label: "Bring us something moving", href: "/contact" }}
      interval={5000}
      slides={[
        { src: "/reel/motion.jpg", alt: "Motion frame on a studio screen", caption: "Motion study, frame 214" },
        { src: "/reel/facade.jpg", alt: "Glass and steel building front", caption: "Facade survey, Rotterdam" },
        { src: "/reel/issues.jpg", alt: "Stacked printed magazines", caption: "Six issues, one grid" },
      ]}
    />
  );
}

Props

type HeroSlide = {
  src: string;
  alt: string;
  caption: string;
};

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• Every slide is rendered at once and cross-faded with transition-opacity duration-1000, so switching never shows a blank frame while a file downloads.
• The timer only starts when there are at least two slides, and it is cleared on unmount and whenever interval or the slide count changes, so no stray interval survives a prop update.
• The progress bar is driven by a width transition rather than a keyframe, which is what lets its duration follow the interval prop without touching a stylesheet.
• On each slide change the bar is reset to zero with a 0ms duration and restarted inside a requestAnimationFrame, so it snaps back to empty instead of animating backwards.
• Bars for slides already shown stay full and later ones stay empty, so the row reads as a position indicator as well as a countdown.
• Each bar is a real button with aria-pressed and an aria-label carrying the slide caption, so the control is usable by keyboard and screen reader rather than being a decorative dash.
• The fill respects motion-reduce:transition-none, so a reduced-motion visitor gets the state without the sweep.
• Copy sits on a flat bg-foreground/60 wash in fixed background tokens, correct for a surface that is a dark photograph in both themes.