Motion Core

Canvas

Interactive Grid

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

ogl

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add interactive-grid
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

Props

15
0.150
0.350
0.900
<script lang="ts">
	import { InteractiveGrid } from "motion-core";
	import type { ComponentProps } from "svelte";

	const demoImage = "/images/photos/sample-image-9.webp";
	type Props = Partial<ComponentProps<typeof InteractiveGrid>>;

	let {
		grid = 15,
		mouseSize = 0.15,
		strength = 0.35,
		relaxation = 0.9,
	}: Props = $props();
</script>

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

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

	const demoImage = "/images/photos/sample-image-9.webp";
	type Props = Partial<ComponentProps<typeof InteractiveGrid>>;

	let {
		grid = 15,
		mouseSize = 0.15,
		strength = 0.35,
		relaxation = 0.9,
	}: Props = $props();
</script>

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

Props

InteractiveGrid

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