Svelte Spring Magnetic Button

1<script>
2  import { spring } from 'svelte/motion';
3
4  const pos = spring({ x: 0, y: 0 }, { stiffness: 0.12, damping: 0.35 });
5
6  function move(e) {
7    const r = e.currentTarget.getBoundingClientRect();
8    pos.set({
9      x: (e.clientX - r.left - r.width / 2) * 0.35,
10      y: (e.clientY - r.top - r.height / 2) * 0.35,
11    });
12  }
13</script>
14
15<button
16  class="magnet"
17  on:mousemove={move}
18  on:mouseleave={() => pos.set({ x: 0, y: 0 })}
19  style="transform: translate({$pos.x}px, {$pos.y}px)"
20>
21  Zieh mich
22</button>
23
24<style>
25  .magnet {
26    padding: 14px 32px;
27    border: 0;
28    border-radius: 14px;
29    cursor: pointer;
30    background: linear-gradient(120deg, #8b5cf6, #d946ef);
31    color: #fff;
32    font: 600 16px system-ui, sans-serif;
33  }
34  .magnet:focus-visible {
35    outline: 2px solid #c4b5fd;
36    outline-offset: 3px;
37  }
38  @media (prefers-reduced-motion: reduce) {
39    .magnet { transform: none !important; }
40  }
41</style>