<script>
// based on: https://codesandbox.io/s/framer-motion-2-animatesharedlayout-animate-between-different-components-dy0bv?from-embed
// usually this import strategy should work:
//import {AnimateSharedLayout,Motion} from "svelte-motion";
import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
import AnimateSharedLayout from 'svelte-motion/src/components/AnimateSharedLayout/AnimateSharedLayout.svelte';
const colors = ["#ff0055", "#0099ff", "#22cc88", "#ffaa00"];
let selected = colors[0];
const spring = {
type: "spring",
stiffness: 500,
damping: 30
};
</script>
<style>
:global(*) {
box-sizing: border-box;
}
.background{
background:linear-gradient(250deg, rgb(50,50,255), rgb(150,150,250));;
display:flex;
height:100%;
justify-content:center;
align-items:center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 280px;
height: 280px;