move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/keyframes/animations/_zoom.scss

@@ -0,0 +1,345 @@
+////
+///
+/// Zoom Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for zoom animations including basic zoom, speed
+/// variations, zoom with effects like fade and rotation. These keyframes
+/// create scaling entrance/exit animations.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+@use "../_base" as *;
+
+
+// ============================================================================
+// Basic Zoom Keyframes
+// ============================================================================
+
+///
+/// Standard zoom effect.
+///
+/// @param {Number} $scale [1.5] - Maximum scale
+///
+@mixin keyframes_zoom($scale: 1.5) {
+    @include keyframes(animate_zoom) {
+        0%, 100% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale($scale);
+        }
+    }
+}
+
+///
+/// Zoom with CSS custom property support.
+///
+@mixin keyframes_animate_zoom($scale: 1.5) {
+    @include keyframes(animate_zoom) {
+        0%, 100% {
+            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
+        }
+        50% {
+            transform: scale(var(--animate-zoom-scale, #{$scale}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Slow Zoom Keyframes
+// ============================================================================
+
+///
+/// Slower, subtler zoom.
+///
+/// @param {Number} $scale [1.3] - Maximum scale
+///
+@mixin keyframes_zoom_slow($scale: 1.3) {
+    @include keyframes(animate_zoom_slow) {
+        0%, 100% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale($scale);
+        }
+    }
+}
+
+
+// ============================================================================
+// Fast Zoom Keyframes
+// ============================================================================
+
+///
+/// Faster, more intense zoom.
+///
+/// @param {Number} $scale [1.7] - Maximum scale
+///
+@mixin keyframes_zoom_fast($scale: 1.7) {
+    @include keyframes(animate_zoom_fast) {
+        0%, 100% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale($scale);
+        }
+    }
+}
+
+
+// ============================================================================
+// Zoom with Fade Keyframes
+// ============================================================================
+
+///
+/// Zoom combined with fade effect.
+///
+/// @param {Number} $scale [1.5] - Maximum scale
+/// @param {Number} $opacity_min [0.5] - Minimum opacity
+///
+@mixin keyframes_zoom_fade($scale: 1.5, $opacity_min: 0.5) {
+    @include keyframes(animate_zoom_fade) {
+        0%, 100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: scale($scale);
+            opacity: $opacity_min;
+        }
+    }
+}
+
+
+// ============================================================================
+// Zoom In Keyframes
+// ============================================================================
+
+///
+/// Zoom in entrance animation.
+///
+/// @param {Number} $start_scale [0.5] - Starting scale
+///
+@mixin keyframes_zoom_in($start_scale: 0.5) {
+    @include keyframes(animate_zoom_in) {
+        from {
+            opacity: 0;
+            transform: scale($start_scale);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}
+
+///
+/// Zoom in from top.
+///
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [100%] - Starting Y position
+///
+@mixin keyframes_zoom_in_down($start_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_in_down) {
+        from {
+            opacity: 0;
+            transform: scale($start_scale) translateY(-$distance);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+}
+
+///
+/// Zoom in from bottom.
+///
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [100%] - Starting Y position
+///
+@mixin keyframes_zoom_in_up($start_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_in_up) {
+        from {
+            opacity: 0;
+            transform: scale($start_scale) translateY($distance);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+}
+
+///
+/// Zoom in from left.
+///
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [100%] - Starting X position
+///
+@mixin keyframes_zoom_in_left($start_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_in_left) {
+        from {
+            opacity: 0;
+            transform: scale($start_scale) translateX(-$distance);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+        }
+    }
+}
+
+///
+/// Zoom in from right.
+///
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [100%] - Starting X position
+///
+@mixin keyframes_zoom_in_right($start_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_in_right) {
+        from {
+            opacity: 0;
+            transform: scale($start_scale) translateX($distance);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+        }
+    }
+}
+
+
+// ============================================================================
+// Zoom Out Keyframes
+// ============================================================================
+
+///
+/// Zoom out exit animation.
+///
+/// @param {Number} $end_scale [0.5] - Ending scale
+///
+@mixin keyframes_zoom_out($end_scale: 0.5) {
+    @include keyframes(animate_zoom_out) {
+        from {
+            opacity: 1;
+            transform: scale(1);
+        }
+        to {
+            opacity: 0;
+            transform: scale($end_scale);
+        }
+    }
+}
+
+///
+/// Zoom out to top.
+///
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [100%] - Ending Y position
+///
+@mixin keyframes_zoom_out_up($end_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_out_up) {
+        from {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+        to {
+            opacity: 0;
+            transform: scale($end_scale) translateY(-$distance);
+        }
+    }
+}
+
+///
+/// Zoom out to bottom.
+///
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [100%] - Ending Y position
+///
+@mixin keyframes_zoom_out_down($end_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_out_down) {
+        from {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+        to {
+            opacity: 0;
+            transform: scale($end_scale) translateY($distance);
+        }
+    }
+}
+
+///
+/// Zoom out to left.
+///
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [100%] - Ending X position
+///
+@mixin keyframes_zoom_out_left($end_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_out_left) {
+        from {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: scale($end_scale) translateX(-$distance);
+        }
+    }
+}
+
+///
+/// Zoom out to right.
+///
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [100%] - Ending X position
+///
+@mixin keyframes_zoom_out_right($end_scale: 0.5, $distance: 100%) {
+    @include keyframes(animate_zoom_out_right) {
+        from {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+        }
+        to {
+            opacity: 0;
+            transform: scale($end_scale) translateX($distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Zoom with Rotation Keyframes
+// ============================================================================
+
+///
+/// Zoom combined with rotation.
+///
+/// @param {Number} $scale [1.5] - Maximum scale
+/// @param {Angle} $rotation [15deg] - Maximum rotation
+///
+@mixin keyframes_zoom_rotate($scale: 1.5, $rotation: 15deg) {
+    @include keyframes(animate_zoom_rotate) {
+        0%, 100% {
+            transform: scale(1) rotate(0deg);
+        }
+        50% {
+            transform: scale($scale) rotate($rotation);
+        }
+    }
+}

package/dist/scss/mixins/loaders/_bars.scss

@@ -0,0 +1,128 @@
+////
+///
+/// Bars Loader Mixins
+/// ===========================================================================
+///
+/// This module provides bar-based loading animation mixins including
+/// wave bars, equalizer bars, and progress bar animations.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+/// Bars wave animation keyframes
+@keyframes loader-bars-wave {
+    0%, 40%, 100% { height: 10px; }
+    20% { height: 30px; }
+}
+
+/// Wave bar animation keyframes
+@keyframes loader-wave-bar {
+    0%, 100% { height: 10px; }
+    50% { height: 30px; }
+}
+
+/// Progress slide animation keyframes
+@keyframes loader-progress-slide {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(350%); }
+}
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Bars wave loader mixin.
+/// Creates animated vertical bars that wave up and down.
+///
+/// @param {Length} $width [6px] - Bar width.
+/// @param {Length} $height [30px] - Maximum bar height.
+/// @param {Color} $color [currentColor] - Bar color.
+/// @param {Time} $duration [1.2s] - Animation duration.
+/// @param {Number} $count [4] - Number of bars.
+///
+@mixin loader_bars($width: 6px, $height: 30px, $color: currentColor, $duration: 1.2s, $count: 4) {
+    display: flex;
+    gap: 4px;
+    height: $height;
+    align-items: flex-end;
+
+    > * {
+        width: $width;
+        background: $color;
+        border-radius: 2px;
+        animation: loader-bars-wave $duration ease-in-out infinite;
+
+        @for $i from 1 through $count {
+            &:nth-child(#{$i}) { animation-delay: #{($i - 1) * 0.1}s; }
+        }
+    }
+}
+
+///
+/// Wave bar loader mixin.
+/// Creates animated horizontal bars with wave effect.
+///
+/// @param {Length} $width [60px] - Container width.
+/// @param {Length} $height [30px] - Container height.
+/// @param {Color} $color [currentColor] - Bar color.
+/// @param {Time} $duration [1s] - Animation duration.
+/// @param {Number} $count [5] - Number of bars.
+///
+@mixin loader_wave_bar($width: 60px, $height: 30px, $color: currentColor, $duration: 1s, $count: 5) {
+    width: $width;
+    height: $height;
+    display: flex;
+    gap: 3px;
+    align-items: center;
+
+    > * {
+        flex: 1;
+        background: $color;
+        border-radius: 2px;
+        animation: loader-wave-bar $duration ease-in-out infinite;
+
+        @for $i from 1 through $count {
+            &:nth-child(#{$i}) { animation-delay: #{($i - 1) * 0.1}s; }
+        }
+    }
+}
+
+///
+/// Progress bar loader mixin.
+/// Creates an indeterminate progress bar animation.
+///
+/// @param {Length} $width [100px] - Bar width.
+/// @param {Length} $height [4px] - Bar height.
+/// @param {Color} $color [currentColor] - Progress color.
+/// @param {Color} $bg [rgba(0,0,0,0.1)] - Track background color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_progress($width: 100px, $height: 4px, $color: currentColor, $bg: rgba(0, 0, 0, 0.1), $duration: 1.5s) {
+    width: $width;
+    height: $height;
+    background: $bg;
+    border-radius: $height * 0.5;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        display: block;
+        width: 40%;
+        height: 100%;
+        background: $color;
+        border-radius: $height * 0.5;
+        animation: loader-progress-slide $duration ease-in-out infinite;
+    }
+}

package/dist/scss/mixins/loaders/_base.scss

@@ -0,0 +1,39 @@
+// ============================================================================
+// move.gl | Loader Base Mixin
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Loader Base Mixin
+/// ===========================================================================
+///
+/// Base loader container mixin that provides common styling for all loaders.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Base Loader Mixin
+// ============================================================================
+
+///
+/// Base loader container mixin.
+/// Provides flexbox centering for loader content.
+///
+/// @example scss - Basic usage
+///   .loader {
+///     @include loader_base;
+///   }
+///
+@mixin loader_base {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}