Personal Website, vers. 1 (pushed far to late)

client/js/pointer.js

@@ -0,0 +1,30 @@
+// Mouse-only effects: border glow that follows the cursor and buttons that lean towards it
+export function initPointerEffects() {
+  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
+
+  document.addEventListener(
+    'pointermove',
+    (event) => {
+      const element = event.target.closest?.('[data-glow]');
+      if (!element) return;
+      const rect = element.getBoundingClientRect();
+      element.style.setProperty('--mx', `${event.clientX - rect.left}px`);
+      element.style.setProperty('--my', `${event.clientY - rect.top}px`);
+    },
+    { passive: true },
+  );
+
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  for (const element of document.querySelectorAll('[data-magnetic]')) {
+    element.addEventListener('pointermove', (event) => {
+      const rect = element.getBoundingClientRect();
+      const x = (event.clientX - rect.left - rect.width / 2) * 0.2;
+      const y = (event.clientY - rect.top - rect.height / 2) * 0.35;
+      element.style.translate = `${x.toFixed(1)}px ${y.toFixed(1)}px`;
+    });
+    element.addEventListener('pointerleave', () => {
+      element.style.translate = '';
+    });
+  }
+}