Infinite Gallery

Installation

Install the component

Run the following command to install the component and its dependencies:

npx @motion-core/cli add infinite-gallery

Import the component

Import the component into your Svelte file:

import { InfiniteGallery } from "$lib/motion-core";

import { InfiniteGallery } from "$lib/motion-core";

Usage

Props

Speed

1.000

Visible Count

<script lang="ts">
	import { InfiniteGallery } from "motion-core";
	import type { ComponentProps } from "svelte";

	type Props = Partial<ComponentProps<typeof InfiniteGallery>>;

	let { speed = 1, visibleCount = 8 }: Props = $props();

	const images = [
		"/images/demos/sample-8.jpg",
		"/images/demos/sample-9.jpg",
		"/images/demos/sample-10.jpg",
		"/images/demos/sample-11.jpg",
		"/images/demos/sample-12.jpg",
		"/images/demos/sample-13.jpg",
		"/images/demos/sample-14.jpg",
		"/images/demos/sample-15.jpg",
	];
</script>

<InfiniteGallery
	class="h-full min-h-96 w-full"
	{images}
	{speed}
	{visibleCount}
/>

Props

InfiniteGallery

Prop	Type	Default
`images`	`ImageItem[]`	`—`
`speed`	`number`	`1`
`visibleCount`	`number`	`8`
`fadeSettings`	`FadeSettings`	`Default Fade`
`blurSettings`	`BlurSettings`	`Default Blur`
`class`	`string`	`""`

FadeSettings

Key	Type	Default
`fadeIn.start`	`number`	`0.05`
`fadeIn.end`	`number`	`0.15`
`fadeOut.start`	`number`	`0.85`
`fadeOut.end`	`number`	`0.95`

BlurSettings

Key	Type	Default
`blurIn.start`	`number`	`0.0`
`blurIn.end`	`number`	`0.1`
`blurOut.start`	`number`	`0.9`
`blurOut.end`	`number`	`1.0`
`maxBlur`	`number`	`3.0`