# AppleCardCarousel

> Horizontal card carousel where the focused card expands into a spring-animated full-screen view.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Cards
- Tags: carousel, cards, animation, spring, scroll
- Docs: https://fancy-ui.rama.app/docs/components/apple-card-carousel
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/apple-card-carousel

## Import

```svelte
<script lang="ts">
  import { AppleCardCarousel } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { AppleCardCarousel } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cards` (required) | `AppleCardData[]` | — | Cards to display in the carousel |
| `sound` | `boolean` | `false` | Plays open when a card expands and close when it is dismissed, once the user has enabled sound |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { AppleCardCarousel } from "fancy-ui-svelte";
	import type { AppleCardData } from "fancy-ui-svelte";

	const cards: AppleCardData[] = [
		{
			category: "Nature",
			title: "Misty Mountains",
			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop&q=60",
			description:
				"A breathtaking view of misty mountains at dawn, where layers of fog weave between ancient peaks.",
		},
		{
			category: "Architecture",
			title: "Brutalist Forms",
			src: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=800&auto=format&fit=crop&q=60",
			description: "Raw concrete and bold geometry define this brutalist landmark.",
		},
		{
			category: "Ocean",
			title: "Deep Blue",
			src: "https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=800&auto=format&fit=crop&q=60",
			description: "Beneath the surface, an entire world exists in silence.",
		},
		{
			category: "Urban",
			title: "City Lights",
			src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=800&auto=format&fit=crop&q=60",
			description: "The city never sleeps. From dusk to dawn, millions of lives intersect.",
		},
		{
			category: "Desert",
			title: "Sand & Silence",
			src: "https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=800&auto=format&fit=crop&q=60",
			description:
				"The desert teaches patience. Endless dunes shift imperceptibly under a relentless sun.",
		},
	];
</script>

<div class="overflow-hidden py-8">
	<AppleCardCarousel sound {cards} />
</div>
```