Effects Fancy Stable
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
Preview
svelte
<script lang="ts">
import { Ripple } from 'fancy-ui-svelte';
</script>
<Ripple />Installation
pnpm add fancy-ui-svelte
import { Ripple } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Ripple } from 'fancy-ui-svelte';
</script>
<Ripple />Examples
Basic Usage
svelte
<script lang="ts">
import { Ripple } from "$lib/fancy-ui/ripple";
</script>
<div class="bg-card relative h-96 overflow-hidden rounded-lg border">
<Ripple />
</div>Styled Circles
svelte
<script lang="ts">
import { Ripple } from "$lib/fancy-ui/ripple";
</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 "$lib/fancy-ui/ripple";
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>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 |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Co
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Stable