Magic Mouse Windows: Scroll

footer text-align: center; padding: 2rem; font-size: 0.85rem; background: #05070a; color: #6c7a91;

/* 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);

<section class="scene scene-4" id="scene4"> <div class="card" id="card4"> <h2>📌 Pin it!</h2> <p>This scene uses ScrollMagic's native pinning — the content stays fixed while background shifts, then releases. Smooth on Windows mouse.</p> <div id="pinCounter" style="font-size: 2rem; font-weight: 800; color:#ff6a3d;">0%</div> <p>Scroll progress inside pinned area</p> <div class="badge">end of main journey — infinite possibilities</div> </div> </section> scroll magic mouse windows

/* spacer for dramatic effect */ .spacer-message font-size: 1rem; text-align: center; margin-top: 2rem; opacity: 0.7;

<div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> footer text-align: center; padding: 2rem; font-size: 0

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>

/* specific animated elements inside scenes */ .rotate-icon font-size: 4rem; display: inline-block; margin-bottom: 1rem; footer text-align: center

/* each scene panel */ .scene min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; will-change: transform;