<script>
import { spring } from "svelte/motion"
const mouseCoords = spring({ x: 0, y: 0 });
const onMouseMove = (event) => {
$mouseCoords = { x: event.x, y: event.y }
}
</script>
<svelte:window on:mousemove={onMouseMove} />
<div
class="cursor"
style:--x={`${$mouseCoords.x}px`}
style:--y={`${$mouseCoords.y}px`}
/>
<style>
:global(*), :global(body) {
padding: 0;
margin: 0;
height: 130vh;
}
.cursor {
width: 35px;
height: 35px;
border-radius: 50%;
border: 2px solid red;
transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
}
</style>