refactor: Move old components to old folders, start new website impl

2025-12-15 17:56:59 +01:00
parent 8e736906c1
commit 8ccad90484
21 changed files with 561 additions and 2120 deletions
@@ -0,0 +1,73 @@
+<div class="cursor">
+    <div class="ball ball--small">
+        <svg height="10" width="10">
+            <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
+        </svg>
+    </div>
+    <div class="ball ball--big">
+        <svg height="30" width="30">
+            <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
+        </svg>
+    </div>
+</div>
+
+<script>
+    import { gsap } from "gsap";
+
+    const smallBall = document.querySelector(".cursor > .ball--small");
+    const bigBall = document.querySelector(".cursor >.ball--big");
+    const hoverables = document.querySelectorAll(".hoverable");
+
+    // Listeners
+    document.body.addEventListener("mousemove", onMouseMove);
+    for (let i = 0; i < hoverables.length; i++) {
+        hoverables[i].addEventListener("mouseenter", onMouseHover);
+        hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
+    }
+
+    // Move the cursor
+    function onMouseMove(event: MouseEvent) {
+        gsap.to(bigBall, {
+            duration: 0.4,
+            y: event.clientY - 15,
+            x: event.clientX - 15,
+        });
+        gsap.to(smallBall, {
+            duration: 0.1,
+            x: event.clientX - 5,
+            y: event.clientY - 7,
+        });
+    }
+
+    // Hover an element
+    function onMouseHover() {
+        gsap.to(bigBall, {
+            duration: 0.3,
+            scale: 5,
+        });
+    }
+    function onMouseHoverOut() {
+        gsap.to(bigBall, {
+            duration: 0.3,
+            scale: 1,
+        });
+    }
+</script>
+
+<style>
+    .cursor {
+        pointer-events: none;
+    }
+
+    .ball {
+        position: fixed;
+        top: 0;
+        left: 0;
+        mix-blend-mode: difference;
+        /* z-index: -1; */
+
+        & circle {
+            fill: var(--clr-ts-warm-red);
+        }
+    }
+</style>