Refactor font and video sources, add transition and transform to card

assets/css/style.css

@@ -15,6 +15,11 @@ body {
 .particles-js-canvas-el {
   position: fixed;
 }
+.card {
+  transition: transform 0.1s;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
 #title {
   font-family: 'Scriptina';
   font-weight: 800; 
@@ -42,7 +47,7 @@ video#bgvid {
   transform: translate(-50%, -50%);
   text-align: center;
   text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 
-               1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
+  1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
 }
 
 .marqueecontainer {
@@ -66,6 +71,7 @@ select {
   padding: 5px;
   margin: 5px;
   font-size: 16px;
+  z-index: 100;
   font-weight: bold;
 }
 #card {

assets/js/card.js

@@ -1,23 +1,26 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Get the card element
     const card = document.getElementById('card');
     const maxTilt = 10; // Maximum skew in degrees
+    const transitionSpeed = 200; // Transition duration in ms
+
+    // Add transition to the card for smoothness
+    card.style.transition = `transform ${transitionSpeed}ms ease-out`;
 
     document.addEventListener('mousemove', (e) => {
         const { innerWidth, innerHeight } = window;
         const x = e.clientX - innerWidth / 2;
         const y = e.clientY - innerHeight / 2;
-    
-        // Calculate skew angles based on cursor position
-        const skewY = (x / (innerWidth / 2)) * maxTilt; // Left-right
-        const skewX = -(y / (innerHeight / 2)) * maxTilt; // Top-bottom
-    
-        // Apply the skew transform
-        card.style.transform = `skew(${skewX}deg, ${skewY}deg) translate(-50%, -50%)`;
+
+        // Calculate tilt angles based on cursor position
+        const tiltY = (x / (innerWidth / 2)) * maxTilt; // Left-right
+        const tiltX = -(y / (innerHeight / 2)) * maxTilt; // Top-bottom
+
+        // Apply the tilt transform
+        card.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) translate(-50%, -50%)`;
     });
-    
-    // Reset skew when mouse leaves the window
+
+    // Reset tilt when mouse leaves the window
     document.addEventListener('mouseleave', () => {
-        card.style.transform = `skew(0deg, 0deg)`;
+        card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) translate(-50%, -50%)`;
     });
 });

index.html

@@ -49,7 +49,11 @@ <h3 id="latency-test" class="has-text-white is-size-4 has-text-centered">
               </div>
           </div>
         </div>
+
+
       </div>
+
+
       <!-- Mute song and pause -->
       <div class="is-flex is-justify-content-center">
         <button class="button is-dark is-rounded" onclick="mute()">