move.gl 0.0.1 → 0.0.2

package/src/scss/functions/_index.scss

@@ -0,0 +1,22 @@
+// ============================================================================
+// move.gl | Functions Index
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Functions Module Index
+/// ===========================================================================
+///
+/// This module consolidates all SCSS functions for animation calculations,
+/// easing, timing, and scene generation.
+///
+/// @group Functions
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+@forward "scenes";

package/src/scss/functions/scenes/_bubble.scss

@@ -0,0 +1,32 @@
+// ============================================================================
+// move.gl | Bubble Scene
+// ============================================================================
+// A bubble animation scene with a gradient background.
+// Use the mixin to apply these styles to a specific container.
+// ============================================================================
+
+///
+/// Bubble Scene Mixin
+/// Applies the bubble scene styling to a container.
+///
+/// @param {Color} $bg-start [#ffd2c1] - Start color of gradient
+/// @param {Color} $bg-end [#f9d0d3] - End color of gradient
+///
+@mixin bubble_scene($bg-start: #ffd2c1, $bg-end: #f9d0d3) {
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+    background: linear-gradient(135deg, $bg-start, $bg-end);
+
+    .scene {
+        position: absolute;
+        width: 100%;
+        height: 100vh;
+    }
+}

package/src/scss/functions/scenes/_index.scss

@@ -0,0 +1,21 @@
+// ============================================================================
+// move.gl | Scenes Functions Index
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Scenes Functions Module
+/// ===========================================================================
+///
+/// This module provides functions for generating animated scene elements.
+///
+/// @group Functions
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+@forward "bubble";

package/src/scss/index.scss

@@ -0,0 +1,17 @@
+
+
+
+@forward "functions";
+@forward "variables";
+@forward "maps";
+@forward "mixins";
+@forward "classes";
+
+
+// Development Utilities
+// ============================================================================
+// Importing development-specific styles for debugging or development phase
+// enhancements.
+
+@use "dev/banner" as *;      // Development banner for branding or notices.
+@include banner(""); // Including the development banner with a custom message.

package/src/scss/maps/_controls.scss

@@ -0,0 +1,85 @@
+////
+///
+/// Controls Maps Module
+/// =========================================================================
+///
+/// Maps for controls including cursor styles.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Cursor Styles Map
+// ============================================================================
+
+/// Cursor Styles Map
+/// ---------------------------------------------------------------------------
+/// A map defining standard cursor styles for easy reference and extensibility.
+/// Allows for uniform application of cursor styles across elements.
+///
+/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+///
+$cursor_styles: (
+
+    // General
+    "auto": auto,
+    "default": default,
+    "none": none,
+
+    // Links & Status
+    "context-menu": context-menu,
+    "help": help,
+    "pointer": pointer,
+    "progress": progress,
+    "wait": wait,
+
+    // Selection
+    "cell": cell,
+    "crosshair": crosshair,
+    "text": text,
+    "vertical-text": vertical-text,
+
+    // Drag & drop
+    "alias": alias,
+    "copy": copy,
+    "move": move,
+    "no-drop": no-drop,
+    "not-allowed": not-allowed,
+    "grab": grab,
+    "grabbing": grabbing,
+
+    // Resizing & Scrolling
+    "all-scroll": all-scroll,
+    "col-resize": col-resize,
+    "row-resize": row-resize,
+    "n-resize": n-resize,
+    "e-resize": e-resize,
+    "s-resize": s-resize,
+    "w-resize": w-resize,
+    "ne-resize": ne-resize,
+    "nw-resize": nw-resize,
+    "se-resize": se-resize,
+    "sw-resize": sw-resize,
+    "ew-resize": ew-resize,
+    "ns-resize": ns-resize,
+    "nesw-resize": nesw-resize,
+    "nwse-resize": nwse-resize,
+
+    // Zooming
+    "zoom-in": zoom-in,
+    "zoom-out": zoom-out,
+
+    // Aliases
+    "disabled": not-allowed,
+    "resize-vertical": ns-resize,
+    "resize-horizontal": ew-resize,
+    "resize-diagonal-1": nwse-resize,
+    "resize-diagonal-2": nesw-resize,
+
+);

package/src/scss/maps/_index.scss

@@ -0,0 +1,22 @@
+////
+///
+/// Maps Module Index
+/// =========================================================================
+///
+/// Central index for all map definitions used throughout the project.
+/// Maps provide structured data for cursors, animations, and other modules.
+///
+/// @group Maps
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Forwards
+// ============================================================================
+
+@forward "controls";

