Hero Carousel

Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls. A React + Motion component.

Hero image slideshow cycling through a set of project preview screenshots.

Installation

File Structure

hero-carousel.tsx

use-prefers-reduced-motion.tsx

Usage

import { HeroCarousel } from "@/components/sora-ui/effects/hero-carousel";

const images = [
  { src: "/work/project-1.webp", alt: "Project 1 preview" },
  { src: "/work/project-2.webp", alt: "Project 2 preview" },
  { src: "/work/project-3.webp", alt: "Project 3 preview" },
];

export default function Page() {
  return <HeroCarousel images={images} intervalMs={4500} />;
}

Props

Prop	Type	Default
`images?`	`HeroCarouselImage[]`	-
`intervalMs?`	`number`	`4500`
`initialIndex?`	`number`	`0`
`className?`	`string`	-
`classNames?`	`HeroCarouselClassNames`	-

HeroCarouselImage

Prop	Type	Default
`src?`	`string`	-
`alt?`	`string`	-

HeroCarouselClassNames

Prop	Type	Default
`pill?`	`string`	-
`chevron?`	`string`	-

Use HeroCarousel for a portfolio or landing-page hero that cycles through project screenshots without stealing focus — the crossfade is slow and blurred, the progress pill doubles as a pause/resume toggle, and clicking the image itself advances to the next slide.

Accessibility

The current slide's alt text is applied to the visible image; the buffered layer underneath is aria-hidden. The play/pause pill exposes aria-pressed and swaps its aria-label between "Pause slideshow" and "Play slideshow". Left/Right arrow keys step through slides when focus isn't in a text input. When prefers-reduced-motion: reduce is set, slides swap instantly (no blur, scale, or crossfade) and the progress pill still advances slides on the same interval, just without a visible countdown fill.