<script lang="ts">
	import { onMount } from 'svelte';

	let cursor: HTMLDivElement;

	type pos = {
		x: number;
		y: number;
	};

	let disabled = false;
	let rawPosition: pos = { x: 0, y: -100 };
	let position: pos = { x: 0, y: 0 };

	onMount(() => {
		window.addEventListener('mousemove', (e) => {
			rawPosition = { x: e.clientX, y: e.clientY };
		});
		window.addEventListener('touchstart', (e) => {
			cursor.style.display = 'none';
			disabled = true;
		});
		const loop = () => {
			if (disabled) return;
			position.x += (rawPosition.x - position.x) / 12;
			position.y += (rawPosition.y - position.y) / 12;
			cursor.style.top = `${position.y}px`;
			cursor.style.left = `${position.x}px`;
			cursor.style.rotate = `rotate(${position.x}deg)`;
			requestAnimationFrame(loop);
		};
		loop();
	});
</script>

<div class="cursor" bind:this={cursor}></div>

<style lang="scss">
	.cursor {
		position: fixed;
		top: -100px;
		left: 0px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #ffffff;
		pointer-events: none;
		z-index: 999;
		mix-blend-mode: difference;
		transform: translate(-50%, -50%);
	}
</style>
