Canvas

Interactive Grid

Physics-based grid simulation that distorts an image in response to cursor movement. Each grid cell tracks mouse velocity and decays back to rest over time.

Preview

Physics-based grid simulation — move your cursor over the image to warp it. Each cell tracks mouse velocity and relaxes back to rest.

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/interactive-grid.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/interactive-grid.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/interactive-grid.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/interactive-grid.json

Usage

---
import "@/components/motion-kit/interactive-grid-element.ts";
---

<motion-interactive-grid
  src="/path/to/image.jpg"
  grid={15}
  mouse-size={0.15}
  strength={0.35}
  relaxation={0.9}
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/interactive-grid-element.ts";

export default function Page() {
  return (
    <motion-interactive-grid
      src="/path/to/image.jpg"
      grid={15}
      mouse-size={0.15}
      strength={0.35}
      relaxation={0.9}
      className="w-full h-[500px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/interactive-grid-element.ts";
</script>

<template>
  <motion-interactive-grid
    src="/path/to/image.jpg"
    :grid="15"
    :mouse-size="0.15"
    :strength="0.35"
    :relaxation="0.9"
    class="w-full h-[500px]"
  />
</template>

<script>
  import "@/components/motion-kit/interactive-grid-element.ts";
</script>

<motion-interactive-grid
  src="/path/to/image.jpg"
  grid={15}
  mouse-size={0.15}
  strength={0.35}
  relaxation={0.9}
  class="w-full h-[500px]"
/>

<script type="module" src="/components/motion-kit/interactive-grid-element.js"></script>

<motion-interactive-grid
  src="/path/to/image.jpg"
  grid="15"
  mouse-size="0.15"
  strength="0.35"
  relaxation="0.9"
  class="w-full h-[500px]"
/>

API Reference

Attribute	Type	Default
`src`	`string`
`grid`	`number`	`15`
`mouse-size`	`number`	`0.15`
`strength`	`number`	`0.35`
`relaxation`	`number`	`0.9`