move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/animations/_pulse.scss

@@ -0,0 +1,275 @@
+////
+///
+/// Pulse Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating pulse animations that rhythmically scale
+/// elements. Includes standard pulse, slow/fast variations, and color pulse
+/// for versatile visual feedback.
+///
+/// @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
+// ============================================================================
+
+///
+/// Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a pulsing animation where the element scales between minimum
+/// and maximum values.
+///
+/// @name animate_pulse
+/// @param {Number} $scale_min [1] - Minimum scale value
+/// @param {Number} $scale_max [1.1] - Maximum scale value
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Basic usage
+///   .notification {
+///     @include animate_pulse;
+///   }
+///
+@mixin animate_pulse(
+    $scale_min: 1,
+    $scale_max: $animate_scale_pulse,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse($scale_min, $scale_max);
+}
+
+
+///
+/// Slow Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slower, more subtle pulse for gentle attention-grabbing.
+///
+/// @name animate_pulse_slow
+/// @param {Number} $scale_min [0.95] - Minimum scale value
+/// @param {Number} $scale_max [1.05] - Maximum scale value
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_pulse_slow(
+    $scale_min: 0.95,
+    $scale_max: 1.05,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_slow($scale_min, $scale_max);
+}
+
+
+///
+/// Rapid Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a fast, pronounced pulse for urgent attention-grabbing.
+///
+/// @name animate_pulse_fast
+/// @param {Number} $scale_min [0.9] - Minimum scale value
+/// @param {Number} $scale_max [1.2] - Maximum scale value
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_pulse_fast(
+    $scale_min: 0.9,
+    $scale_max: 1.2,
+    $duration: $animate_base_duration_fast,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_fast,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_fast($scale_min, $scale_max);
+}
+
+
+///
+/// Color Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a pulse that transitions the background color between two values.
+///
+/// @name animate_pulse_color
+/// @param {Color} $color_start [$animate_base_color_start] - Starting color
+/// @param {Color} $color_end [$animate_base_color_end] - Ending color
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Usage
+///   .alert {
+///     @include animate_pulse_color(#fff, #ff0000);
+///   }
+///
+@mixin animate_pulse_color(
+    $color_start: $animate_base_color_start,
+    $color_end: $animate_base_color_end,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_color,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_color($color_start, $color_end);
+}
+
+
+///
+/// Pulse Ring Animation
+/// ---------------------------------------------------------------------------
+/// Creates an expanding ring effect using box-shadow.
+///
+/// @name animate_pulse_ring
+/// @param {Color} $ring_color [rgba(0, 0, 0, 0.3)] - Ring color
+/// @param {Length} $ring_size [20px] - Maximum ring expansion
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_pulse_ring(
+    $ring_color: rgba(0, 0, 0, 0.3),
+    $ring_size: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_ring,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_ring($ring_color, $ring_size);
+}
+
+
+///
+/// Pulse Glow Animation
+/// ---------------------------------------------------------------------------
+/// Creates a glowing pulse effect using box-shadow.
+///
+/// @name animate_pulse_glow
+/// @param {Color} $glow_color [rgba(255, 255, 255, 0.5)] - Glow color
+/// @param {Length} $glow_size [10px] - Maximum glow size
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_pulse_glow(
+    $glow_color: rgba(255, 255, 255, 0.5),
+    $glow_size: 10px,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_glow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_glow($glow_color, $glow_size);
+}
+
+
+///
+/// Pulse Fade Animation
+/// ---------------------------------------------------------------------------
+/// Creates a pulse combined with fading opacity.
+///
+/// @name animate_pulse_fade
+/// @param {Number} $scale_min [1] - Minimum scale
+/// @param {Number} $scale_max [1.2] - Maximum scale
+/// @param {Number} $opacity_min [0.5] - Minimum opacity
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_pulse_fade(
+    $scale_min: 1,
+    $scale_max: 1.2,
+    $opacity_min: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_fade,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_fade($scale_min, $scale_max, $opacity_min);
+}
+
+
+///
+/// Double Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a two-beat pulse pattern within one cycle.
+///
+/// @name animate_pulse_double
+/// @param {Number} $scale_min [1] - Minimum scale
+/// @param {Number} $scale_max [1.15] - Maximum scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_pulse_double(
+    $scale_min: 1,
+    $scale_max: 1.15,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_double,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_pulse_double($scale_min, $scale_max);
+}

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Ripple Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides expanding ripple effects that scale and fade. Creates material
+/// design-style touch feedback and water ripple effects. Ideal for buttons,
+/// click feedback, and ambient decorations.
+///
 /// @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,21 +33,28 @@
 
 ///
 /// Ripple Animation
