move.gl 0.0.1 → 0.0.2

package/{scss → dist/scss}/mixins/animations/_blink.scss

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Blink Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides blinking animations for cursor effects, status indicators, and
+/// attention elements. Includes rapid, slow, and fade variants with
+/// customizable opacity levels and timing functions.
+///
 /// @group Animations
 /// @author Scape Agency
 /// @link https://move.gl
 /// @since 0.1.0 initial release
-/// @todo None
 /// @access public
-/// 
+///
 ////
 
 
@@ -24,8 +20,8 @@
 // Use
 // ============================================================================
 
-@use "../dev" as *;
-@use "../variables" as *;
+@use "../../dev" as *;
+@use "../../variables" as *;
 @use "../keyframes" as *;
 @use "base" as *;
 
@@ -37,19 +33,25 @@
 
 ///
 /// Blink Animation
-/// Creates a blink animation where the element alternates between visible and
-/// invisible states.
-/// 
+/// ---------------------------------------------------------------------------
+/// Creates a blink animation where the element alternates between visible
+/// and invisible states.
+///
 /// @name animate_blink
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the blink animation.
-/// @param {String} $timing_function [step-end] - The timing function for the blink animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-/// @param {Number} $start_opacity [1] - The opacity of the element at the start and end of the animation.
-/// @param {Number} $blink_opacity [0] - The opacity of the element during the blink.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [step-end] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+/// @param {Number} $start_opacity [1] - Opacity at start and end
+/// @param {Number} $blink_opacity [0] - Opacity during blink
+///
+/// @example scss - Basic usage
+///   .cursor {
+///     @include animate_blink;
+///   }
 ///
 @mixin animate_blink(
     $duration: $animate_base_duration,
-    $timing_function: step-end, 
+    $timing_function: step-end,
     $iteration_count: $animate_base_iteration_count,
     $start_opacity: 1,
     $blink_opacity: 0
@@ -60,22 +62,25 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_blink {
-        0%, 100% { opacity: $start-opacity; }
-        50% { opacity: $blink-opacity; }
-    }
+    @include keyframes_animate_blink($start_opacity, $blink_opacity);
 }
 
 
 ///
 /// Rapid Blink Animation
+/// ---------------------------------------------------------------------------
 /// Creates a rapid blink animation where the element blinks quickly between
 /// visible and invisible states.
-/// 
+///
 /// @name animate_blink_rapid
-/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the rapid blink animation.
-/// @param {String} $timing_function [steps(2, end)] - The timing function for the rapid blink animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [steps(2, end)] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .alert {
+///     @include animate_blink_rapid;
+///   }
 ///
 @mixin animate_blink_rapid(
     $duration: $animate_base_duration_fast,
@@ -88,22 +93,25 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_blink_rapid {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0; }
-    }
+    @include keyframes_animate_blink_rapid();
 }
 
 
 ///
 /// Soft Blink Animation
+/// ---------------------------------------------------------------------------
 /// Creates a soft blink animation with a smooth transition in and out of
 /// visibility.
-/// 
+///
 /// @name animate_blink_soft
-/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the soft blink animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the soft blink animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .status {
+///     @include animate_blink_soft;
+///   }
 ///
 @mixin animate_blink_soft(
     $duration: $animate_base_duration_slow,
@@ -116,22 +124,25 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_blink_soft {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.3; }
-    }
+    @include keyframes_animate_blink_soft();
 }
 
 
 ///
 /// Alternating Blink Animation
-/// Creates an alternating blink animation where the element blinks at regular
-/// intervals.
-/// 
+/// ---------------------------------------------------------------------------
+/// Creates an alternating blink animation where the element blinks at
+/// regular intervals.
+///
 /// @name animate_blink_alternate
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the alternating blink animation.
-/// @param {String} $timing_function [linear] - The timing function for the alternating blink animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .indicator {
+///     @include animate_blink_alternate;
+///   }
 ///
 @mixin animate_blink_alternate(
     $duration: $animate_base_duration,
@@ -144,8 +155,5 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_blink_alternate {
-        0%, 100% { opacity: 1; }
-        25%, 75% { opacity: 0; }
-    }
+    @include keyframes_animate_blink_alternate();
 }

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

