Svelte Bubble Images Gallery

Performant image gallery using html canvas

This demo uses 1000 images loaded from the Picsum Photos API.

• Range - The distance the images will travel each animation.
• Radius - The size of the image bubble.
• Number of Images - The number of images to load.
• Border Radius - The border radius of the image bubble.
• Mode - The mode of the animation, either bounce or wrap. 'bounce' | 'wrap' | 'gravity'

		
		
<script lang="ts">

	import Bubbles from 'svelte-image-galleries';


	const numberOfImages = 200;

	let imageSources: string[] = new Array(numberOfImages)
		.fill(0)
		.map((_, i) => `https://picsum.photos/200/200?random=${i}`);
	let mode = 'bounce';
</script>


<Bubbles {imageSources} range={200} radius={100} borderRadius={10} mode="bounce" />