+/// ---------------------------------------------------------------------------
 /// Creates a ripple effect where the element scales up and fades out.
+///
 /// @name animate_ripple
-/// @param {Number} $scale_start [1] - The initial scale of the ripple.
-/// @param {Number} $scale_end [1.5] - The final scale of the ripple.
-/// @param {Number} $opacity_start [1] - The initial opacity of the ripple.
-/// @param {Number} $opacity_end [0] - The final opacity of the ripple.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the ripple animation.
-/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
+/// @param {Number} $scale_start [1] - Initial scale of the ripple
+/// @param {Number} $scale_end [1.5] - Final scale of the ripple
+/// @param {Number} $opacity_start [1] - Initial opacity of the ripple
+/// @param {Number} $opacity_end [0] - Final opacity of the ripple
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+/// @example scss - Basic usage
+///   .touch-ripple {
+///     @include animate_ripple;
+///   }
 ///
 @mixin animate_ripple(
-    $scale_start: 1, 
-    $scale_end: 1.5, 
-    $opacity_start: 1, 
-    $opacity_end: 0, 
-    $duration: $animate_base_duration, 
+    $scale_start: 1,
+    $scale_end: 1.5,
+    $opacity_start: 1,
+    $opacity_end: 0,
+    $duration: $animate_base_duration,
     $timing_function: ease-out
 ) {
     @include animate_base(
@@ -60,31 +63,30 @@
         $timing_function,
         infinite,
     );
-    @keyframes animate_ripple {
-        0% { transform: scale($scale_start); opacity: $opacity_start; }
-        100% { transform: scale($scale_end); opacity: $opacity_end; }
-    }
+    @include keyframes_animate_ripple($scale_start, $scale_end, $opacity_start, $opacity_end);
 }
 
 
-
-// Slow Ripple Animation
-// ----------------------------------------------------------------------------
-
 ///
 /// Slow Ripple Animation
+/// ---------------------------------------------------------------------------
 /// Creates a slower ripple effect where the element scales up and fades out.
-/// 
+///
 /// @name animate_ripple_slow
-/// @param {Number} $scale_end [1.5] - The final scale of the ripple.
-/// @param {Number} $opacity_end [0] - The final opacity of the ripple.
-/// @param {Number|String} $duration [2s] - The duration of the ripple animation.
-/// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
+/// @param {Number} $scale_end [1.5] - Final scale of the ripple
+/// @param {Number} $opacity_end [0] - Final opacity of the ripple
+/// @param {Time} $duration [2s] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+/// @example scss - Usage
+///   .water-ripple {
+///     @include animate_ripple_slow;
+///   }
 ///
 @mixin animate_ripple_slow(
-    $scale_end: 1.5, 
-    $opacity_end: 0, 
-    $duration: 2s, 
+    $scale_end: 1.5,
+    $opacity_end: 0,
+    $duration: 2s,
     $timing_function: ease-out
 ) {
     @include animate_base(
@@ -93,10 +95,7 @@
         $timing_function,
         infinite,
     );
-    @keyframes animate_ripple_slow {
-        0% { transform: scale(1); opacity: 1; }
-        100% { transform: scale($scale_end); opacity: $opacity_end; }
-    }
+    @include keyframes_animate_ripple_slow($scale_end, $opacity_end);
 }
 
 
@@ -126,11 +125,7 @@
         $timing_function,
         infinite,
     );
-    @keyframes animate_ripple_multi {
-        0%, 100% { transform: scale(1); opacity: 1; }
-        50% { transform: scale($scale_first); opacity: 0.5; }
-        100% { transform: scale($scale_second); opacity: $opacity_end; }
-    }
+    @include keyframes_animate_ripple_multi($scale_first, $scale_second, $opacity_end);
 }
 
 
