# AnimatedTestimonials

> Testimonial carousel with smooth slide animations and optional autoplay.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Data Display
- Tags: testimonials, carousel, animation, social-proof
- Docs: https://fancy-ui.rama.app/docs/components/animated-testimonials
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/animated-testimonials

## Import

```svelte
<script lang="ts">
  import { AnimatedTestimonials } 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 { AnimatedTestimonials } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `testimonials` (required) | `Testimonial[]` | — | Array of testimonials to display |
| `autoplay` | `boolean` | `false` | Auto-advance testimonials |
| `interval` | `number` | `5000` | Interval between auto-advances in ms |
| `sound` | `boolean` | `false` | Plays select when the previous or next control moves to another testimonial, once the user has enabled sound |

## Examples

### Basic Usage

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

	const testimonials: Testimonial[] = [
		{
			quote:
				"The attention to detail and innovative features have completely transformed our workflow. This is exactly what we've been looking for.",
			name: "Sarah Chen",
			designation: "Product Manager at TechFlow",
			src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=500&auto=format&fit=crop&q=60",
		},
		{
			quote:
				"Implementation was seamless and the results exceeded our expectations. The platform's flexibility is truly impressive.",
			name: "Michael Rivera",
			designation: "CTO at InnovateSphere",
			src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60",
		},
		{
			quote:
				"This solution has significantly improved our team's productivity. The intuitive interface makes complex tasks simple.",
			name: "Emily Watson",
			designation: "Operations Director at CloudScale",
			src: "https://images.unsplash.com/photo-1623582854588-d60de57fa33f?w=500&auto=format&fit=crop&q=60",
		},
	];
</script>

<div class="flex min-h-[400px] items-center justify-center">
	<AnimatedTestimonials sound {testimonials} />
</div>
```

### With Autoplay

Auto-advances every 3 seconds.

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

	const testimonials: Testimonial[] = [
		{
			quote:
				"Outstanding support and robust features. It's rare to find a product that delivers on all its promises.",
			name: "James Kim",
			designation: "Engineering Lead at DataPro",
			src: "https://images.unsplash.com/photo-1636041293178-808a6762ab39?w=500&auto=format&fit=crop&q=60",
		},
		{
			quote: "The scalability and performance have been game-changing for our organization.",
			name: "Lisa Thompson",
			designation: "VP of Technology at FutureNet",
			src: "https://images.unsplash.com/photo-1624561172888-ac93c696e10c?w=500&auto=format&fit=crop&q=60",
		},
		{
			quote: "Implementation was seamless and the results exceeded our expectations.",
			name: "Michael Rivera",
			designation: "CTO at InnovateSphere",
			src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&auto=format&fit=crop&q=60",
		},
	];
</script>

<div class="flex min-h-[400px] items-center justify-center">
	<AnimatedTestimonials sound {testimonials} autoplay interval={3000} />
</div>
```