move.gl 0.0.1 → 0.0.2

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

@@ -0,0 +1,280 @@
+////
+///
+/// Beat Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for beat animations including basic beat, beat with fade,
+/// double beat, heartbeat, pulse beat, and rhythmic patterns. These keyframes
+/// create pulsing or rhythmic effects in UI elements.
+///
+/// @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 Beat Keyframes
+// ============================================================================
+
+///
+/// Standard beat animation - single pulse.
+///
+@mixin keyframes_beat {
+    @include keyframes(beat) {
+        0%, 90% {
+            transform: scale(
+                var(
+                    --animate-scale-base,
+                    #{$animate_scale_base}
+                )
+            );
+        }
+        45% {
+            transform: scale(var(--animate-scale-beat, #{$animate_scale_beat}));
+        }
+    }
+}
+
+///
+/// Beat with fade effect.
+///
+@mixin keyframes_beat_fade {
+    @include keyframes(beat-fade) {
+        0%, 100% {
+            opacity: var(--animate-opacity-fade, #{$animate_opacity_fade});
+            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
+        }
+        50% {
+            opacity: 1;
+            transform: scale(var(--animate-scale-beat-fade, #{$animate_scale_beat_fade}));
+        }
+    }
+}
+
+///
+/// Double beat animation - two quick pulses.
+///
+@mixin keyframes_beat_double {
+    @include keyframes(beat-double) {
+        0%, 100% {
+            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
+        }
+        25% {
+            transform: scale(var(--animate-scale-beat-double-small, #{$animate_scale_beat_double_small}));
+        }
+        50% {
+            transform: scale(var(--animate-scale-beat-double-large, #{$animate_scale_beat_double_large}));
+        }
+        75% {
+            transform: scale(var(--animate-scale-beat-double-small, #{$animate_scale_beat_double_small}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Heartbeat Keyframes
+// ============================================================================
+
+///
+/// Realistic heartbeat animation.
+///
+@mixin keyframes_heartbeat {
+    @include keyframes(heartbeat) {
+        0% { transform: scale(1); }
+        14% { transform: scale($animate_heartbeat_scale_small); }
+        28% { transform: scale(1); }
+        42% { transform: scale($animate_heartbeat_scale_small); }
+        70% { transform: scale(1); }
+        100% { transform: scale(1); }
+    }
+}
+
+///
+/// Fast heartbeat - excited/urgent state.
+///
+@mixin keyframes_heartbeat_fast {
+    @include keyframes(heartbeat-fast) {
+        0% { transform: scale(1); }
+        10% { transform: scale($animate_scale_beat_double_large * 0.76667); }
+        20% { transform: scale(1); }
+        30% { transform: scale($animate_scale_beat_double_large * 0.76667); }
+        50% { transform: scale(1); }
+        100% { transform: scale(1); }
+    }
+}
+
+///
+/// Slow heartbeat - calm/relaxed state.
+///
+@mixin keyframes_heartbeat_slow {
+    @include keyframes(heartbeat-slow) {
+        0% { transform: scale(1); }
+        20% { transform: scale(1.08); }
+        40% { transform: scale(1); }
+        60% { transform: scale(1.08); }
+        100% { transform: scale(1); }
+    }
+}
+
+
+// ============================================================================
+// Pulse Beat Keyframes
+// ============================================================================
+
+///
+/// Pulse beat with opacity change.
+///
+@mixin keyframes_pulse_beat {
+    @include keyframes(pulse-beat) {
+        0%, 100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: scale($animate_heartbeat_scale_small);
+            opacity: $animate_scale_shrink_min;
+        }
+    }
+}
+
+///
+/// Pulse beat with glow effect.
+///
+/// @param {Color} $color [currentColor] - Glow color.
+///
+@mixin keyframes_pulse_beat_glow($color: currentColor) {
+    @include keyframes(pulse-beat-glow) {
+        0%, 100% {
+            transform: scale(1);
+            box-shadow: 0 0 0 0 rgba($color, 0.4);
+        }
+        50% {
+            transform: scale($animate_scale_pulse);
+            box-shadow: 0 0 0 $animate_translate_shake rgba($color, 0);
+        }
+    }
+}
+
+///
+/// Expanding ring pulse for beat effects.
+///
+/// @param {Color} $color [currentColor] - Ring color.
+///
+@mixin keyframes_beat_ring($color: currentColor) {
+    @include keyframes(beat-ring) {
+        0% {
+            box-shadow: 0 0 0 0 rgba($color, 0.6);
+        }
+        100% {
+            box-shadow: 0 0 0 $animate_pulse_ring_size rgba($color, 0);
+        }
+    }
+}
+
+
+// ============================================================================
+// Rhythmic Beat Keyframes
+// ============================================================================
+
+///
+/// Triple beat pattern.
+///
+@mixin keyframes_beat_triple {
+    @include keyframes(beat-triple) {
+        0%, 100% { transform: scale(1); }
+        15% { transform: scale($animate_heartbeat_scale_small); }
+        30% { transform: scale(1); }
+        45% { transform: scale($animate_heartbeat_scale_small); }
+        60% { transform: scale(1); }
+        75% { transform: scale($animate_heartbeat_scale_small); }
+        90% { transform: scale(1); }
+    }
+}
+
+///
+/// Syncopated beat pattern.
+///
+@mixin keyframes_beat_syncopated {
+    @include keyframes(beat-syncopated) {
+        0%, 100% { transform: scale(1); }
+        10% { transform: scale($animate_scale_beat_double_large * 0.76667); }
+        20% { transform: scale(1); }
+        50% { transform: scale($animate_heartbeat_scale_small); }
+        60% { transform: scale(1); }
+        80% { transform: scale($animate_scale_pulse); }
+        90% { transform: scale(1); }
+    }
+}
+
+
+// ============================================================================
+// Parameterized Keyframes (for animations module)
+// ============================================================================
+
+///
+/// Parameterized beat animation keyframes.
+/// @param {Number} $scale - The scale factor for the beat effect.
+///
+@mixin keyframes_animate_beat($scale: $animate_scale_beat) {
+    @keyframes animate_beat {
+        0%, 90% {
+            transform: scale(1);
+        }
+        45% {
+            transform: scale($scale);
+        }
+    }
+}
+
+///
+/// Parameterized beat fade animation keyframes.
+/// @param {Number} $opacity - The opacity at start/end.
+/// @param {Number} $scale - The scale factor.
+///
+@mixin keyframes_animate_beat_fade($opacity: $animate_opacity_fade, $scale: $animate_scale_beat_fade) {
+    @keyframes animate_beat_fade {
+        0%, 100% {
+            opacity: $opacity;
+            transform: scale(1);
+        }
+        50% {
+            opacity: 1;
+            transform: scale($scale);
+        }
+    }
+}
+
+///
+/// Parameterized double beat animation keyframes.
+/// @param {Number} $scale_small - The smaller scale factor.
+/// @param {Number} $scale_large - The larger scale factor.
+///
+@mixin keyframes_animate_beat_double($scale_small: $animate_scale_beat_double_small, $scale_large: $animate_scale_beat_double_large) {
+    @keyframes animate_beat_double {
+        0%, 100% {
+            transform: scale(1);
+        }
+        25% {
+            transform: scale($scale_small);
+        }
+        50% {
+            transform: scale($scale_large);
+        }
+        75% {
+            transform: scale($scale_small);
+        }
+    }
+}

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

@@ -0,0 +1,82 @@
+// ============================================================================
+// move.gl | Blink Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Blink Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for blink animations.
+/// Cursor effects, status indicators, and attention elements.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Blink Keyframes
+/// @name keyframes_animate_blink
+/// @param {Number} $start_opacity [1] - The opacity at start and end.
+/// @param {Number} $blink_opacity [0] - The opacity during the blink.
+///
+@mixin keyframes_animate_blink($start_opacity: 1, $blink_opacity: 0) {
+    @keyframes animate_blink {
+        0%, 100% { opacity: $start_opacity; }
+        50% { opacity: $blink_opacity; }
+    }
+}
+
+
+///
+/// Blink Rapid Keyframes
+/// @name keyframes_animate_blink_rapid
+///
+@mixin keyframes_animate_blink_rapid() {
+    @keyframes animate_blink_rapid {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+    }
+}
+
+
+///
+/// Blink Soft Keyframes
+/// @name keyframes_animate_blink_soft
+///
+@mixin keyframes_animate_blink_soft() {
+    @keyframes animate_blink_soft {
+        0%, 100% { opacity: 1; }
+        50% { opacity: $animate_opacity_blink_soft; }
+    }
+}
+
+
+///
+/// Blink Alternate Keyframes
+/// @name keyframes_animate_blink_alternate
+///
+@mixin keyframes_animate_blink_alternate() {
+    @keyframes animate_blink_alternate {
+        0%, 100% { opacity: 1; }
+        25%, 75% { opacity: 0; }
+    }
+}

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

@@ -0,0 +1,292 @@
+////
+///
+/// Bounce Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for bounce animations including simple bounce, extended
+/// bounce with squash/stretch, rotating bounce, and multi-directional bounce.
+/// These keyframes create playful jumping effects for UI elements.
+///
+/// @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 Bounce Keyframes
+// ============================================================================
+
+///
+/// Standard bounce animation keyframes.
+///
+/// @param {Length} $bounce_height [$animate_bounce_height] - Height of the bounce
+///
+@mixin keyframes_bounce($bounce_height: $animate_bounce_height) {
+    @include keyframes(animate_bounce) {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY($bounce_height);
+        }
+    }
+}
+
+///
+/// Bounce animation with CSS custom property support.
+///
+@mixin keyframes_animate_bounce($bounce_height: $animate_translate_bounce) {
+    @include keyframes(animate_bounce) {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(var(--animate-bounce-height, #{$bounce_height}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Extended Bounce Keyframes
+// ============================================================================
+
+///
+/// Extended bounce with squash and stretch effects.
+///
+/// @param {Number} $start_scale_x [$animate_bounce_start_scale_x] - Initial squash scale X
+/// @param {Number} $start_scale_y [$animate_bounce_start_scale_y] - Initial squash scale Y
+/// @param {Number} $jump_scale_x [$animate_bounce_jump_scale_x] - Jump stretch scale X
+/// @param {Number} $jump_scale_y [$animate_bounce_jump_scale_y] - Jump stretch scale Y
+/// @param {Length} $bounce_height [$animate_bounce_height_extended] - Main bounce height
+/// @param {Number} $land_scale_x [$animate_bounce_land_scale_x] - Landing squash scale X
+/// @param {Number} $land_scale_y [$animate_bounce_land_scale_y] - Landing squash scale Y
+/// @param {Length} $rebound_height [$animate_bounce_rebound] - Secondary bounce height
+///
+@mixin keyframes_bounce_extended(
+    $start_scale_x: $animate_bounce_start_scale_x,
+    $start_scale_y: $animate_bounce_start_scale_y,
+    $jump_scale_x: $animate_bounce_jump_scale_x,
+    $jump_scale_y: $animate_bounce_jump_scale_y,
+    $bounce_height: $animate_bounce_height_extended,
+    $land_scale_x: $animate_bounce_land_scale_x,
+    $land_scale_y: $animate_bounce_land_scale_y,
+    $rebound_height: $animate_bounce_rebound
+) {
+    @include keyframes(animate_bounce_extended) {
+        0% {
+            transform: scale(1, 1) translateY(0);
+        }
+        10% {
+            transform: scale($start_scale_x, $start_scale_y) translateY(0);
+        }
+        30% {
+            transform: scale($jump_scale_x, $jump_scale_y) translateY($bounce_height);
+        }
+        50% {
+            transform: scale($land_scale_x, $land_scale_y) translateY(0);
+        }
+        57% {
+            transform: scale(1, 1) translateY($rebound_height);
+        }
+        64% {
+            transform: scale(1, 1) translateY(0);
+        }
+        100% {
+            transform: scale(1, 1) translateY(0);
+        }
+    }
+}
+
+
+// ============================================================================
+// Bounce with Rotation Keyframes
+// ============================================================================
+
+///
+/// Bounce animation combined with rotation.
+///
+/// @param {Angle} $rotation_angle [360deg] - Rotation angle during bounce
+/// @param {Length} $bounce_height [-20%] - Height of the bounce
+///
+@mixin keyframes_bounce_rotate($rotation_angle: $animate_angle_full, $bounce_height: $animate_bounce_height) {
+    @include keyframes(animate_bounce_rotate) {
+        0%, 100% {
+            transform: translateY(0) rotate(0);
+        }
+        50% {
+            transform: translateY($bounce_height) rotate($rotation_angle);
+        }
+    }
+}
+
+
+// ============================================================================
+// Multi-Directional Bounce Keyframes
+// ============================================================================
+
+///
+/// Bounce in both X and Y directions.
+///
+/// @param {Length} $bounce_x [-10%] - Horizontal bounce distance
+/// @param {Length} $bounce_y [-20%] - Vertical bounce distance
+///
+@mixin keyframes_bounce_multi($bounce_x: $animate_bounce_multi_x, $bounce_y: $animate_bounce_multi_y) {
+    @include keyframes(animate_bounce_multi) {
+        0%, 100% {
+            transform: translate(0, 0);
+        }
+        25% {
+            transform: translate($bounce_x, 0);
+        }
+        50% {
+            transform: translate(0, $bounce_y);
+        }
+        75% {
+            transform: translate($bounce_x, 0);
+        }
+    }
+}
+
+
+// ============================================================================
+// Elastic Bounce Keyframes
+// ============================================================================
+
+///
+/// Elastic bounce with overshoot effect.
+///
+/// @param {Length} $bounce_height [-30%] - Main bounce height
+///
+@mixin keyframes_bounce_elastic($bounce_height: $animate_bounce_elastic_height) {
+    @include keyframes(animate_bounce_elastic) {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        40% {
+            transform: translateY($bounce_height);
+        }
+        50% {
+            transform: translateY($bounce_height * 0.3);
+        }
+        60% {
+            transform: translateY($bounce_height * 0.7);
+        }
+        80% {
+            transform: translateY($bounce_height * 0.15);
+        }
+    }
+}
+
+
+// ============================================================================
+// Entrance/Exit Bounce Keyframes
+// ============================================================================
+
+///
+/// Bounce in from bottom.
+///
+/// @param {Length} $distance [100%] - Starting distance
+///
+@mixin keyframes_bounce_in_up($distance: 100%) {
+    @include keyframes(animate_bounce_in_up) {
+        0% {
+            opacity: 0;
+            transform: translateY($distance);
+        }
+        60% {
+            opacity: 1;
+            transform: translateY(-20px);
+        }
+        80% {
+            transform: translateY(10px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+}
+
+///
+/// Bounce in from top.
+///
+/// @param {Length} $distance [-100%] - Starting distance
+///
+@mixin keyframes_bounce_in_down($distance: -100%) {
+    @include keyframes(animate_bounce_in_down) {
+        0% {
+            opacity: 0;
+            transform: translateY($distance);
+        }
+        60% {
+            opacity: 1;
+            transform: translateY(20px);
+        }
+        80% {
+            transform: translateY(-10px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+}
+
+///
+/// Bounce in from left.
+///
+/// @param {Length} $distance [-100%] - Starting distance
+///
+@mixin keyframes_bounce_in_left($distance: -100%) {
+    @include keyframes(animate_bounce_in_left) {
+        0% {
+            opacity: 0;
+            transform: translateX($distance);
+        }
+        60% {
+            opacity: 1;
+            transform: translateX(20px);
+        }
+        80% {
+            transform: translateX(-10px);
+        }
+        100% {
+            transform: translateX(0);
+        }
+    }
+}
+
+///
+/// Bounce in from right.
+///
+/// @param {Length} $distance [100%] - Starting distance
+///
+@mixin keyframes_bounce_in_right($distance: 100%) {
+    @include keyframes(animate_bounce_in_right) {
+        0% {
+            opacity: 0;
+            transform: translateX($distance);
+        }
+        60% {
+            opacity: 1;
+            transform: translateX(-20px);
+        }
+        80% {
+            transform: translateX(10px);
+        }
+        100% {
+            transform: translateX(0);
+        }
+    }
+}