diff --git a/fet-trick/canvas/canvas-lyrics-player.html b/fet-trick/canvas/canvas-lyrics-player.html
index e83c3a3..8896726 100644
--- a/fet-trick/canvas/canvas-lyrics-player.html
+++ b/fet-trick/canvas/canvas-lyrics-player.html
@@ -61,7 +61,7 @@
 		<canvas id="lyrics-canvas"></canvas>
 	</div>
 	
-	<audio src="../public/02.mp3" controls type="audio/ogg" id="audio-player"></audio>
+	<audio src="../../public/02.mp3" controls type="audio/ogg" id="audio-player"></audio>
 	<script>
 		const lyrics = [
 			{ time: 0, text: "(傷心酒店 city pop)" },
diff --git a/fet-trick/js/1.html b/fet-trick/js/1.html
deleted file mode 100644
index f315c46..0000000
--- a/fet-trick/js/1.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-	<div>1</div>
-	
-</body>
-</html>
diff --git a/fet-trick/js/mouse-hover-effect.html b/fet-trick/js/mouse-hover-effect.html
new file mode 100644
index 0000000..ba3ea5c
--- /dev/null
+++ b/fet-trick/js/mouse-hover-effect.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>MouseHoverEffect</title>
+	<style>
+		*{
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+		html,body{
+			width: 100%;
+			height: 100%;
+			background-color: black;
+			position: relative;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.card{
+			transition: all 0.3s;
+			transform: perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));	
+		}
+		.card:hover{
+			border: 4px solid red;
+			border-radius: 20px;
+		}
+	</style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+	<main>
+		<img class="card" draggable="false" src="https://www.deckofcardsapi.com/static/img/KH.png" alt="KH">
+	</main>
+	<script>
+		const card = document.querySelector('.card');
+		const yRange = [-10,10]
+		const getRange = (range,value,length)=>{
+			return (value / length) * (range[1] - range[0]) + range[0];
+		}
+		card.onmousemove = (e)=>{
+			const x = e.offsetX; 
+			const y = e.offsetY;
+			const width = card.offsetWidth;
+			const height = card.offsetHeight;
+
+			const ry = -getRange(yRange,x,width);
+			const rx = getRange(yRange,y,height);
+
+
+			card.style.setProperty('--rx',rx + 'deg');
+			card.style.setProperty('--ry',ry + 'deg');
+		}
+		card.onmouseleave = ()=>{
+			card.style.setProperty('--rx','0deg');
+			card.style.setProperty('--ry','0deg');
+		}
+
+	</script>
+</body>
+</html>
+
diff --git a/src/types/link.ts b/src/types/link.ts
index 5f4d7be..9c73d9b 100644
--- a/src/types/link.ts
+++ b/src/types/link.ts
@@ -128,8 +128,8 @@ export const jsGroups: Array<Link> = [
     group: Group.Js,
   },
   {
-    routeName: "1",
-    url: "/js/1",
+    routeName: "mouse-hover-effect",
+    url: "/js/mouse-hover-effect",
     group: Group.Js,
   },
 ];