package/src/scss/mixins/_accessibility.scss

@@ -0,0 +1,91 @@
+////
+///
+/// Transitions Mixin Module
+/// ===========================================================================
+///
+/// This module ...
+///
+///
+/// @group Transitions
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+// @use "../../mixins" as *; // Removed to avoid circular dependency
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+/// Set the progress cursor for elements with `aria-busy="true"`.
+[aria-busy='true'] {
+    cursor: progress;
+}
+
+/// Set the pointer cursor for elements that control other elements, indicated
+/// by `aria-controls`.
+[aria-controls] {
+    cursor: pointer;
+}
+
+/// Set the default cursor for disabled or non-interactive elements, indicated
+/// by `aria-disabled="true"`.
+[aria-disabled='true'] {
+    cursor: default;
+}
+
+
+
+
+
+// Accessibility Enhancements
+// Using ARIA attributes to improve cursor semantics for better user experience
+// in assistive technologies and for users with disabilities.
+
+/// Mixin to apply cursor styles based on ARIA attributes.
+/// @param {String} $property - The ARIA property (without 'aria-' prefix).
+/// @param {String} $value - The value of the ARIA property.
+/// @param {String} $cursor - The cursor style to apply.
+///
+@mixin cursor_style($property, $value, $cursor) {
+    [#{'aria-' + $property}='#{ $value }'] {
+        cursor: $cursor;
+    }
+}
+
+/// Progress cursor for elements that are updating or being processed.
+/// Applied to `aria-busy="true"` elements.
+/// @group Accessibility
+@include cursor_style('busy', 'true', progress);
+
+/// Pointer cursor for interactive elements that control other elements.
+/// Applied to elements with the `aria-controls` attribute.
+/// @group Accessibility
+@include cursor_style('controls', '', pointer);
+
+/// Default cursor for elements that are disabled or non-interactive.
+/// Applied to `aria-disabled="true"` elements.
+/// @group Accessibility
+@include cursor_style('disabled', 'true', default);
+
+/// Not-allowed cursor for elements in an invalid state.
+/// Example use case: form inputs with `aria-invalid="true"`.
+/// @group Accessibility
+@include cursor_style('invalid', 'true', not-allowed);
+
+/// Help cursor for elements that provide additional information or guidance.
+/// Example use case: elements with `aria-haspopup="true"`.
+/// @group Accessibility
+@include cursor_style('haspopup', 'true', help);

package/src/scss/mixins/_boot.scss

@@ -0,0 +1,51 @@
+
+
+@use "../../variables" as *;
+// @use "../../mixins" as *; // Removed to avoid circular dependency
+
+/// Apply a fade-in animation to the `body` element using the `$boot-fadein-time` variable for the duration.
+/// This animation smoothly transitions the opacity of the `body` from `$boot-fadein-opacity-start` to `$boot-fadein-opacity-end`.
+/// @group Animation
+///
+body {
+  -webkit-animation: fadein $boot-fadein-time;
+     -moz-animation: fadein $boot-fadein-time;
+      -ms-animation: fadein $boot-fadein-time;
+       -o-animation: fadein $boot-fadein-time;
+          animation: fadein $boot-fadein-time;
+}
+
+/// Keyframes for the `fadein` animation, transitioning opacity from `$boot-fadein-opacity-start` to `$boot-fadein-opacity-end`.
+/// @group Animation
+@keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Webkit-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-webkit-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Mozilla-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-moz-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Microsoft-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-ms-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}
+
+/// Opera-specific keyframes for the `fadein` animation.
+/// @group Animation
+@-o-keyframes fadein {
+  from { opacity: $boot-fadein-opacity-start; }
+  to   { opacity: $boot-fadein-opacity-end; }
+}

package/src/scss/mixins/_index.scss

@@ -0,0 +1,41 @@
+// ============================================================================
+// move.gl | Mixins Index
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Mixins Module Index
+/// =========================================================================
+///
+/// Consolidates all mixin submodules for the move.gl animation and motion
+/// library. Organized by functional category:
+///
+/// - animations: Animation effect mixins (bounce, fade, spin, etc.)
+/// - controls: User interaction (cursor, hover, scroll, touch, keyboard)
+/// - effects: Visual effects (shadow, opacity, filter, gradient)
+/// - keyframes: CSS @keyframes definitions
+/// - loaders: Loading indicators and spinners
+/// - transforms: CSS transform utilities
+/// - transitions: CSS transition utilities
+///
+/// @group Mixins
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Forward Modules
+// ============================================================================
+
+@forward "animations";
+@forward "controls";
+@forward "effects";
+@forward "loaders";
+@forward "transforms";
+@forward "transitions";
+@forward "screensaver";

