Smooth Cursor

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { motion, useSpring } from "motion-sv";
4	import type { Snippet } from "svelte";
5 
6	interface Position {
7		x: number;
8		y: number;
9	}
10 
11	interface SmoothCursorProps {
12		cursor?: Snippet;
13		springConfig?: {
14			damping: number;
15			stiffness: number;
16			mass: number;
17			restDelta: number;
18		};
19	}
20 
21	let {
22		cursor,
23		springConfig = {
24			damping: 45,
25			stiffness: 400,
26			mass: 1,
27			restDelta: 0.001,
28		},
29	}: SmoothCursorProps = $props();
30 
31	let isMoving = $state(false);
32	let lastMousePos = $state<Position>({ x: 0, y: 0 });
33	let velocity = $state<Position>({ x: 0, y: 0 });
34	let lastUpdateTime = $state(Date.now());
35	let previousAngle = $state(0);
36	let accumulatedRotation = $state(0);
37 
38	let cursorX = $derived(useSpring(0, springConfig));
39	let cursorY = $derived(useSpring(0, springConfig));
40	let rotation = $derived(
41		useSpring(0, {
42			...springConfig,
43			damping: 60,
44			stiffness: 300,
45		})
46	);
47	let scale = $derived(
48		useSpring(1, {
49			...springConfig,
50			damping: 35,
51			stiffness: 500,
52		})
53	);
54 
55	onMount(() => {
56		const updateVelocity = (currentPos: Position) => {
57			const currentTime = Date.now();
58			const deltaTime = currentTime - lastUpdateTime;
59 
60			if (deltaTime > 0) {
61				velocity = {
62					x: (currentPos.x - lastMousePos.x) / deltaTime,
63					y: (currentPos.y - lastMousePos.y) / deltaTime,
64				};
65			}
66 
67			lastUpdateTime = currentTime;
68			lastMousePos = currentPos;
69		};
70 
71		const smoothMouseMove = (e: MouseEvent) => {
72			let currentPos: Position = { x: e.clientX, y: e.clientY };
73			updateVelocity(currentPos);
74 
75			const speed = Math.sqrt(Math.pow(velocity.x, 2) + Math.pow(velocity.y, 2));
76 
77			cursorX.set(currentPos.x);
78			cursorY.set(currentPos.y);
79 
80			if (speed > 0.1) {
81				const currentAngle = Math.atan2(velocity.y, velocity.x) * (180 / Math.PI) + 90;
82 
83				let angleDiff = currentAngle - previousAngle;
84				if (angleDiff > 180) angleDiff -= 360;
85				if (angleDiff < -180) angleDiff += 360;
86				accumulatedRotation += angleDiff;
87				rotation.set(accumulatedRotation);
88				previousAngle = currentAngle;
89 
90				scale.set(0.95);
91				isMoving = true;
92 
93				const timeout = setTimeout(() => {
94					scale.set(1);
95					isMoving = false;
96				}, 150);
97 
98				return () => clearTimeout(timeout);
99			}
100		};
101 
102		let rafId: number;
103		const throttledMouseMove = (e: MouseEvent) => {
104			if (rafId) return;
105 
106			rafId = requestAnimationFrame(() => {
107				smoothMouseMove(e);
108				rafId = 0;
109			});
110		};
111 
112// … truncated