@@ -149,11 +144,11 @@
 /// @param {String} $timing_function [ease-out] - The timing function for the ripple animation.
 ///
 @mixin animate_ripple_color(
-    $scale_end: 1.5, 
+    $scale_end: 1.5,
     $opacity_end: 0,
     $color_start: $animate_base_color_start,
     $color_end: $animate_base_color_end,
-    $duration: $animate_base_duration, 
+    $duration: $animate_base_duration,
     $timing_function: ease-out
 ) {
     @include animate_base(
@@ -162,8 +157,5 @@
         $timing_function,
         infinite,
     );
-    @keyframes animate_ripple_color {
-        0% { transform: scale(1); opacity: 1; background-color: $color_start; }
-        100% { transform: scale($scale_end); opacity: $opacity_end; background-color: $color_end; }
-    }
+    @include keyframes_animate_ripple_color($scale_end, $opacity_end, $color_start, $color_end);
 }

package/dist/scss/mixins/animations/_roll.scss

@@ -0,0 +1,217 @@
+////
+///
+/// Roll Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides rolling animations that combine translation with rotation.
+/// Elements appear to roll in or out of view. Useful for dynamic entrances,
+/// playful transitions, and physics-inspired effects.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Roll Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rolling animation where the element translates and rotates
+/// horizontally.
+///
+/// @name animate_roll
+/// @param {Length} $translate_distance [100%] - Horizontal translation
+/// @param {Angle} $rotation_angle [360deg] - Rotation angle for the roll
+/// @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
+///   .ball {
+///     @include animate_roll;
+///   }
+///
+@mixin animate_roll(
+    $translate_distance: 100%,
+    $rotation_angle: 360deg,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_roll,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_roll($translate_distance, $rotation_angle);
+}
+
+
+///
+/// Reverse Roll Animation
+/// ---------------------------------------------------------------------------
+/// Creates a reverse rolling animation where the element translates and
+/// rotates horizontally in the opposite direction.
+///
+/// @name animate_roll_reverse
+/// @param {Length} $translate-distance [-100%] - Horizontal translation
+/// @param {Angle} $rotation_angle [-360deg] - Rotation angle for the roll
+/// @param {Time} $duration - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .reverse-ball {
+///     @include animate_roll_reverse;
+///   }
+///
+@mixin animate_roll_reverse(
+    $translate-distance: -100%,
+    $rotation_angle: -360deg,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_roll_reverse,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_roll_reverse($translate-distance, $rotation_angle);
+}
+
+
+// Slow Roll Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slow Roll Animation
+/// Creates a slower rolling animation where the element translates and rotates horizontally.
+/// @name animate_roll_slow
+/// @param {Number|String} $translate-distance [100%] - The distance to translate the element horizontally.
+/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the roll.
+/// @param {Number|String} $duration [$animate_base_duration_slow/// 2] - The duration of the roll animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_roll_slow(
+    $translate-distance: 100%,
+    $rotation_angle: 360deg,
+    $duration: $animate_base_duration_slow * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_roll_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_roll_slow($translate-distance, $rotation_angle);
+}
+
+
+
+// Vertical Roll Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Vertical Roll Animation
+/// Creates a rolling animation where the element translates and rotates vertically.
+/// @name animate_roll_vertical
+/// @param {Number|String} $translate-distance [100%] - The distance to translate the element vertically.
+/// @param {Number|String} $rotation_angle [360deg] - The rotation angle for the vertical roll.
+/// @param {Number|String} $duration [$animate_base_duration/// 2] - The duration of the roll animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the roll animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_roll_vertical(
+    $translate-distance: 100%,
+    $rotation_angle: 360deg,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_roll_vertical,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_roll_vertical($translate-distance, $rotation_angle);
+}
+
+
+
+
+
+// Roll In Animation (from animate.css by Nick Pettit)
+// ----------------------------------------------------------------------------
+
+///
+/// Roll In Animation
+/// Creates a rolling entrance animation where the element rolls in from the left.
+/// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
+///
+/// @name animate_roll_in
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [ease-out] - The timing function.
+///
+@mixin animate_roll_in(
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_roll_in,
+        $duration,
+        $timing_function,
+        1
+    );
+    @include keyframes_animate_roll_in();
+}
+
+
+// Roll Out Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Roll Out Animation
+/// Creates a rolling exit animation where the element rolls out to the right.
+/// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
+///
+/// @name animate_roll_out
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [ease-in] - The timing function.
+///
+@mixin animate_roll_out(
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_roll_out,
+        $duration,
+        $timing_function,
+        1
+    );
+    @include keyframes_animate_roll_out();
+}