/* custom scrollbar for windows (just aesthetic) */ ::-webkit-scrollbar width: 8px; ::-webkit-scrollbar-track background: #1a1e26; ::-webkit-scrollbar-thumb background: #ff6a3d; border-radius: 10px; ::-webkit-scrollbar-thumb:hover background: #ff8c5a;
/* specific animated elements inside scenes */ .rotate-icon font-size: 4rem; display: inline-block; margin-bottom: 1rem; scroll magic mouse windows
/* ensure scenes look distinct */ .scene-1 background: radial-gradient(circle at 20% 30%, #10131c, #030507); .scene-2 background: radial-gradient(circle at 80% 70%, #121824, #020408); .scene-3 background: radial-gradient(circle at 40% 50%, #0f1420, #010101); .scene-4 background: radial-gradient(circle at 70% 20%, #1a142b, #02010a); /* custom scrollbar for windows (just aesthetic) */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>ScrollMagic Masterpiece | Smooth Scroll Animations for Windows Mouse</title> <!-- Google Fonts & basic reset --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,500;14..32,700&display=swap" rel="stylesheet"> <style> * margin: 0; padding: 0; box-sizing: border-box; ::-webkit-scrollbar-track background: #1a1e26
p font-size: 1.2rem; line-height: 1.5; font-weight: 300; color: #cdd9ff;
.badge display: inline-block; background: #ff6a3d20; padding: 0.3rem 1rem; border-radius: 40px; font-size: 0.85rem; font-weight: 500; color: #ff8c5a; margin-top: 1rem; border: 0.5px solid #ff6a3d60;
<script> (function() Perfect for Windows mouse wheel & smooth GSAP transitions"); )(); </script> </body> </html>