miles/miles-web
1
0
Fork 0
mirror of https://github.com/mileswolfallen2/miles-web.git synced 2026-09-08 11:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement custom cursor effects across multiple project pages

Browse Source
This commit is contained in:
miles
2026-07-25 21:42:54 -05:00
parent cd0ecda8f9
commit 2e68953295
11 changed files with 233 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/music-app.html
+21 -7
View File
@@ -9,18 +9,14 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="blob-field">
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
</div>
<div class="noise"></div>
<div class="cursor-dot" id="cursorDot"></div>
<div class="cursor-ring" id="cursorRing"></div>
<div class="flash" id="flash"></div>
<div class="toast-stack" id="toastStack"></div>
<nav class="mobile-nav">
<a href="../index.html">Home</a>
<a href="fedl.html">FEDL</a>
<a href="omniemu.html">OmniEmu</a>
<a href="music-app.html" class="active">Music App</a>
<a href="https://github.com/mileswolfallen2" target="_blank">GitHub</a>
</nav>
@@ -266,5 +262,23 @@
}
})();
</script>
<script>
(function(){
var dot=document.getElementById('cursorDot');
var ring=document.getElementById('cursorRing');
if(!dot||!ring)return;
var mx=0,my=0,rx=0,ry=0;
document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;dot.style.left=mx+'px';dot.style.top=my+'px';});
(function loop(){
rx+=(mx-rx)*0.15;ry+=(my-ry)*0.15;
ring.style.left=rx+'px';ring.style.top=ry+'px';
requestAnimationFrame(loop);
})();
document.querySelectorAll('a,button,.meta-chip,.tech-badge,.feature-card').forEach(function(el){
el.addEventListener('mouseenter',function(){dot.classList.add('hover');ring.classList.add('hover');});
el.addEventListener('mouseleave',function(){dot.classList.remove('hover');ring.classList.remove('hover');});
});
})();
</script>
</body>
</html>