Motion Core

Pointer

Image Trail

An interactive effect that spawns a trail of images following the cursor with scaling and rotation.

gsap

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add image-trail
npx @motion-core/cli add image-trail
pnpm dlx @motion-core/cli add image-trail
pnpm dlx @motion-core/cli add image-trail
bunx @motion-core/cli add image-trail
bunx @motion-core/cli add image-trail
yarn dlx @motion-core/cli add image-trail
yarn dlx @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

Props

40
600ms
600ms
800ms
30
3.000
260
340
<script lang="ts">
	import { ImageTrail } from "motion-core";

	type Props = {
		mouseThreshold?: number;
		imageLifespan?: number;
		inDuration?: number;
		outDuration?: number;
		baseRotation?: number;
		maxRotationFactor?: number;
		minImageSize?: number;
		maxImageSize?: number;
	};

	const demoImages = [
		"/images/photos/sample-image-12.webp",
		"/images/photos/sample-image-13.webp",
		"/images/photos/sample-image-14.webp",
		"/images/photos/sample-image-15.webp",
		"/images/photos/sample-image-16.webp",
		"/images/photos/sample-image-17.webp",
		"/images/photos/sample-image-18.webp",
	];

	let {
		mouseThreshold = 40,
		imageLifespan = 600,
		inDuration = 600,
		outDuration = 800,
		baseRotation = 30,
		maxRotationFactor = 3,
		minImageSize = 260,
		maxImageSize = 340,
	}: Props = $props();
</script>

<ImageTrail
	images={demoImages}
	class="absolute inset-0 flex h-full w-full items-center justify-center"
	config={{
		mouseThreshold,
		imageLifespan,
		inDuration,
		outDuration,
		baseRotation,
		maxRotationFactor,
		minImageSize,
		maxImageSize,
	}}
/>

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

	type Props = {
		mouseThreshold?: number;
		imageLifespan?: number;
		inDuration?: number;
		outDuration?: number;
		baseRotation?: number;
		maxRotationFactor?: number;
		minImageSize?: number;
		maxImageSize?: number;
	};

	const demoImages = [
		"/images/photos/sample-image-12.webp",
		"/images/photos/sample-image-13.webp",
		"/images/photos/sample-image-14.webp",
		"/images/photos/sample-image-15.webp",
		"/images/photos/sample-image-16.webp",
		"/images/photos/sample-image-17.webp",
		"/images/photos/sample-image-18.webp",
	];

	let {
		mouseThreshold = 40,
		imageLifespan = 600,
		inDuration = 600,
		outDuration = 800,
		baseRotation = 30,
		maxRotationFactor = 3,
		minImageSize = 260,
		maxImageSize = 340,
	}: Props = $props();
</script>

<ImageTrail
	images={demoImages}
	class="absolute inset-0 flex h-full w-full items-center justify-center"
	config={{
		mouseThreshold,
		imageLifespan,
		inDuration,
		outDuration,
		baseRotation,
		maxRotationFactor,
		minImageSize,
		maxImageSize,
	}}
/>

Props

ImageTrail

PropTypeDefault
images
string[] —
class
string ""
config
TrailConfig DEFAULT_CONFIG

TrailConfig

KeyTypeDefault
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