// usually this import strategy should work:

//import {Motion} from "svelte-motion";

import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';

import { useAnimation } from 'svelte-motion/src/animation/use-animation.js';

const controls = useAnimation();

// grid array 20x20:

const boxes = Array(20 * 20)

.fill()

.map((_, i) => ({ key: i, i: Math.floor(i / 20), j: i % 20 }));

const click = (origin) => async () => {

const delay = (box) =>

Math.sqrt(

Math.pow(box.i - origin.i, 2) +

Math.pow(box.j - origin.j, 2) +

30 * Math.random()

) * 0.03;

// fade out in distorted circular fashion

await controls.start((box) => ({

opacity: 0,

transition: {

delay: delay(box),

},

}));

// distort position

await controls.start((_) => ({

x: (Math.random() - 0.5) * 1000,

y: (Math.random() - 0.5) * 1000,

transition: {

duration: 0.01,

},

}));