move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/animations/_heartbeat.scss

@@ -0,0 +1,195 @@
+////
+///
+/// Heartbeat Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides rhythmic heartbeat-style scaling animations that mimic a pulse.
+/// Includes fast and slow variants with customizable scale factors. Ideal
+/// for health indicators, love icons, and life animations.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Heartbeat Animation
+/// ---------------------------------------------------------------------------
+/// Creates a heartbeat animation where the element scales up and down.
+///
+/// @name animate_heartbeat
+/// @param {Number} $scale_min [0.9] - Minimum scale of the heartbeat
+/// @param {Number} $scale_max [1.1] - Maximum scale of the heartbeat
+/// @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 - Basic usage
+///   .heart {
+///     @include animate_heartbeat;
+///   }
+///
+@mixin animate_heartbeat(
+    $scale_min: 0.9,
+    $scale_max: 1.1,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_heartbeat,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_heartbeat {
+        0%, 100% { transform: scale(1); }
+        25% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+        75% { transform: scale($scale_min); }
+    }
+}
+
+
+///
+/// Rapid Heartbeat Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rapid heartbeat animation with faster scaling transitions.
+///
+/// @name animate_heartbeat_fast
+/// @param {Number} $scale_min [0.85] - Minimum scale of the heartbeat
+/// @param {Number} $scale_max [1.15] - Maximum scale of the heartbeat
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .urgent-heart {
+///     @include animate_heartbeat_fast;
+///   }
+///
+@mixin animate_heartbeat_fast(
+    $scale_min: 0.85,
+    $scale_max: 1.15,
+    $duration: $animate_base_duration_fast,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_heartbeat_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_heartbeat_fast {
+        0%, 100% { transform: scale(1); }
+        14%, 86% { transform: scale($scale_min); }
+        28%, 72% { transform: scale($scale_max); }
+        42%, 58% { transform: scale($scale_min); }
+    }
+}
+
+
+///
+/// Slow Heartbeat Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slow heartbeat animation with more gradual scaling transitions.
+///
+/// @name animate_heartbeat_slow
+/// @param {Number} $scale_min [0.95] - Minimum scale of the heartbeat
+/// @param {Number} $scale_max [1.05] - Maximum scale of the heartbeat
+/// @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
+///   .calm-heart {
+///     @include animate_heartbeat_slow;
+///   }
+///
+@mixin animate_heartbeat_slow(
+    $scale_min: 0.95,
+    $scale_max: 1.05,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_heartbeat_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_heartbeat_slow {
+        0%, 100% { transform: scale(1); }
+        25% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+        75% { transform: scale($scale_min); }
+    }
+}
+
+
+///
+/// Heartbeat with Color Change Animation
+/// ---------------------------------------------------------------------------
+/// Creates a heartbeat animation that includes a color transition.
+///
+/// @name animate_heartbeat_color
+/// @param {Number} $scale_min [0.9] - Minimum scale of the heartbeat
+/// @param {Number} $scale_max [1.1] - Maximum scale of the heartbeat
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+/// @param {Color} $color_start - Starting color of the element
+/// @param {Color} $color_end - Ending color of the element
+///
+/// @example scss - Usage
+///   .color-heart {
+///     @include animate_heartbeat_color;
+///   }
+///
+@mixin animate_heartbeat_color(
+    $scale_min: 0.9,
+    $scale_max: 1.1,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count,
+    $color_start: $animate_base_color_start,
+    $color_end: $animate_base_color_end,
+) {
+    @include animate_base(
+        animate_heartbeat_color,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_heartbeat_color {
+        0%, 100% {
+            transform: scale(1);
+            color: $color_start;
+        }
+        50% {
+            transform: scale($scale_max);
+            color: $color_end;
+        }
+    }
+}

package/dist/scss/mixins/animations/_hinge.scss

@@ -0,0 +1,118 @@
+////
+///
+/// Hinge Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides hinge-style exit animations where elements swing and fall.
+/// Simulates a door or panel coming off its hinge. Useful for dramatic
+/// exit effects and playful dismissal animations.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Hinge Animation
+/// ---------------------------------------------------------------------------
+/// Creates a hinge effect where the element swings and falls off.
+///
+/// @name animate_hinge
+/// @param {String} $origin [top left] - Transform origin (hinge point)
+/// @param {Angle} $swing_angle [80deg] - Maximum swing angle
+/// @param {Length} $fall_distance [700px] - Distance to fall
+/// @param {Time} $duration [2s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Basic usage
+///   .modal-close {
+///     @include animate_hinge;
+///   }
+///
+@mixin animate_hinge(
+    $origin: top left,
+    $swing_angle: 80deg,
+    $fall_distance: 700px,
+    $duration: 2s,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_hinge,
+        $duration,
+        $timing_function,
+        1
+    );
+    transform-origin: $origin;
+    @keyframes animate_hinge {
+        0% {
+            transform: rotate3d(0, 0, 1, 0deg);
+            opacity: 1;
+        }
+        20%, 60% {
+            transform: rotate3d(0, 0, 1, $swing_angle);
+            opacity: 1;
+        }
+        40%, 80% {
+            transform: rotate3d(0, 0, 1, $swing_angle * 0.75);
+            opacity: 1;
+        }
+        100% {
+            transform: translate3d(0, $fall_distance, 0);
+            opacity: 0;
+        }
+    }
+}
+
+
+///
+/// Hinge Left Animation
+/// ---------------------------------------------------------------------------
+/// Creates a hinge effect from the left side.
+///
+/// @name animate_hinge_left
+/// @param {Time} $duration [2s] - Animation duration
+///
+/// @example scss - Usage
+///   .panel {
+///     @include animate_hinge_left;
+///   }
+///
+@mixin animate_hinge_left(
+    $duration: 2s
+) {
+    @include animate_hinge(top left, 80deg, 700px, $duration);
+}
+
+
+///
+/// Hinge Right Animation
+/// ---------------------------------------------------------------------------
+/// Creates a hinge effect from the right side.
+///
+/// @name animate_hinge_right
+/// @param {Time} $duration [2s] - Animation duration
+///
+@mixin animate_hinge_right(
+    $duration: 2s
+) {
+    @include animate_hinge(top right, -80deg, 700px, $duration);
+}

package/dist/scss/mixins/animations/_index.scss

@@ -0,0 +1,97 @@
+// ============================================================================
+// move.gl | Animations Index
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Animations Mixin Module Index
+/// =========================================================================
+///
+/// Central index for all animation mixins in move.gl. Provides a complete
+/// library of animation effects including:
+///
+/// - **Base**: Core animation infrastructure and utilities
+/// - **Attention**: beat, blink, bounce, flash, heartbeat, jiggle, shake
+/// - **Entrance/Exit**: fade, flip, lightspeed, roll, slide, zoom
+/// - **Emphasis**: pulse, glow, pop, rubber, tada, wobble
+/// - **Background**: float, sway, swing, wave
+/// - **Transform**: rotate, scale, spin, twist
+/// - **Special**: elastic, hinge, jello, nod, ripple
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+// ============================================================================
+// Core
+// ============================================================================
+
+@forward "base";
+
+// ============================================================================
+// Attention Seekers
+// ============================================================================
+
+@forward "beat";
+@forward "blink";
+@forward "bounce";
+@forward "flash";
+@forward "heartbeat";
+@forward "jiggle";
+@forward "shake";
+
+// ============================================================================
+// Entrance & Exit Animations
+// ============================================================================
+
+@forward "fade";
+@forward "flip";
+@forward "lightspeed";
+@forward "roll";
+@forward "slide";
+@forward "zoom";
+
+// ============================================================================
+// Emphasis Animations
+// ============================================================================
+
+@forward "pulse";
+@forward "glow";
+@forward "pop";
+@forward "rubber";
+@forward "tada";
+@forward "wobble";
+
+// ============================================================================
+// Background & Ambient Animations
+// ============================================================================
+
+@forward "float";
+@forward "sway";
+@forward "swing";
+@forward "wave";
+
+// ============================================================================
+// Transform-based Animations
+// ============================================================================
+
+@forward "rotate";
+@forward "scale";
+@forward "spin";
+@forward "twist";
+
+// ============================================================================
+// Special Effects
+// ============================================================================
+
+@forward "elastic";
+@forward "hinge";
+@forward "jello";
+@forward "nod";
+@forward "ripple";

package/dist/scss/mixins/animations/_jello.scss

@@ -0,0 +1,123 @@
+////
+///
+/// Jello Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides jelly-like wobble animations using skew transforms. Creates a
+/// bouncy, gelatinous effect that settles naturally. Perfect for playful
+/// UI feedback and attention-grabbing 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
+// ============================================================================
+
+
+///
+/// Jello Animation
+/// ---------------------------------------------------------------------------
+/// Creates a jelly-like wobble effect using skew transforms.
+///
+/// @name animate_jello
+/// @param {Angle} $intensity [12.5deg] - Initial skew intensity
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [1] - Number of iterations
+///
+/// @example scss - Basic usage
+///   .button {
+///     @include animate_jello;
+///   }
+///
+@mixin animate_jello(
+    $intensity: 12.5deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: 1
+) {
+    @include animate_base(
+        animate_jello,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    transform-origin: center;
+    @keyframes animate_jello {
+        0%, 11.1%, 100% {
+            transform: none;
+        }
+        22.2% {
+            transform: skewX(-$intensity) skewY(-$intensity);
+        }
+        33.3% {
+            transform: skewX($intensity * 0.5) skewY($intensity * 0.5);
+        }
+        44.4% {
+            transform: skewX(-$intensity * 0.25) skewY(-$intensity * 0.25);
+        }
+        55.5% {
+            transform: skewX($intensity * 0.125) skewY($intensity * 0.125);
+        }
+        66.6% {
+            transform: skewX(-$intensity * 0.0625) skewY(-$intensity * 0.0625);
+        }
+        77.7% {
+            transform: skewX($intensity * 0.03125) skewY($intensity * 0.03125);
+        }
+        88.8% {
+            transform: skewX(-$intensity * 0.015625) skewY(-$intensity * 0.015625);
+        }
+    }
+}
+
+
+///
+/// Subtle Jello Animation
+/// ---------------------------------------------------------------------------
+/// A gentler version of the jello effect.
+///
+/// @name animate_jello_subtle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+///
+/// @example scss - Usage
+///   .card {
+///     @include animate_jello_subtle;
+///   }
+///
+@mixin animate_jello_subtle(
+    $duration: $animate_base_duration
+) {
+    @include animate_jello(6deg, $duration);
+}
+
+
+///
+/// Intense Jello Animation
+/// A more dramatic version of the jello effect.
+///
+/// @name animate_jello_intense
+/// @param {Duration} $duration [$animate_base_duration] - The animation duration.
+///
+@mixin animate_jello_intense(
+    $duration: $animate_base_duration
+) {
+    @include animate_jello(20deg, $duration);
+}

package/dist/scss/mixins/animations/_jiggle.scss

@@ -0,0 +1,162 @@
+////
+///
+/// Jiggle Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides quick, nervous jiggling animations for horizontal and vertical
+/// movement. Includes rotation variants and customizable amplitude. Useful
+/// for error states, notifications, and playful interactions.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Jiggle Animation
+/// ---------------------------------------------------------------------------
+/// Creates a horizontal jiggle animation where the element moves left and
+/// right.
+///
+/// @name animate_jiggle
+/// @param {Length} $amplitude [5px] - Distance the element moves
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .error-input {
+///     @include animate_jiggle;
+///   }
+///
+@mixin animate_jiggle(
+    $amplitude: 5px,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_jiggle($amplitude);
+}
+
+
+///
+/// Vertical Jiggle Animation
+/// ---------------------------------------------------------------------------
+/// Creates a vertical jiggle animation where the element moves up and down.
+///
+/// @name animate_jiggle_vertical
+/// @param {Length} $amplitude [5px] - Distance the element moves
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .notification {
+///     @include animate_jiggle_vertical;
+///   }
+///
+@mixin animate_jiggle_vertical(
+    $amplitude: 5px,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle_vertical,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_jiggle_vertical($amplitude);
+}
+
+
+
+///
+/// Multi-Directional Jiggle Animation
+/// ---------------------------------------------------------------------------
+/// Creates a jiggle animation where the element moves in both X and Y
+/// directions.
+///
+/// @name animate_jiggle_multi
+/// @param {Length} $amplitude [5px] - Distance the element moves
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .playful-icon {
+///     @include animate_jiggle_multi;
+///   }
+///
+@mixin animate_jiggle_multi(
+    $amplitude: 5px,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle_multi,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_jiggle_multi($amplitude);
+}
+
+
+///
+/// Gentle Jiggle Animation
+/// ---------------------------------------------------------------------------
+/// Creates a gentler jiggle animation with slower transitions.
+///
+/// @name animate_jiggle_slow
+/// @param {Length} $amplitude [3px] - Distance the element moves
+/// @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 - Usage
+///   .subtle-notification {
+///     @include animate_jiggle_slow;
+///   }
+///
+@mixin animate_jiggle_slow(
+    $amplitude: 3px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_jiggle_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_jiggle_slow($amplitude);
+}