Media Carousel
An Embla-powered media carousel with autoplay, a MeshGradient backdrop, lazy-loaded slides, an animated caption and a circular autoplay/progress control.
MediaCarousel (default export PortfolioCarousel) is a full-width gallery carousel. It lazy-loads slides as they scroll into view, animates the active slide's title/description/badge with GSAP, and exposes a circular play/pause control with an autoplay progress ring. It is viewer-agnostic: pass onItemClick to open a lightbox of your choice (for example @adv/media-viewer).
Installation
npx shadcn@latest add @adv/media-carouselThis pulls in its parts automatically: @adv/carousel-arrow-buttons, @adv/carousel-dot-button, @adv/lazy-load-image, @adv/circular-progress, @adv/use-embla-autoplay and @adv/use-embla-autoplay-progress.
Usage
import PortfolioCarousel from '@/components/mediaCarousel/media-carousel';
const items = [
{ id: 1, title: 'Aurora', description: 'Analytics surface', image: '/a.jpg', category: 'Product' },
// ...
];
<PortfolioCarousel
items={items}
autoplayDelay={5000}
onItemClick={(index) => openViewer(index)}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | CarouselItem[] | — | Slides: { id, title, description, image, category }. |
options | EmblaOptionsType | { loop: true, align: 'start' } | Embla carousel options. |
autoplayDelay | number | 6000 | Autoplay delay in milliseconds. |
autoplayStopOnInteraction | boolean | true | Whether autoplay stops after user interaction. |
meshColors | [string, string, string, string] | — | Override the MeshGradient backdrop colors. |
onItemClick | (index: number) => void | — | Called when a slide is clicked; wire up your lightbox/viewer. |
className | string | — | Additional CSS classes on the outer section. |
Page Turn Effect
A Three.js WebGL page-curl transition that animates a plane geometry between open and closed states.
Featured Work Carousel
A full-width, accessible carousel that showcases featured work — one slide per item with a lazy-loaded hero image, year/company overlays, title/role/description and a "View case study" link.