move.gl 0.0.1 → 0.0.2

package/dist/ts/index.ts

@@ -0,0 +1,58 @@
+// ============================================================================
+// move.gl | Main Entry Point
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+/**
+ * move.gl - Motion & Animation Library
+ *
+ * A comprehensive TypeScript/SCSS library for creating interactive
+ * motion effects, gestures, and animations for web applications.
+ */
+
+// Core Components
+export { Draggable } from './Draggable.js';
+export type { DraggableOptions } from './Draggable.js';
+
+export { Screensaver } from './Screensaver.js';
+export type { ScreensaverOptions } from './Screensaver.js';
+
+export { VirtualKeyboard } from './Keyboard.js';
+export type { KeyboardLayout, VirtualKeyboardOptions } from './Keyboard.js';
+
+export {
+    AdvancedGestureRecognition, TouchGestureHandler
+} from './Gesture.js';
+export type {
+    GestureCallbacks,
+    PointerGestureCallbacks, SwipeDirection
+} from './Gesture.js';
+
+export {
+    getOptimalVideoSource, supportsHEVCAlpha, TransparentVideoOverlay
+} from './VideoOverlay.js';
+export type { VideoOverlayOptions } from './VideoOverlay.js';
+
+// Loader Management
+export { LoaderManager, loaderManager } from './LoaderManager.js';
+export type { LoaderCategory, LoaderConfig, LoaderOptions } from './LoaderManager.js';
+
+// Re-export default classes
+import { Draggable } from './Draggable.js';
+import { AdvancedGestureRecognition, TouchGestureHandler } from './Gesture.js';
+import { VirtualKeyboard } from './Keyboard.js';
+import { LoaderManager } from './LoaderManager.js';
+import { Screensaver } from './Screensaver.js';
+import { TransparentVideoOverlay } from './VideoOverlay.js';
+
+export default {
+    Draggable,
+    LoaderManager,
+    Screensaver,
+    VirtualKeyboard,
+    TouchGestureHandler,
+    AdvancedGestureRecognition,
+    TransparentVideoOverlay,
+};

package/package.json

@@ -1,55 +1,92 @@
 {
-  "name": "move.gl",
-  "version": "0.0.1",
-  "description": "move.gl is a ...",
-  "keywords": [
-    "move.gl",
-    "stylescape"
-  ],
-  "license": "MIT",
-  "homepage": "https://www.move.gl/",
-  "funding": [
-    {
-      "type": "github",
-      "url": "https://github.com/sponsors/scape-foundation"
+    "name": "move.gl",
+    "description": "Motion and Animation Library for Stylescape.",
+    "version": "0.0.2",
+    "config": {
+        "version_short": "0.0"
+    },
+    "keywords": [
+        "move.gl",
+        "stylescape",
+        "animation",
+        "motion",
+        "sass",
+        "css",
+        "transitions",
+        "keyframes"
+    ],
+    "homepage": "https://www.move.gl/",
+    "author": "Lars van Vianen <lars@vianen.com> (https://www.vianen.com)",
+    "contributors": [
+        "Scape Agency <info@scape.agency>"
+    ],
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/stylescape/move.gl.git"
+    },
+    "bugs": {
+        "url": "https://github.com/stylescape/move.gl/issues"
+    },
+    "funding": [
+        {
+            "type": "github",
+            "url": "https://github.com/sponsors/scape-foundation"
+        }
+    ],
+    "type": "module",
+    "main": "./dist/js/index.cjs",
+    "module": "./dist/js/index.mjs",
+    "types": "./dist/js/index.d.ts",
+    "sass": "src/scss/index.scss",
+    "style": "dist/css/move.gl.css",
+    "scripts": {
+        "build": "npx kist --config ./kist.yml && npm run build:ts",
+        "build:ts": "tsup",
+        "watch": "npx kist --config ./kist.yml --live",
+        "dev": "vite"
+    },
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "dependencies": {
+        "hue.gl": "^0.0.36",
+        "unit.gl": "^0.3.1"
+    },
+    "devDependencies": {
+        "@getkist/action-nunjucks": "^2.0.9",
+        "@getkist/action-sass": "^1.0.4",
+        "@types/node": "^25.2.0",
+        "kist": "^0.1.60",
+        "micromatch": "^4.0.8",
+        "nunjucks": "^3.2.4",
+        "sass": "^1.97.3",
+        "serve-static": "^2.2.1",
+        "ts-node": "^10.9.2",
+        "tsup": "^8.5.1",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.1"
+    },
+    "files": [
+        "src/**",
+        "dist/**"
+    ],
+    "exports": {
+        ".": {
+            "sass": "./src/scss/index.scss",
+            "types": "./dist/js/index.d.ts",
+            "import": "./dist/js/index.mjs",
+            "require": "./dist/js/index.cjs"
+        },
+        "./scss": "./dist/scss/index.scss",
+        "./css/move.gl.css": "./dist/css/move.gl.css",
+        "./css/move.gl.min.css": "./dist/css/move.gl.min.css"
+    },
+    "typesVersions": {
+        "*": {
+            "*": [
+                "./ts/index.d.ts"
+            ]
+        }
     }
-  ],
-  "main": "js/index.js",
-  "types": "js/index.d.ts",
-  "files": [
-    "code-snippets/**/*.code-snippets",
-    "css/**/*.{css,map}",
-    "font/**/*.{eot,otf,ttf,woff,woff2}",
-    "inkscape/**/*.inkscape",
-    "jinja/**/*.jinja",
-    "js/**/*.d.ts",
-    "js/**/*.{js,map}",
-    "less/**/*.less",
-    "md/**/*.md",
-    "oco/**/*.oco",
-    "png/**/*.png",
-    "py/**/*.py",
-    "rcpx/**/*.rcpx",
-    "scss/**/*.scss",
-    "sketchpalette/**/*.sketchpalette",
-    "styl/**/*.styl",
-    "svg/**/*.svg",
-    "tex/**/*.tex",
-    "ts/**/*.ts",
-    "!.DS_Store"
-  ],
-  "author": "Lars van Vianen",
-  "contributors": [
-    "Scape Agency"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/stylescape/move.gl.git"
-  },
-  "exports": {
-    ".": {
-      "sass": "./scss/index.scss",
-      "typescript": "./ts/index.scss"
-    }
-  }
-}
+}

package/src/html/_base.html

@@ -0,0 +1,138 @@
+
+<!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>
+
+    <!-- Library CSS -->
+    <link rel="stylesheet" href="/css/move.gl.css" />
+    <!-- Documentation CSS -->
+    <link rel="stylesheet" href="/css/move.gl.docs.css" />
+
+    <!-- Fonts -->
+    <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">        </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>
+
+    <!-- Core Scripts -->
+    <script type="module" src="/js/move.gl.js"></script>
+    <script type="module" src="/js/demo.js"></script></body>
+
+</html>

package/src/html/base.html

@@ -0,0 +1,147 @@
+
+<!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>
+
+    <!-- Library CSS -->
+    <link rel="stylesheet" href="/css/move.gl.css" />
+    <!-- Documentation CSS -->
+    <link rel="stylesheet" href="/css/move.gl.docs.css" />
+
+    <!-- Fonts -->
+    <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="header">            <p class="eyebrow">move.gl</p>
+            <h1>Documentation</h1>        </header>
+
+        <main>            <p>Replace this with your content.</p>        </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>
+
+    <!-- Library JS -->
+    <script type="module" src="/js/move.gl.js"></script>
+    <!-- Demo Scripts -->
+    <script type="module" src="/js/demo.js"></script>
+</body>
+
+</html>