move.gl 0.0.1 → 0.0.2

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Tada Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides celebratory "tada" animations with combined scaling and rotation.
+/// Creates exciting reveal effects for achievements and highlights. Perfect
+/// for success states, rewards, and dramatic presentations.
+///
 /// @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,18 +33,24 @@
 
 ///
 /// Tada Animation
+/// ---------------------------------------------------------------------------
 /// Creates a "tada" effect with scaling and rotating.
-/// 
+///
 /// @name animate_tada
-/// @param {Number} $scale [1.1] - The scale factor for the animation.
-/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number} $scale [1.1] - Scale factor for the animation
+/// @param {Time} $duration - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .achievement {
+///     @include animate_tada;
+///   }
 ///
 @mixin animate_tada(
-    $scale: 1.1, 
+    $scale: 1.1,
     $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -81,9 +83,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_tada_slow(
-    $scale: 1.05, 
+    $scale: 1.05,
     $duration: $animate_base_duration_slow * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -115,9 +117,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_tada_fast(
-    $scale: 1.15, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $scale: 1.15,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -148,9 +150,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_tada_fade(
-    $scale: 1.1, 
+    $scale: 1.1,
     $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -160,12 +162,12 @@
         $iteration_count,
     );
     @keyframes animate_tada_fade {
-        0%, 100% { 
-            transform: scale(1); 
+        0%, 100% {
+            transform: scale(1);
             opacity: 1;
         }
-        50% { 
-            transform: scale($scale) rotate(3deg); 
+        50% {
+            transform: scale($scale) rotate(3deg);
             opacity: 0.5;
         }
     }
@@ -178,56 +180,56 @@
 //       -webkit-transform: scale3d(1, 1, 1);
 //       transform: scale3d(1, 1, 1);
 //     }
-  
+
 //     10%, 20% {
 //       -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 //       transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 //     }
-  
+
 //     30%, 50%, 70%, 90% {
 //       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 //       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 //     }
-  
+
 //     40%, 60%, 80% {
 //       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 //       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 //     }
-  
+
 //     100% {
 //       -webkit-transform: scale3d(1, 1, 1);
 //       transform: scale3d(1, 1, 1);
 //     }
 //   }
-  
+
 //   @keyframes tada {
 //     from {
 //       -webkit-transform: scale3d(1, 1, 1);
 //       transform: scale3d(1, 1, 1);
 //     }
-  
+
 //     10%, 20% {
 //       -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 //       transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 //     }
-  
+
 //     30%, 50%, 70%, 90% {
 //       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 //       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 //     }
-  
+
 //     40%, 60%, 80% {
 //       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 //       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 //     }
-  
+
 //     100% {
 //       -webkit-transform: scale3d(1, 1, 1);
 //       transform: scale3d(1, 1, 1);
 //     }
 //   }
-  
+
 //   .tada {
 //     -webkit-animation-name: tada;
 //     animation-name: tada;
-//   }
+//   }

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Twist Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides twisting animations that combine rotation with scale changes.
+/// Creates dynamic, spiraling effects. Useful for loading indicators,
+/// transitions, and attention-grabbing emphasis 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,26 @@
 
 ///
 /// Twist Animation
+/// ---------------------------------------------------------------------------
 /// Creates a twist effect with scaling and rotating.
+///
 /// @name animate_twist
-/// @param {Number} $scale_end [0.9] - The scale factor at the midpoint of the animation.
-/// @param {Angle} $rotation [10deg] - The rotation angle at the midpoint of the animation.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number} $scale_end [0.9] - Scale factor at midpoint of animation
+/// @param {Angle} $rotation [10deg] - Rotation angle at midpoint
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .spinner {
+///     @include animate_twist;
+///   }
 ///
 @mixin animate_twist(
-    $scale_end: 0.9, 
-    $rotation: 10deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $scale_end: 0.9,
+    $rotation: 10deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -58,10 +61,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_twist {
-        0%, 100% { transform: scale(1) rotate(0deg); }
-        50% { transform: scale($scale_end) rotate($rotation); }
-    }
+    @include keyframes_animate_twist($scale_end, $rotation);
 }
 
 
@@ -80,10 +80,10 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_twist_slow(
-    $scale_end: 0.95, 
-    $rotation: 5deg, 
+    $scale_end: 0.95,
+    $rotation: 5deg,
     $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -92,10 +92,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_twist_slow {
-        0%, 100% { transform: scale(1) rotate(0deg); }
-        50% { transform: scale($scale_end) rotate($rotation); }
-    }
+    @include keyframes_animate_twist_slow($scale_end, $rotation);
 }
 
 
@@ -114,10 +111,10 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_twist_fast(
-    $scale_end: 0.85, 
-    $rotation: 15deg, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out, 
+    $scale_end: 0.85,
+    $rotation: 15deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -126,10 +123,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_twist_fast {
-        0%, 100% { transform: scale(1) rotate(0deg); }
-        50% { transform: scale($scale_end) rotate($rotation); }
-    }
+    @include keyframes_animate_twist_fast($scale_end, $rotation);
 }
 
 
@@ -150,10 +144,10 @@
 /// @param {Color} $color_end [$animate_base_color_end] - The ending color of the animation.
 ///
 @mixin animate_twist_color(
-    $scale_end: 0.9, 
-    $rotation: 10deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $scale_end: 0.9,
+    $rotation: 10deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count,
     $color_start: $animate_base_color_start,
     $color_end: $animate_base_color_end,
@@ -164,14 +158,5 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_twist_color {
-        0%, 100% { 
-            transform: scale(1) rotate(0deg); 
-            color: $color_start;
-        }
-        50% { 
-            transform: scale($scale_end) rotate($rotation); 
-            color: $color_end;
-        }
-    }
+    @include keyframes_animate_twist_color($scale_end, $rotation, $color_start, $color_end);
 }

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Wave Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides waving animations for greeting effects and flag-like motion.
+/// Rotates elements in a friendly waving pattern. Ideal for hand-wave
+/// icons, greetings, and goodbye animations.
+///
 /// @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 *;
 
@@ -35,21 +31,26 @@
 // ============================================================================
 
 
-
-
 ///
 /// Wave Animation
+/// ---------------------------------------------------------------------------
 /// Creates a wave effect by rotating an element back and forth.
+///
 /// @name animate_wave
-/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Angle} $angle [20deg] - Maximum rotation angle during the wave
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .hand-wave {
+///     @include animate_wave;
+///   }
 ///
 @mixin animate_wave(
-    $angle: 20deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $angle: 20deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -58,10 +59,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_wave {
-        0%, 100% { transform: rotate(0deg); }
-        50% { transform: rotate($angle); }
-    }
+    @include keyframes_animate_wave($angle);
 }
 
 
@@ -78,9 +76,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_wave_slow(
-    $angle: 10deg, 
+    $angle: 10deg,
     $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -89,10 +87,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_wave_slow {
-        0%, 100% { transform: rotate(0deg); }
-        50% { transform: rotate($angle); }
-    }
+    @include keyframes_animate_wave_slow($angle);
 }
 
 
@@ -110,9 +105,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_wave_fast(
-    $angle: 30deg, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out, 
+    $angle: 30deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -121,10 +116,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_wave_fast {
-        0%, 100% { transform: rotate(0deg); }
-        50% { transform: rotate($angle); }
-    }
+    @include keyframes_animate_wave_fast($angle);
 }
 
 
@@ -142,25 +134,16 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_wave_fade(
-    $angle: 20deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $angle: 20deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
-        animate_wave_fade
+        animate_wave_fade,
         $duration,
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_wave_fade {
-        0%, 100% { 
-            transform: rotate(0deg); 
-            opacity: 1;
-        }
-        50% { 
-            transform: rotate($angle); 
-            opacity: 0.5;
-        }
-    }
+    @include keyframes_animate_wave_fade($angle);
 }