move.gl 0.0.1 → 0.0.2

package/src/jinja/demo_video_overlay.html.jinja

@@ -0,0 +1,155 @@
+{# ============================================================================
+move.gl | Video Overlay Demo
+============================================================================
+Interactive demo for the video overlay component
+============================================================================ #}
+{%- extends "_base.html.jinja" -%}
+
+{%- set title = "Video Overlay Demo — move.gl" -%}
+{%- set description = "Video Overlay Demo — Transparent video overlay with fade effects and alpha channel support." -%}
+{%- set current_demo = "video_overlay" -%}
+
+{%- block header %}
+<header class="page-header">
+    <div class="page-header__badge">TypeScript Component</div>
+    <h1 class="page-header__title">Video Overlay</h1>
+    <p class="page-header__description">
+        A transparent video overlay system with fade effects and HEVC alpha channel support.
+        Perfect for visual effects, transitions, and decorative overlays.
+    </p>
+</header>
+{%- endblock -%}
+
+{%- block content %}
+<section class="section">
+    <h2 class="section__title">Interactive Demo</h2>
+    <p class="section__description">
+        Toggle different overlay effects to see how they work. The checkerboard pattern shows transparency.
+    </p>
+
+    <div class="demo-container" style="background: linear-gradient(135deg, #2d3436 0%, #000000 100%); color: white;">
+        <div class="info-banner"
+            style="background: rgba(102, 126, 234, 0.2); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1.5rem;">
+            <div class="title" style="font-weight: 600; margin-bottom: 0.5rem;">🎬 HEVC Alpha Channel Support</div>
+            <div class="description" style="font-size: 14px; opacity: 0.8;">
+                This component detects and uses HEVC videos with alpha channels when available for true video
+                transparency.
+                <span class="alpha-indicator" id="alphaIndicator">Checking...</span>
+            </div>
+        </div>
+
+        <div class="video-preview" id="videoPreview">
+            <div class="preview-content">
+                <div style="text-align: center;">
+                    <div class="icon">🎥</div>
+                    <div class="text">Background Content</div>
+                </div>
+            </div>
+            <div class="video-overlay" id="videoOverlay">
+                <div class="overlay-effect"></div>
+                <div class="overlay-particles" id="particles"></div>
+            </div>
+        </div>
+
+        <div class="controls-panel">
+            <div class="control-group">
+                <label>Opacity</label>
+                <div class="value" id="opacityValue">100%</div>
+                <input type="range" id="opacitySlider" min="0" max="100" value="100">
+            </div>
+            <div class="control-group">
+                <label>Fade Duration (ms)</label>
+                <div class="value" id="fadeValue">300</div>
+                <input type="range" id="fadeSlider" min="100" max="2000" step="100" value="300">
+            </div>
+            <div class="control-group">
+                <label>Blur Amount (px)</label>
+                <div class="value" id="blurValue">0</div>
+                <input type="range" id="blurSlider" min="0" max="20" value="0">
+            </div>
+        </div>
+
+        <div class="control-group" style="margin-bottom: 1.5rem;">
+            <label>Overlay Effect</label>
+            <div class="effect-buttons">
+                <button class="effect-btn" data-effect="none">None</button>
+                <button class="effect-btn active" data-effect="vignette">Vignette</button>
+                <button class="effect-btn" data-effect="particles">Particles</button>
+                <button class="effect-btn" data-effect="gradient">Gradient</button>
+                <button class="effect-btn" data-effect="scanlines">Scanlines</button>
+            </div>
+        </div>
+
+        <div class="button-row">
+            <button class="btn btn-primary" id="toggleOverlay">Show Overlay</button>
+            <button class="btn btn-secondary" id="fadeInOut">Fade In/Out</button>
+            <button class="btn btn-secondary" id="resetDemo">Reset</button>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Features</h2>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <h4>🎞️ HEVC Alpha Support</h4>
+            <p>Automatic detection and use of HEVC videos with alpha channels.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🌟 Smooth Transitions</h4>
+            <p>Configurable fade in/out with customizable duration.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🎨 Visual Effects</h4>
+            <p>Built-in effects: vignette, particles, gradients, and scanlines.</p>
+        </div>
+        <div class="feature-card">
+            <h4>🖥️ Full Control</h4>
+            <p>Complete API for positioning, opacity, and playback control.</p>
+        </div>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">Usage</h2>
+    <div class="code-block">
+        <code><span class="keyword">import</span> { VideoOverlay } <span class="keyword">from</span> <span class="string">'move.gl'</span>;
+
+<span class="keyword">const</span> overlay = <span class="keyword">new</span> <span class="function">VideoOverlay</span>({
+    containerId: <span class="string">'overlay-container'</span>,
+    videoUrl: <span class="string">'overlay.mp4'</span>,
+    loop: <span class="keyword">true</span>,
+    autoplay: <span class="keyword">true</span>,
+    opacity: <span class="number">0.8</span>,
+    fadeInDuration: <span class="number">500</span>,
+    fadeOutDuration: <span class="number">300</span>
+});
+
+<span class="comment">// Control methods</span>
+overlay.<span class="function">show</span>();
+overlay.<span class="function">hide</span>();
+overlay.<span class="function">setOpacity</span>(<span class="number">0.5</span>);
+overlay.<span class="function">fadeIn</span>(<span class="number">1000</span>);
+overlay.<span class="function">fadeOut</span>(<span class="number">500</span>);
+
+<span class="comment">// Check HEVC alpha support</span>
+<span class="keyword">const</span> supported = VideoOverlay.<span class="function">supportsHevcAlpha</span>();</code>
+    </div>
+</section>
+
+<section class="section">
+    <h2 class="section__title">HEVC Alpha Detection</h2>
+    <div class="code-block">
+        <code><span class="comment">// The component automatically detects HEVC alpha support</span>
+<span class="keyword">if</span> (VideoOverlay.<span class="function">supportsHevcAlpha</span>()) {
+    <span class="comment">// Use HEVC video with alpha channel</span>
+    overlay.<span class="function">setVideoUrl</span>(<span class="string">'overlay-alpha.mov'</span>);
+} <span class="keyword">else</span> {
+    <span class="comment">// Fallback to WebM with alpha or CSS effects</span>
+    overlay.<span class="function">setVideoUrl</span>(<span class="string">'overlay-alpha.webm'</span>);
+}</code>
+    </div>
+</section>
+
+{%- include "partials/_demo_links.html.jinja" %}
+{%- endblock -%}

package/src/jinja/getting-started.html.jinja

@@ -0,0 +1,108 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}Getting Started — move.gl{%- endblock %}
+
+{%- block header %}
+<p class="eyebrow">Documentation</p>
+<h1>Getting Started</h1>
+{%- endblock %}
+
+{%- block content %}
+
+<section>
+    <h2>Installation</h2>
+    <p>Install move.gl via npm:</p>
+    <div class="code-block">npm install move.gl</div>
+</section>
+
+<section>
+    <h2>Import in SCSS</h2>
+    <p>Import move.gl in your main SCSS file:</p>
+    <div class="code-block"><span class="comment">// Import everything</span>
+        @use "move.gl" as *;
+
+        <span class="comment">// Or import specific modules</span>
+        @use "move.gl/mixins/animations" as animations;
+        @use "move.gl/mixins/transitions" as transitions;
+    </div>
+</section>
+
+<section>
+    <h2>Basic Usage</h2>
+    <p>Use the animation mixins in your styles:</p>
+    <div class="code-block"><span class="comment">// Fade animations</span>
+        .fade-element {
+        @include fade-in;
+        }
+
+        .fade-out-element {
+        @include fade-out($duration: 0.3s);
+        }
+
+        <span class="comment">// Slide animations</span>
+        .slide-up {
+        @include slide-up($duration: 0.5s, $distance: 20px);
+        }
+
+        .slide-down {
+        @include slide-down;
+        }
+
+        <span class="comment">// Bounce animations</span>
+        .bouncy {
+        @include bounce($duration: 1s);
+        }
+
+        <span class="comment">// Custom timing</span>
+        .custom {
+        @include fade-in($duration: 0.8s, $timing: ease-out, $delay: 0.2s);
+        }
+    </div>
+</section>
+
+<section>
+    <h2>Utility Classes</h2>
+    <p>Use utility classes directly in your HTML:</p>
+    <div class="code-block">&lt;!-- Fade animations --&gt;
+        &lt;div class="animate-fade-in"&gt;Fades in&lt;/div&gt;
+        &lt;div class="animate-fade-out"&gt;Fades out&lt;/div&gt;
+
+        &lt;!-- Slide animations --&gt;
+        &lt;div class="animate-slide-up"&gt;Slides up&lt;/div&gt;
+        &lt;div class="animate-slide-down"&gt;Slides down&lt;/div&gt;
+        &lt;div class="animate-slide-left"&gt;Slides left&lt;/div&gt;
+        &lt;div class="animate-slide-right"&gt;Slides right&lt;/div&gt;
+
+        &lt;!-- Bounce animations --&gt;
+        &lt;div class="animate-bounce"&gt;Bounces&lt;/div&gt;
+
+        &lt;!-- Zoom animations --&gt;
+        &lt;div class="animate-zoom-in"&gt;Zooms in&lt;/div&gt;
+        &lt;div class="animate-zoom-out"&gt;Zooms out&lt;/div&gt;
+
+        &lt;!-- Flip animations --&gt;
+        &lt;div class="animate-flip-x"&gt;Flips on X axis&lt;/div&gt;
+        &lt;div class="animate-flip-y"&gt;Flips on Y axis&lt;/div&gt;
+    </div>
+</section>
+
+<section>
+    <h2>Animation Delays</h2>
+    <p>Add delays to stagger animations:</p>
+    <div class="code-block">&lt;div class="animate-fade-in delay-100"&gt;Delay 100ms&lt;/div&gt;
+        &lt;div class="animate-fade-in delay-200"&gt;Delay 200ms&lt;/div&gt;
+        &lt;div class="animate-fade-in delay-300"&gt;Delay 300ms&lt;/div&gt;
+        &lt;div class="animate-fade-in delay-500"&gt;Delay 500ms&lt;/div&gt;
+    </div>
+</section>
+
+<section>
+    <h2>Next Steps</h2>
+    <ul>
+        <li><a href="/core-concepts.html">Learn the Core Concepts</a></li>
+        <li><a href="/test_fade.html">Explore Fade Animations</a></li>
+        <li><a href="/test_loaders.html">Check out Loading Animations</a></li>
+    </ul>
+</section>
+
+{%- endblock %}

package/src/jinja/index.html.jinja

@@ -0,0 +1,268 @@
+{% extends "base.html.jinja" %}
+
+{%- block title %}move.gl — Motion & Animation Library{%- endblock %}
+
+{%- block header_class %}header--hero{%- endblock %}
+
+{%- block header %}
+<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>
+{%- endblock %}
+
+{%- block content %}
+
+<!-- Key Features -->
+<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>
+
+<!-- Quick Start -->
+<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>
+        &lt;div class="<span class="class">animate-fade-in</span>"&gt;...&lt;/div&gt;
+        &lt;div class="<span class="class">animate-bounce</span>"&gt;...&lt;/div&gt;
+    </div>
+    <a href="/getting-started.html" class="btn btn--secondary" style="margin-top: 16px;">Full Installation Guide →</a>
+</section>
+
+<!-- Animation Demos -->
+<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>
+
+<!-- Documentation Sections -->
+<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>
+
+<!-- Accessibility -->
+<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>
+
+{%- endblock %}

package/src/jinja/index.json

@@ -0,0 +1,5 @@
+{
+    "name": "move.gl",
+    "version": "0.0.1",
+    "description": "Motion and Animation Library"
+}