src/lib/components/cursor.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    let cursor: HTMLDivElement;
+
+    type position = {
+        x: number;
+        y: number;
+    };
+
+    let disabled = false;
+    let rawPosition: position = { x: 0, y: -100 };
+    let position: position = { 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} />
+
+<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>

src/routes/articles/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import '../app.scss';
+</script>
+
+<slot />

src/routes/threads/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import '../app.scss';
+</script>
+
+<slot />