canvas

Infinite Gallery

A 3D gallery that endlessly scrolls through textured planes with cloth-like distortion and scroll-driven transitions.

@threlte/core @threlte/extras three

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

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

	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} />

Props

ImageTrail

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

FadeSettings

Key	Type	Default
`fadeIn.start`	`number`	`0.01`
`fadeIn.end`	`number`	`0.25`
`fadeOut.start`	`number`	`0.43`
`fadeOut.end`	`number`	`0.46`

BlurSettings

Key	Type	Default
`blurIn.start`	`number`	`0.0`
`blurIn.end`	`number`	`0.2`
`blurOut.start`	`number`	`0.43`
`blurOut.end`	`number`	`0.46`
`maxBlur`	`number`	`8.0`