Motion Core

canvas

Interactive Grid

A physics-based grid simulation that distorts an image in response to cursor movement.

@threlte/core@threlte/extrasthree

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add interactive-grid

Import the component

Import the component into your Svelte file: 
import { InteractiveGrid } from "$lib/motion-core";
import { InteractiveGrid } from "$lib/motion-core";

Usage

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

	const demoImage = "/images/demos/sample-14.jpg";
</script>

<InteractiveGrid image={demoImage} class="h-full min-h-96 w-full" />

Props

InteractiveGrid

PropTypeDefault
image
string —
grid
number 15
mouseSize
number 0.15
strength
number 0.35
relaxation
number 0.9
class
string ""