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 motion-blocks add interactive-grid

npx motion-blocks add interactive-grid

bunx --bun motion-blocks add interactive-grid

yarn dlx motion-blocks add interactive-grid

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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`