# Compare

> Before/after image comparison slider split by a blade of light: a white-hot seam with a chromatic fringe, pulses running along it and a trail that stretches with the speed of the gesture.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Media
- Tags: media, image, slider, comparison, before-after, interactive
- Docs: https://fancy-ui.rama.app/docs/components/compare
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/compare

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `firstImage` | `string` | `""` | URL of the first (left) image |
| `secondImage` | `string` | `""` | URL of the second (right) image |
| `firstImageAlt` | `string` | `"First image"` | Alt text for the first image |
| `secondImageAlt` | `string` | `"Second image"` | Alt text for the second image |
| `firstContentClass` | `string` | `""` | CSS classes for the first content container |
| `secondContentClass` | `string` | `""` | CSS classes for the second content container |
| `initialSliderPercentage` | `number` | `50` | Initial slider position (0-100) |
| `slideMode` | `"hover" \| "drag"` | `"hover"` | How the slider is controlled |
| `showHandlebar` | `boolean` | `true` | Show the drag handle bar |
| `autoplay` | `boolean` | `false` | Automatically animate the slider back and forth |
| `autoplayDuration` | `number` | `5000` | Duration of one autoplay cycle in ms |
| `beamColors` | `string[]` | `["#22d3ee", "#818cf8", "#f472b6"]` | Beam colours: left fringe, centre, right fringe (one or more colours) |
| `label` | `string` | `"Comparison slider"` | Accessible name of the slider |

## Snippets

| Snippet | Description |
| --- | --- |
| `firstContent` | Custom content to render in the first (left) panel instead of an image |
| `secondContent` | Custom content to render in the second (right) panel instead of an image |
| `handle` | Custom drag handle element |

## Examples

### Basic Usage

Hover mode comparison.

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

<div class="flex justify-center">
	<Compare
		firstImage="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=800&q=80"
		secondImage="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80"
		firstImageAlt="Forest in autumn"
		secondImageAlt="Mountains at sunrise"
		class="rounded-lg"
	/>
</div>
```

### Drag Mode

Click and drag to control.

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

<div class="flex justify-center">
	<Compare
		firstImage="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80"
		secondImage="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80"
		firstImageAlt="Desert landscape"
		secondImageAlt="Ocean view"
		slideMode="drag"
		class="rounded-lg"
	/>
</div>
```

### Autoplay

Automatic animation.

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

<div class="flex justify-center">
	<Compare
		firstImage="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
		secondImage="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80"
		firstImageAlt="Mountain peak"
		secondImageAlt="Mountain range"
		autoplay
		autoplayDuration={3000}
		class="rounded-lg"
	/>
</div>
```

### Custom Content

Use snippets instead of images.

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

<div class="flex justify-center">
	<Compare class="rounded-lg">
		{#snippet firstContent()}
			<div
				class="flex size-full items-center justify-center bg-gradient-to-br from-violet-600 to-indigo-600"
			>
				<span class="text-2xl font-bold text-white">Before</span>
			</div>
		{/snippet}
		{#snippet secondContent()}
			<div
				class="flex size-full items-center justify-center bg-gradient-to-br from-rose-600 to-orange-600"
			>
				<span class="text-2xl font-bold text-white">After</span>
			</div>
		{/snippet}
	</Compare>
</div>
```

### Beam Colors

Tint the seam with your own colours.

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

<div class="flex justify-center">
	<Compare
		firstImage="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=800&q=80"
		secondImage="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80"
		firstImageAlt="Forest in autumn"
		secondImageAlt="Mountains at sunrise"
		beamColors={["#f59e0b", "#fb7185", "#a855f7"]}
		class="rounded-lg"
	/>
</div>
```