package/src/scss/mixins/_screensaver.scss

@@ -0,0 +1,228 @@
+// ============================================================================
+// move.gl | Screensaver Component Mixins
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Screensaver Component Mixins
+/// ===========================================================================
+///
+/// This module provides mixins for creating screensaver UI components.
+///
+/// @group Components
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../variables" as *;
+
+
+// ============================================================================
+// Screensaver Container Mixins
+// ============================================================================
+
+///
+/// Main screensaver overlay.
+///
+@mixin screensaver_container {
+    position: fixed;
+    inset: 0;
+    z-index: var(--screensaver-z-index, $screensaver-z-index);
+    background: var(--screensaver-bg, $screensaver-bg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--screensaver-fade, $screensaver-fade) ease,
+                visibility var(--screensaver-fade, $screensaver-fade) ease;
+}
+
+///
+/// Active screensaver state.
+///
+@mixin screensaver_active {
+    opacity: 1;
+    visibility: visible;
+}
+
+
+// ============================================================================
+// Screensaver Content Mixins
+// ============================================================================
+
+///
+/// Screensaver content wrapper.
+///
+@mixin screensaver_content {
+    text-align: center;
+    color: var(--screensaver-color, $screensaver-color);
+}
+
+///
+/// Screensaver icon.
+///
+@mixin screensaver_icon {
+    font-size: var(--screensaver-icon-size, $screensaver-icon-size);
+    margin-bottom: 1rem;
+    animation: screensaver-float 3s ease-in-out infinite;
+}
+
+///
+/// Screensaver title.
+///
+@mixin screensaver_title {
+    font-size: var(--screensaver-title-size, $screensaver-title-size);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+///
+/// Screensaver hint/subtitle.
+///
+@mixin screensaver_hint {
+    font-size: var(--screensaver-hint-size, $screensaver-hint-size);
+    opacity: 0.8;
+}
+
+
+// ============================================================================
+// Screensaver Animation Mixins
+// ============================================================================
+
+///
+/// Float animation for screensaver icon.
+///
+/// @param {Length} $distance [-20px] - Float distance.
+/// @param {Time} $duration [3s] - Animation duration.
+///
+@mixin keyframes_screensaver_float($distance: -20px, $duration: 3s) {
+    @keyframes screensaver-float {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY($distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Screensaver Video Mixins
+// ============================================================================
+
+///
+/// Video element for screensaver.
+///
+@mixin screensaver_video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+///
+/// Video overlay (dark tint).
+///
+@mixin screensaver_video_overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+}
+
+///
+/// Gradient overlay for screensaver.
+///
+@mixin screensaver_gradient_overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        135deg,
+        var(--screensaver-gradient-start, #667eea) 0%,
+        var(--screensaver-gradient-end, #764ba2) 100%
+    );
+    opacity: var(--screensaver-overlay-opacity, 1);
+}
+
+
+// ============================================================================
+// Screensaver Theme Mixins
+// ============================================================================
+
+///
+/// Dark theme screensaver.
+///
+@mixin screensaver_dark {
+    --screensaver-bg: #000000;
+    --screensaver-color: #ffffff;
+}
+
+///
+/// Light theme screensaver.
+///
+@mixin screensaver_light {
+    --screensaver-bg: #f0f0f0;
+    --screensaver-color: #333333;
+}
+
+///
+/// Gradient background screensaver.
+///
+@mixin screensaver_gradient {
+    --screensaver-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+
+// ============================================================================
+// Screensaver Bounce Effect
+// ============================================================================
+
+///
+/// Bouncing element for screensaver (DVD logo style).
+///
+@mixin screensaver_bounce {
+    position: absolute;
+    animation: screensaver-bounce-x linear infinite,
+               screensaver-bounce-y linear infinite;
+}
+
+///
+/// Horizontal bounce keyframes.
+///
+@mixin keyframes_screensaver_bounce_x($duration: 7s) {
+    @keyframes screensaver-bounce-x {
+        0%, 100% {
+            left: 0;
+        }
+        50% {
+            left: calc(100% - 100px);
+        }
+    }
+}
+
+///
+/// Vertical bounce keyframes.
+///
+@mixin keyframes_screensaver_bounce_y($duration: 5s) {
+    @keyframes screensaver-bounce-y {
+        0%, 100% {
+            top: 0;
+        }
+        50% {
+            top: calc(100% - 100px);
+        }
+    }
+}
+