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="Video Overlay Demo — Transparent video overlay with fade effects and alpha channel support." /> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" /> <title>Video Overlay Demo — 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> <main class="main"> <div class="container"><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><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> <section class="section"> <h2 class="section__title">More TypeScript Demos</h2> <div class="feature-grid"> <a href="demo_draggable.html" class="feature-card" style="text-decoration: none;"> <h4>🖱️ Draggable</h4> <p>Make any element draggable with mouse and touch support.</p> </a> <a href="demo_gesture.html" class="feature-card" style="text-decoration: none;"> <h4>👆 Gesture Handler</h4> <p>Touch gestures: tap, swipe, pinch, and rotate detection.</p> </a> <a href="demo_keyboard.html" class="feature-card" style="text-decoration: none;"> <h4>⌨️ Virtual Keyboard</h4> <p>Customizable on-screen keyboard with multiple layouts.</p> </a> <a href="demo_screensaver.html" class="feature-card" style="text-decoration: none;"> <h4>🌙 Screensaver</h4> <p>Inactivity-based screensaver with video and audio support.</p> </a> </div> </section> </div> </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>  <script type="module" src="/js/move.gl.js"></script> <script type="module" src="/js/demo.js"></script></body> </html>