@@ -0,0 +1,306 @@
+////
+///
+/// Bounce Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating bounce animations that make elements
+/// jump up and down with various effects including simple bounce, extended
+/// multi-stage bounce, rotating bounce, and multi-directional bounce.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Bounce Animation
+/// ---------------------------------------------------------------------------
+/// Creates a simple bounce animation where the element moves up and down.
+///
+/// @name animate_bounce
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+/// @param {Length} $bounce_height [$animate_bounce_height] - Height of the bounce
+///
+/// @example scss - Basic usage
+///   .element {
+///     @include animate_bounce;
+///   }
+///
+@mixin animate_bounce(
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce,
+    $iteration_count: $animate_base_iteration_count,
+    $bounce_height: $animate_bounce_height
+) {
+    @include animate_base(
+        animate_bounce,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_bounce($bounce_height);
+}
+
+
+///
+/// Extended Bounce Animation
+/// ---------------------------------------------------------------------------
+/// Creates a more realistic bounce with multiple stages: squash, stretch,
+/// jump, land, and settle phases.
+///
+/// @name animate_bounce_extended
+/// @param {Number} $start_scale_x [1.1] - Initial squash scale X
+/// @param {Number} $start_scale_y [0.9] - Initial squash scale Y
+/// @param {Number} $jump_scale_x [0.9] - Jump stretch scale X
+/// @param {Number} $jump_scale_y [1.1] - Jump stretch scale Y
+/// @param {Length} $bounce_height [$animate_bounce_height_extended] - Main bounce height
+/// @param {Number} $land_scale_x [1.05] - Landing squash scale X
+/// @param {Number} $land_scale_y [0.95] - Landing squash scale Y
+/// @param {Length} $rebound_height [$animate_bounce_rebound] - Secondary bounce height
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_bounce_extended(
+    $start_scale_x: 1.1,
+    $start_scale_y: 0.9,
+    $jump_scale_x: 0.9,
+    $jump_scale_y: 1.1,
+    $bounce_height: $animate_bounce_height_extended,
+    $land_scale_x: 1.05,
+    $land_scale_y: 0.95,
+    $rebound_height: $animate_bounce_rebound,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_bounce_extended,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_bounce_extended(
+        $start_scale_x,
+        $start_scale_y,
+        $jump_scale_x,
+        $jump_scale_y,
+        $bounce_height,
+        $land_scale_x,
+        $land_scale_y,
+        $rebound_height
+    );
+}
+
+
+///
+/// Bounce with Rotation Animation
+/// ---------------------------------------------------------------------------
+/// Creates a bounce animation that includes rotation during the jump phase.
+///
+/// @name animate_bounce_rotate
+/// @param {Angle} $rotation_angle [$animate_angle_full] - Rotation angle during bounce
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Usage
+///   .spinning-ball {
+///     @include animate_bounce_rotate(180deg, 1s);
+///   }
+///
+@mixin animate_bounce_rotate(
+    $rotation_angle: $animate_angle_full,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_bounce_rotate,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_bounce_rotate($rotation_angle);
+}
+
+
+///
+/// Multi-Directional Bounce Animation
+/// ---------------------------------------------------------------------------
+/// Creates a bounce that moves in both X and Y directions for a more
+/// dynamic, chaotic movement.
+///
+/// @name animate_bounce_multi
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+/// @param {Length} $bounce_x [-10%] - Horizontal bounce distance
+/// @param {Length} $bounce_y [-20%] - Vertical bounce distance
+///
+@mixin animate_bounce_multi(
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce,
+    $iteration_count: $animate_base_iteration_count,
+    $bounce_x: -10%,
+    $bounce_y: -20%
+) {
+    @include animate_base(
+        animate_bounce_multi,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_bounce_multi($bounce_x, $bounce_y);
+}
+
+
+///
+/// Elastic Bounce Animation
+/// ---------------------------------------------------------------------------
+/// Creates a bounce with elastic overshoot effect.
+///
+/// @name animate_bounce_elastic
+/// @param {Length} $bounce_height [-30%] - Main bounce height
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_base_timing_function_elastic] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_bounce_elastic(
+    $bounce_height: -30%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function_elastic,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_bounce_elastic,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_bounce_elastic($bounce_height);
+}
+
+
+///
+/// Bounce In Up Animation
+/// ---------------------------------------------------------------------------
+/// Entrance animation that bounces element in from below.
+///
+/// @name animate_bounce_in_up
+/// @param {Length} $distance [100%] - Starting distance
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_bounce_in_up(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_bounce_in_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_bounce_in_up($distance);
+}
+
+
+///
+/// Bounce In Down Animation
+/// ---------------------------------------------------------------------------
+/// Entrance animation that bounces element in from above.
+///
+/// @name animate_bounce_in_down
+/// @param {Length} $distance [-100%] - Starting distance
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_bounce_in_down(
+    $distance: -100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_bounce_in_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_bounce_in_down($distance);
+}
+
+
+///
+/// Bounce In Left Animation
+/// ---------------------------------------------------------------------------
+/// Entrance animation that bounces element in from the left.
+///
+/// @name animate_bounce_in_left
+/// @param {Length} $distance [-100%] - Starting distance
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_bounce_in_left(
+    $distance: -100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_bounce_in_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_bounce_in_left($distance);
+}
+
+
+///
+/// Bounce In Right Animation
+/// ---------------------------------------------------------------------------
+/// Entrance animation that bounces element in from the right.
+///
+/// @name animate_bounce_in_right
+/// @param {Length} $distance [100%] - Starting distance
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [$animate_timing_function_bounce] - Timing function
+///
+@mixin animate_bounce_in_right(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_timing_function_bounce
+) {
+    @include animate_base(
+        animate_bounce_in_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_bounce_in_right($distance);
+}

package/{scss → dist/scss}/mixins/animations/_elastic.scss

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Elastic Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides spring-like elastic animations with overshoot and bounce-back.
+/// Uses cubic-bezier timing for natural, physics-based motion. Ideal for
+/// playful UI interactions and attention-grabbing effects.
+///
 /// @group Animations
 /// @author Scape Agency
 /// @link https://move.gl
 /// @since 0.1.0 initial release
-/// @todo None
 /// @access public
-/// 
+///
 ////
 
 
@@ -24,8 +20,8 @@
 // Use
 // ============================================================================
 
-@use "../dev" as *;
-@use "../variables" as *;
+@use "../../dev" as *;
+@use "../../variables" as *;
 @use "../keyframes" as *;
 @use "base" as *;
 
@@ -37,19 +33,27 @@
 
 ///
 /// Elastic Animation
-/// Creates an elastic animation where the element scales up and down in a spring-like motion.
+/// ---------------------------------------------------------------------------
+/// Creates an elastic animation where the element scales up and down in a
+/// spring-like motion.
+///
 /// @name animate_elastic
-/// @param {Number} $scale-start [0.5] - The starting scale of the element.
-/// @param {Number} $scale-end [1.25] - The scale of the element at the midpoint of the animation.
-/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the elastic animation.
-/// @param {String} $timing_function [cubic-bezier(0.68, -0.55, 0.27, 1.55)] - The timing function for the elastic animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number} $scale-start [0.5] - Starting scale of the element
+/// @param {Number} $scale-end [1.25] - Scale at midpoint of animation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function - Elastic timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .button {
+///     @include animate_elastic;
+///   }
 ///
 @mixin animate_elastic(
-    $scale-start: 0.5, 
-    $scale-end: 1.25, 
+    $scale-start: 0.5,
+    $scale-end: 1.25,
     $duration: $animate_base_duration_slow,
-    $timing_function: cubic-bezier(0.68, -0.55, 0.27, 1.55), 
+    $timing_function: cubic-bezier(0.68, -0.55, 0.27, 1.55),
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(