move.gl

<!DOCTYPE html> <html lang="en" data-theme="light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects." /> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" /> <title>move.gl</title>  <link rel="stylesheet" href="/css/move.gl.css" />  <link rel="stylesheet" href="/css/move.gl.docs.css" />  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> </head> <body class=""> <div class="nav-wrapper"> <nav class="nav"> <div class="nav__inner"> <a href="index.html" class="nav__logo"> <span class="nav__logo-text">move.gl</span> <span class="nav__version">v0.0.1</span> </a> <div class="nav__right"> <button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode"> <svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zm7-5a.75.75 0 00-.75-.75h-1.5a.75.75 0 000 1.5h1.5A.75.75 0 0015 8zM3 8a.75.75 0 00-.75-.75H.75a.75.75 0 000 1.5h1.5A.75.75 0 003 8zm9.536-4.536a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 001.06 1.061l1.061-1.06a.75.75 0 000-1.061zm-9.072 9.072a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 101.06 1.061l1.061-1.06a.75.75 0 000-1.061zm9.072 0a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 101.061-1.06l-1.06-1.061zm-9.072-9.072a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 001.061-1.06l-1.06-1.061z" /> </svg> <svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" /> </svg> </button> <div class="nav__dropdown" id="nav-dropdown"> <button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true"> <span>Docs</span> <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M1 1l4 4 4-4" /> </svg> </button> <div class="nav__dropdown-menu" role="menu"> <div class="nav__dropdown-section"> <span class="nav__dropdown-label">Learn</span> <a href="getting-started.html" role="menuitem">Getting Started</a> <a href="core-concepts.html" role="menuitem">Core Concepts</a> </div> <div class="nav__dropdown-section"> <span class="nav__dropdown-label">Overview</span> <a href="test_overview.html" role="menuitem">All Animations</a> </div> <div class="nav__dropdown-section"> <span class="nav__dropdown-label">Animations</span> <a href="test_fade.html" role="menuitem">Fade</a> <a href="test_slide.html" role="menuitem">Slide</a> <a href="test_bounce.html" role="menuitem">Bounce</a> <a href="test_zoom.html" role="menuitem">Zoom</a> <a href="test_flip.html" role="menuitem">Flip</a> <a href="test_scale.html" role="menuitem">Scale</a> <a href="test_spin.html" role="menuitem">Spin & Rotate</a> <a href="test_pulse.html" role="menuitem">Pulse</a> <a href="test_shake.html" role="menuitem">Shake & Wobble</a> <a href="test_attention.html" role="menuitem">Attention</a> <a href="test_special.html" role="menuitem">Special Effects</a> </div> <div class="nav__dropdown-section"> <span class="nav__dropdown-label">Effects</span> <a href="test_loaders.html" role="menuitem">Loaders</a> <a href="test_transitions.html" role="menuitem">Transitions</a> <a href="test_transforms.html" role="menuitem">Transforms</a> <a href="test_effects.html" role="menuitem">Filter Effects</a> <a href="test_keyframes.html" role="menuitem">Keyframes</a> <a href="test_mouse.html" role="menuitem">Mouse Interactions</a> </div> <div class="nav__dropdown-section"> <span class="nav__dropdown-label">TypeScript Demos</span> <a href="demo_draggable.html" role="menuitem">Draggable</a> <a href="demo_gesture.html" role="menuitem">Gesture Handler</a> <a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a> <a href="demo_screensaver.html" role="menuitem">Screensaver</a> <a href="demo_video_overlay.html" role="menuitem">Video Overlay</a> </div> </div> </div> <a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank" title="View on GitHub"> <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /> </svg> </a> </div> </div> </nav> </div> <div class="container"> <header class="headerheader--hero"><p class="eyebrow">Motion & Animation Library</p> <h1>move.gl</h1> <p class="lead">A comprehensive CSS animation and motion library for creating fluid, performant, and accessible motion experiences.</p> <div class="hero-actions"> <a href="/getting-started.html" class="btn btn--primary"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /> </svg> Get Started </a> <a href="https://github.com/stylescape/move.gl" class="btn btn--secondary"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> </svg> View on GitHub </a> </div> </header> <main>  <section> <h2>Features</h2> <div class="feature-grid"> <div class="feature-card"> <div class="feature-card__icon">⟳</div> <h3 class="feature-card__title">Keyframe Animations</h3> <p class="feature-card__desc">Pre-built keyframe animations for fade, slide, bounce, zoom, flip, and more. Ready to use out of the box.</p> </div> <div class="feature-card"> <div class="feature-card__icon">↔</div> <h3 class="feature-card__title">Transitions</h3> <p class="feature-card__desc">Smooth state transitions with customizable timing functions and durations.</p> </div> <div class="feature-card"> <div class="feature-card__icon">◇</div> <h3 class="feature-card__title">Transforms</h3> <p class="feature-card__desc">2D and 3D transform utilities for rotation, scaling, skewing, and translation. </p> </div> <div class="feature-card"> <div class="feature-card__icon">⊚</div> <h3 class="feature-card__title">Loaders</h3> <p class="feature-card__desc">Animated loading indicators: spinners, dots, bars, and custom patterns.</p> </div> <div class="feature-card"> <div class="feature-card__icon">♿</div> <h3 class="feature-card__title">Accessibility</h3> <p class="feature-card__desc">Respects prefers-reduced-motion for users who prefer minimal animations.</p> </div> <div class="feature-card"> <div class="feature-card__icon">⚡</div> <h3 class="feature-card__title">Performance</h3> <p class="feature-card__desc">GPU-accelerated animations using transform and opacity for 60fps smoothness. </p> </div> </div> </section>  <section> <h2>Quick Start</h2> <div class="code-block"><span class="comment">// Install via npm</span> npm install move.gl <span class="comment">// Import in your SCSS</span> @use "move.gl" as *; <span class="comment">// Use animation mixins</span> .element { @include <span class="class">fade-in</span>; } .card { @include <span class="class">slide-up</span>($duration: 0.5s); } <span class="comment">// Or use utility classes directly</span> <div class="<span class="class">animate-fade-in</span>">...</div> <div class="<span class="class">animate-bounce</span>">...</div> </div> <a href="/getting-started.html" class="btn btn--secondary" style="margin-top: 16px;">Full Installation Guide →</a> </section>  <section> <h2>Animation Showcase</h2> <p style="margin-bottom: 24px;"><a href="/test_overview.html" class="btn btn--primary">View All Animations →</a></p> <div class="demo-grid"> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-fade-in-loop"></div> </div> <h3 class="demo-card__title">Fade</h3> <p class="demo-card__desc">Smooth opacity transitions</p> <a href="/test_fade.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-slide-loop"></div> </div> <h3 class="demo-card__title">Slide</h3> <p class="demo-card__desc">Directional sliding animations</p> <a href="/test_slide.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-bounce-loop"></div> </div> <h3 class="demo-card__title">Bounce</h3> <p class="demo-card__desc">Playful bouncing effects</p> <a href="/test_bounce.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-zoom-loop"></div> </div> <h3 class="demo-card__title">Zoom</h3> <p class="demo-card__desc">Scale-based animations</p> <a href="/test_zoom.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-flip-loop"></div> </div> <h3 class="demo-card__title">Flip</h3> <p class="demo-card__desc">3D rotation effects</p> <a href="/test_flip.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-spin-loop"></div> </div> <h3 class="demo-card__title">Spin & Rotate</h3> <p class="demo-card__desc">Continuous rotation</p> <a href="/test_spin.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-pulse-demo"></div> </div> <h3 class="demo-card__title">Pulse</h3> <p class="demo-card__desc">Scale pulsing effects</p> <a href="/test_pulse.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-shake-demo"></div> </div> <h3 class="demo-card__title">Shake & Wobble</h3> <p class="demo-card__desc">Attention-grabbing shakes</p> <a href="/test_shake.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-tada-demo"></div> </div> <h3 class="demo-card__title">Attention</h3> <p class="demo-card__desc">Tada, pop, flash & more</p> <a href="/test_attention.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-float-demo"></div> </div> <h3 class="demo-card__title">Special Effects</h3> <p class="demo-card__desc">Elastic, lightspeed, hinge</p> <a href="/test_special.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="demo-box animate-scale-in-demo"></div> </div> <h3 class="demo-card__title">Scale</h3> <p class="demo-card__desc">Scale entrance & exit</p> <a href="/test_scale.html" class="demo-card__link">View Demo →</a> </div> <div class="demo-card"> <div class="demo-card__preview"> <div class="loader loader--spinner"></div> </div> <h3 class="demo-card__title">Loaders</h3> <p class="demo-card__desc">Loading indicators</p> <a href="/test_loaders.html" class="demo-card__link">View Demo →</a> </div> </div> </section>  <section> <h2>Documentation</h2> <div class="doc-sections"> <div class="doc-section"> <h3>Learn</h3> <ul> <li><a href="/getting-started.html">Getting Started</a></li> <li><a href="/core-concepts.html">Core Concepts</a></li> </ul> </div> <div class="doc-section"> <h3>Overview</h3> <ul> <li><a href="/test_overview.html">All Animations (Looping)</a></li> </ul> </div> <div class="doc-section"> <h3>Animations</h3> <ul> <li><a href="/test_fade.html">Fade Animations</a></li> <li><a href="/test_slide.html">Slide Animations</a></li> <li><a href="/test_bounce.html">Bounce Animations</a></li> <li><a href="/test_zoom.html">Zoom Animations</a></li> <li><a href="/test_flip.html">Flip Animations</a></li> <li><a href="/test_scale.html">Scale Animations</a></li> <li><a href="/test_spin.html">Spin & Rotate</a></li> <li><a href="/test_pulse.html">Pulse & Heartbeat</a></li> <li><a href="/test_shake.html">Shake & Wobble</a></li> <li><a href="/test_attention.html">Attention Seekers</a></li> <li><a href="/test_special.html">Special Effects</a></li> </ul> </div> <div class="doc-section"> <h3>Effects</h3> <ul> <li><a href="/test_loaders.html">Loading Animations</a></li> <li><a href="/test_transitions.html">Transitions</a></li> <li><a href="/test_transforms.html">Transforms</a></li> </ul> </div> </div> </section>  <section> <h2>Accessibility First</h2> <p>move.gl automatically respects the <code>prefers-reduced-motion</code> media query. Users who prefer reduced motion will see static or minimal animations instead.</p> <div class="code-block"><span class="comment">// Built-in reduced motion support</span> @media (prefers-reduced-motion: reduce) { .animate-* { animation: none; transition: none; } } <span class="comment">// Or use the accessibility mixin</span> .element { @include <span class="class">motion-safe</span> { @include fade-in; } } </div> </section> </main> <footer class="footer"> <div class="footer__content"> <div class="footer__left"> <span class="footer__brand">move.gl</span> <span class="footer__tagline">Motion & Animation Library</span> </div> <div class="footer__right"> <div class="footer__links"> <a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a> <a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a> <a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a> </div> <span class="footer__copyright">© 2024 Scape Agency. MIT License.</span> </div> </div> </footer> </div>  <script type="module" src="/js/move.gl.js"></script>  <script type="module" src="/js/demo.js"></script> </body> </html>