Apple Card Carousel
A sleek, Apple‑style card carousel with blur‑loading images, modal expansion, and smooth scrolling controls.
Overview
The Apple Carousel suite is composed of four inter‑related components:
| Component | Purpose |
|---|---|
AppleCardCarousel | The horizontal scroll container with left / right controls. |
AppleCarouselItem | A wrapper that adds enter‑animation and spacing to each card. |
AppleCard | A richly styled, clickable card that can expand into a fullscreen modal. |
AppleBlurImage | An <img> replacement that starts blurred until the image loads. |
Together they reproduce the interactive “App Store / Apple TV” browsing experience.
AppleCardCarousel
| Prop | Type | Default | Description |
|---|---|---|---|
initialScroll | number | 0 | Horizontal scroll offset applied on mount (in px). |
Slots
The default slot should contain one or more AppleCarouselItem components.
Emits
No custom events.
AppleCarouselItem
| Prop | Type | Required | Description |
|---|---|---|---|
index | number | ✓ | Zero‑based index; used to stagger the appear animation. |
Slots
Default slot — place an AppleCard here.
AppleCard
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
card | { src: string; title: string; category: string } | ✓ | — | Data object for the card. |
index | number | ✓ | — | Position within the carousel. |
layout | boolean | ✕ | false | Enables shared‑layout FLIP animation. |
Slots
When the card is expanded (modal open) the default slot renders inside the modal body; you can inject extended content such as text, images, or videos.
Emits
No custom events (relies on injected CarouselKey context).
AppleBlurImage
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image source URL. Required. |
alt | string | "Background of a beautiful view" | Alt text. |
width | number | string | img natural | Width attribute; omitted when using fill. |
height | number | string | img natural | Height attribute; omitted when using fill. |
fill | boolean | false | If true, sets width:100%; height:100% via utility classes. |
class | string | "" | Additional classes merged via cn(). |
When the image fires the native load event it gracefully transitions from blur-sm to no‑blur.
Install using CLI
Install Manually
Copy and paste the following code in the same folder
Features
- Blur‑Up Images — Pleasant loading for card thumbnails.
- Shared Layout Animation — Optional FLIP animation between thumbnail and modal using
layoutId. - Keyboard & Click Outside Close — ⌘‑style modal dismissal (Esc key or outside click).
- Accessible Scrolling Controls — Prev / next buttons with disabled state.
- Mobile‑Aware Scroll Calculations — Ensures cards recentre correctly when closed on small screens.
Credits
- Ported from Aceternity UI Apple Card Carousel.