Scroll Magic Mouse Windows |link| -
h1 font-size: 4rem; font-weight: 700; background: linear-gradient(135deg, #ffb347, #ff6a3d); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1rem;
/* 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); scroll magic mouse windows
h2 font-size: 2.2rem; font-weight: 500; margin-bottom: 1rem; letter-spacing: -0.01em; h1 font-size: 4rem
<!-- SCENE 1 - Fade & Scale entrance --> <section class="scene scene-1" id="scene1"> <div class="card" id="card1"> <div class="rotate-icon">🌀</div> <h1>ScrollMagic + GSAP</h1> <p>Seamless scroll-driven animations • Perfect on Windows mouse wheel<br>Experience buttery smooth triggers with every tick.</p> <div class="badge">▼ scroll down to unleash magic ▼</div> </div> </section> .scene-2 background: radial-gradient(circle at 80% 70%