# Ripple

> Set of concentric circles that pulse in a staggered wave, each ring larger, more transparent, and more delayed than the last, with the outermost ring rendered dashed to suggest a fading signal.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: animation, ripple, circles, decoration, pulse
- Docs: https://fancy-ui.rama.app/docs/components/ripple
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/ripple

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `baseCircleSize` | `number` | `210` | Diameter of the smallest (innermost) circle in pixels |
| `baseCircleOpacity` | `number` | `0.24` | Opacity of the innermost circle |
| `spaceBetweenCircle` | `number` | `70` | Extra pixels added to each successive circle |
| `circleOpacityDowngradeRatio` | `number` | `0.03` | Opacity reduction per circle outward |
| `circleClass` | `string` | `""` | Additional CSS classes applied to each circle |
| `waveSpeed` | `number` | `80` | Animation delay between circles in ms |
| `numberOfCircles` | `number` | `7` | Total number of concentric circles |

## Examples

### Basic Usage

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

<div class="bg-card relative h-96 overflow-hidden rounded-lg border">
	<Ripple />
</div>
```

### Styled Circles

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

<div class="bg-card relative h-96 overflow-hidden rounded-lg border">
	<Ripple
		circleClass="border-primary/30 bg-primary/5"
		numberOfCircles={5}
		baseCircleSize={150}
		spaceBetweenCircle={90}
	/>
</div>
```

### Interactive Playground

```svelte
<script lang="ts">
	import { Ripple } from "fancy-ui-svelte";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{ key: "numberOfCircles", type: "range", label: "Number of Circles", min: 1, max: 12, step: 1 },
		{
			key: "baseCircleSize",
			type: "range",
			label: "Base Circle Size",
			min: 50,
			max: 400,
			step: 10,
		},
		{
			key: "spaceBetweenCircle",
			type: "range",
			label: "Space Between",
			min: 20,
			max: 200,
			step: 10,
		},
		{
			key: "baseCircleOpacity",
			type: "range",
			label: "Base Opacity",
			min: 0.05,
			max: 0.8,
			step: 0.05,
		},
		{ key: "waveSpeed", type: "range", label: "Wave Speed (ms)", min: 10, max: 300, step: 10 },
	]}
	initialValues={{
		numberOfCircles: 7,
		baseCircleSize: 210,
		spaceBetweenCircle: 70,
		baseCircleOpacity: 0.24,
		waveSpeed: 80,
	}}
>
	{#snippet preview(values)}
		<div class="bg-card relative h-80 w-full overflow-hidden rounded-xl border">
			<Ripple
				numberOfCircles={values.numberOfCircles as number}
				baseCircleSize={values.baseCircleSize as number}
				spaceBetweenCircle={values.spaceBetweenCircle as number}
				baseCircleOpacity={values.baseCircleOpacity as number}
				waveSpeed={values.waveSpeed as number}
			/>
		</div>
	{/snippet}
</PropsPlayground>
```