Image Trail

Installation

Install the component

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

npx @motion-core/cli add image-trail

Import the component

Import the component into your Svelte file:

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

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

Usage

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

	const demoImages = [
		"/images/demos/sample-1.jpg",
		"/images/demos/sample-2.jpg",
		"/images/demos/sample-3.jpg",
		"/images/demos/sample-4.jpg",
		"/images/demos/sample-5.jpg",
		"/images/demos/sample-6.jpg",
		"/images/demos/sample-7.jpg",
	];
</script>

<ImageTrail
	images={demoImages}
	class="absolute inset-0 flex h-full w-full items-center justify-center"
/>

Props

ImageTrail

Prop	Type	Default
`images`	`string[]`	`—`
`class`	`string`	`""`
`config`	`TrailConfig`	`DEFAULT_CONFIG`

Config options

Key	Type	Default
`imageLifespan`	`number`	`600`
`removalTickMs`	`number`	`16`
`mouseThreshold`	`number`	`40`
`minMovementForImage`	`number`	`5`
`inDuration`	`number`	`600`
`outDuration`	`number`	`800`
`maxRotationFactor`	`number`	`3`
`baseRotation`	`number`	`30`
`speedSmoothingFactor`	`number`	`0.25`
`minImageSize`	`number`	`260`
`maxImageSize`	`number`	`340`
`staggerOut`	`number`	`40`