move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/transforms/_index.scss

@@ -0,0 +1,28 @@
+// ============================================================================
+// move.gl | Transforms Mixin Index
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Transforms Mixin Module
+/// ===========================================================================
+///
+/// This module provides CSS transform mixins for rotations, flips, scales,
+/// translations, skews, perspective, and matrix transformations.
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+@forward "flip";
+@forward "matrix";
+@forward "perspective";
+@forward "rotate";
+@forward "scale";
+@forward "skew";
+@forward "translate";

package/src/scss/mixins/transforms/_matrix.scss

@@ -0,0 +1,18 @@
+////
+///
+/// Transforms Mixin Module
+/// ===========================================================================
+///
+/// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+
+

package/src/scss/mixins/transforms/_perspective.scss

@@ -0,0 +1,28 @@
+////
+///
+/// Transforms Mixin Module
+/// ===========================================================================
+///
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+///
+/// ---------------------------------------------------------------------------
+///
+/// Mixin for setting perspective on elements, useful for 3D transforms.
+///
+/// @mixin perspective
+/// @param {Number} $value [$default-perspective] - The perspective value for 3D transformations.
+/// @example scss - Usage
+///   .icon-perspective { @include perspective(1000px); } // Applies a perspective of 1000px
+///
+@mixin perspective($value: $default-perspective) {
+    perspective: $value;
+}

package/src/scss/mixins/transforms/_rotate.scss

@@ -0,0 +1,96 @@
+////
+///
+/// Rotate Transforms Mixin Module
+/// ===========================================================================
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Mixin for rotating elements by a specified degree.
+/// Applies a CSS rotation transform to the element.
+///
+/// @name transform_rotate
+/// @param {Number} $degrees [0deg] - The degree to rotate the element.
+/// @example scss - Usage
+///   .icon_rotate { @include transform_rotate(90deg); } // Rotates icon by 90 degrees
+///
+@mixin transform_rotate($degrees: 0deg) {
+    transform: rotate($degrees);
+}
+
+
+///
+/// Mixin for rotating elements based on a dynamic value from a CSS variable.
+/// This allows for rotations that can be adjusted at runtime using CSS variables.
+///
+/// @name transform_rotate_dynamic
+/// @param {String} $variable [--rotation-angle] - The CSS variable to use for dynamic rotation.
+/// @example scss - Usage
+///   .transform_rotate_dynamic { @include transform_rotate_dynamic("--my_custom_rotation"); }
+///
+@mixin transform_rotate_dynamic($variable: "--rotation_angle") {
+    transform: rotate(var(#{$variable}));
+}
+
+
+
+
+///
+/// Mixin for rotating elements along the X-axis.
+///
+/// @name transform_rotate_x
+/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the X-axis.
+/// @example scss - Usage
+///   .icon-transform_rotate_x { @include transform_rotate_x(45deg); } // Rotates the element 45 degrees along the X-axis
+///
+@mixin transform_rotate_x($degrees: $default-rotation) {
+    transform: rotateX($degrees);
+}
+
+///
+/// Mixin for rotating elements along the Y-axis.
+///
+/// @name transform_rotate_y
+/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the Y-axis.
+/// @example scss - Usage
+///   .icon-transform_rotate_y { @include transform_rotate_y(45deg); } // Rotates the element 45 degrees along the Y-axis
+///
+@mixin transform_rotate_y($degrees: $default-rotation) {
+    transform: rotateY($degrees);
+}
+
+///
+/// Mixin for rotating elements along the Z-axis.
+///
+/// @name transform_rotate_z
+/// @param {Number} $degrees [$default-rotation] - The degree to rotate the element along the Z-axis.
+/// @example scss - Usage
+///   .icon-transform_rotate_z { @include transform_rotate_z(45deg); } // Rotates the element 45 degrees along the Z-axis
+///
+@mixin transform_rotate_z($degrees: $default-rotation) {
+    transform: rotateZ($degrees);
+}

package/src/scss/mixins/transforms/_scale.scss

@@ -0,0 +1,26 @@
+////
+///
+/// Transforms Mixin Module
+/// ===========================================================================
+///
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+///
+/// Mixin for scaling elements by a specified factor.
+///
+/// @mixin scale
+/// @param {Number} $factor [1] - The scaling factor.
+/// @example scss - Usage
+///   .icon_scale { @include scale(1.5); } // Scales the element by 1.5
+///
+@mixin scale($factor: 1) {
+    transform: scale($factor);
+}

package/src/scss/mixins/transforms/_skew.scss

@@ -0,0 +1,27 @@
+////
+///
+/// Transforms Mixin Module
+/// ===========================================================================
+///
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+///
+/// Mixin for skewing elements by specified angles along X and Y axes.
+///
+/// @mixin skew
+/// @param {Number} $x [$default-skew] - The angle to skew along the X-axis.
+/// @param {Number} $y [$default-skew] - The angle to skew along the Y-axis.
+/// @example scss - Usage
+///   .icon-skew { @include skew(10deg, 5deg); } // Skews the element 10deg on X-axis and 5deg on Y-axis
+///
+@mixin skew($x: $default-skew, $y: $default-skew) {
+    transform: skew($x, $y);
+}

package/src/scss/mixins/transforms/_translate.scss

@@ -0,0 +1,27 @@
+////
+///
+/// Transforms Mixin Module
+/// ===========================================================================
+///
+///
+/// @group Transforms
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+///
+/// Mixin for translating elements by a specified distance along X and Y axes.
+///
+/// @mixin translate
+/// @param {Number} $x [$default-translate] - The distance to translate along the X-axis.
+/// @param {Number} $y [$default-translate] - The distance to translate along the Y-axis.
+/// @example scss - Usage
+///   .icon-translate { @include translate(10px, 20px); } // Moves the element 10px right and 20px down
+///
+@mixin translate($x: $default-translate, $y: $default-translate) {
+    transform: translate($x, $y);
+}

package/src/scss/mixins/transitions/_index.scss

@@ -0,0 +1,22 @@
+// ============================================================================
+// move.gl | Transitions Mixin Index
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Transitions Mixin Module
+/// ===========================================================================
+///
+/// This module provides CSS transition mixins for smooth property changes.
+/// Hover effects are available in the controls module.
+///
+/// @group Transitions
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+@forward "transition";

package/src/scss/mixins/transitions/_transition.scss

@@ -0,0 +1,43 @@
+////
+///
+/// Transitions Mixin Module
+/// ===========================================================================
+///
+/// This module ...
+///
+///
+/// @group Transitions
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+// @use "../../mixins" as *; // Removed to avoid circular dependency
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Applies a transition to an element.
+///
+/// @name transition
+/// @param {String} $property - The CSS property to transition.
+/// @param {String} $duration - The duration of the transition (default: 0.3s).
+/// @param {String} $timing-function - The timing function of the transition (default: ease).
+/// @example scss - Usage
+///   @include transition('all', '0.3s', 'ease-in-out');
+///
+@mixin transition($property, $duration: 0.3s, $timing-function: ease) {
+    transition: #{$property} #{$duration} #{$timing-function};
+}

package/src/scss/variables/_animations.scss

@@ -0,0 +1,300 @@
+////
+///
+/// Animation Variables Module
+/// ===========================================================================
+///
+/// Centralized configuration for all animation-related variables in move.gl.
+/// Uses consistent underscore naming convention throughout.
+///
+/// @group Animation
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+
+
+// ============================================================================
+// Base Animation Variables
+// ============================================================================
+
+/// Duration
+/// ---------------------------------------------------------------------------
+$animate_base_duration:         1s !default;
+$animate_base_duration_fast:    0.25s !default;
+$animate_base_duration_normal:  0.5s !default;
+$animate_base_duration_slow:    2s !default;
+
+/// Delay
+/// ---------------------------------------------------------------------------
+$animate_base_delay: 0s !default;
+
+/// Stagger (for sequential animations)
+/// ---------------------------------------------------------------------------
+$animate_stagger_delay:         0.1s !default;
+$animate_stagger_initial_delay: 0s !default;
+
+/// Timing Functions
+/// ---------------------------------------------------------------------------
+$animate_base_timing_function:          ease-in-out !default;
+$animate_base_timing_function_fade:     cubic-bezier(0.4, 0, 0.6, 1) !default;
+$animate_base_timing_function_bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+$animate_base_timing_function_elastic:  cubic-bezier(0.68, -0.6, 0.32, 1.6) !default;
+$animate_base_timing_function_step:     step-end !default;
+$animate_base_timing_function_rapid:    steps(2, end) !default;
+$animate_base_timing_function_linear:   linear !default;
+$animate_base_timing_function_ease_out: ease-out !default;
+$animate_base_timing_function_ease_in:  ease-in !default;
+
+/// Iteration Count
+/// ---------------------------------------------------------------------------
+$animate_base_iteration_count: infinite !default;
+
+/// Direction
+/// ---------------------------------------------------------------------------
+$animate_base_direction: normal !default;
+
+/// Fill Mode
+/// ---------------------------------------------------------------------------
+$animate_fill_mode_both:     both !default;
+$animate_fill_mode_forwards: forwards !default;
+
+
+// ============================================================================
+// Scale Variables
+// ============================================================================
+
+$animate_scale_base:                1 !default;
+$animate_scale_beat:                1.25 !default;
+$animate_scale_beat_fade:           1.125 !default;
+$animate_scale_beat_double_small:   0.8 !default;
+$animate_scale_beat_double_large:   1.5 !default;
+$animate_scale_bounce:              1.1 !default;
+$animate_scale_pulse:               1.05 !default;
+$animate_scale_pop:                 1.2 !default;
+
+/// Pulse scale variants
+$animate_scale_pulse_slow_min:      0.95 !default;
+$animate_scale_pulse_slow_max:      1.05 !default;
+$animate_scale_pulse_fast_min:      0.9 !default;
+$animate_scale_pulse_fast_max:      1.2 !default;
+$animate_scale_pulse_fade_max:      1.1 !default;
+
+/// Zoom scales
+$animate_scale_zoom:                1.5 !default;
+$animate_scale_zoom_slow:           1.3 !default;
+$animate_scale_zoom_fast:           1.7 !default;
+$animate_scale_zoom_in_start:       0.5 !default;
+$animate_scale_zoom_out_end:        0.5 !default;
+
+/// Flip scales
+$animate_scale_flip:                0.8 !default;
+
+/// Fade scales
+$animate_scale_fade_in_start:       0.8 !default;
+$animate_scale_fade_out_end:        0.8 !default;
+
+/// Twist scales
+$animate_scale_twist_end:           0.9 !default;
+$animate_scale_twist_slow_end:      0.95 !default;
+$animate_scale_twist_fast_end:      0.85 !default;
+
+/// Rubber band intensity
+$animate_scale_rubber_intensity:    1.25 !default;
+$animate_scale_rubber_squeeze:      0.8 !default;
+
+/// Scale shrink
+$animate_scale_shrink_min:          0.8 !default;
+
+/// Scale in/out center
+$animate_scale_in_center:           0.5 !default;
+
+/// Scale overshoot (pop effect)
+$animate_scale_overshoot:           1.1 !default;
+
+
+// ============================================================================
+// Opacity Variables
+// ============================================================================
+
+$animate_opacity_start:         1 !default;
+$animate_opacity_fade:          0.4 !default;
+$animate_opacity_blink:         0 !default;
+$animate_opacity_blink_soft:    0.3 !default;
+$animate_opacity_soft:          0.3 !default;
+$animate_opacity_pulse_min:     0.7 !default;
+$animate_opacity_zoom_fade_min: 0.5 !default;
+$animate_opacity_gradual_end:   0.5 !default;
+
+
+// ============================================================================
+// Rotation & Angle Variables
+// ============================================================================
+
+$animate_angle_twist:           10deg !default;
+$animate_angle_gentle:          5deg !default;
+$animate_angle_rapid:           15deg !default;
+$animate_angle_shake:           10deg !default;
+$animate_angle_wobble:          15deg !default;
+$animate_angle_full:            360deg !default;
+
+/// Twist rotation
+$animate_angle_twist_slow:      5deg !default;
+$animate_angle_twist_fast:      15deg !default;
+
+/// Wobble angles
+$animate_angle_wobble_slow:     3deg !default;
+$animate_angle_wobble_fast:     10deg !default;
+$animate_angle_wobble_pendulum: 10deg !default;
+$animate_angle_wobble_skew:     5deg !default;
+
+/// Pop rotation
+$animate_angle_pop_rotate:      10deg !default;
+
+/// Nod angle
+$animate_angle_nod:             10deg !default;
+
+/// Sway angles
+$animate_angle_sway:            5deg !default;
+$animate_angle_sway_slow:       3deg !default;
+$animate_angle_sway_fast:       10deg !default;
+
+/// Wave angles
+$animate_angle_wave:            20deg !default;
+$animate_angle_wave_slow:       10deg !default;
+$animate_angle_wave_fast:       30deg !default;
+
+/// Rotate In/Out Angles
+$animate_rotate_in_angle:       -200deg !default;
+$animate_rotate_out_angle:      200deg !default;
+$animate_rotate_corner_angle:   45deg !default;
+$animate_rotate_corner_in_down_left:   -45deg !default;
+$animate_rotate_corner_in_down_right:  45deg !default;
+$animate_rotate_corner_in_up_left:     45deg !default;
+$animate_rotate_corner_in_up_right:    -90deg !default;
+
+/// Flip angles
+$animate_flip_in_angle:         -90deg !default;
+$animate_flip_out_angle:        90deg !default;
+$animate_flip_diagonal_angle:   360deg !default;
+
+/// Zoom rotation
+$animate_zoom_rotate_angle:     15deg !default;
+
+/// Lightspeed skew
+$animate_lightspeed_skew_start: -30deg !default;
+$animate_lightspeed_skew_end:   30deg !default;
+
+
+// ============================================================================
+// Translation Variables
+// ============================================================================
+
+$animate_translate_bounce:      -10px !default;
+$animate_translate_slide:       100% !default;
+$animate_translate_shake:       10px !default;
+
+/// Fade translate distance
+$animate_translate_fade:        20px !default;
+
+/// Slide fade translate distance
+$animate_translate_slide_fade:  50px !default;
+
+/// Zoom translate distance
+$animate_translate_zoom:        20px !default;
+
+/// Nod bounce height
+$animate_translate_nod_bounce:  5px !default;
+
+
+// ============================================================================
+// Bounce Variables
+// ============================================================================
+
+/// Default bounce timing function with elastic feel
+$animate_timing_function_bounce: cubic-bezier(0.28, 0.84, 0.42, 1) !default;
+
+/// Bounce height variables
+$animate_bounce_height:             -20% !default;
+$animate_bounce_height_extended:    -0.5em !default;
+$animate_bounce_rebound:            -0.125em !default;
+$animate_bounce_elastic_height:     -30% !default;
+
+/// Bounce multi-directional
+$animate_bounce_multi_x:            -10% !default;
+$animate_bounce_multi_y:            -20% !default;
+
+/// Bounce extended squash/stretch
+$animate_bounce_start_scale_x:      1.1 !default;
+$animate_bounce_start_scale_y:      0.9 !default;
+$animate_bounce_jump_scale_x:       0.9 !default;
+$animate_bounce_jump_scale_y:       1.1 !default;
+$animate_bounce_land_scale_x:       1.05 !default;
+$animate_bounce_land_scale_y:       0.95 !default;
+
+
+// ============================================================================
+// Wobble Variables
+// ============================================================================
+
+$animate_wobble_distance:       5% !default;
+
+
+// ============================================================================
+// Jiggle Variables
+// ============================================================================
+
+$animate_jiggle_amplitude:      5px !default;
+$animate_jiggle_amplitude_slow: 3px !default;
+
+
+// ============================================================================
+// Color Variables
+// ============================================================================
+
+$animate_base_color_start:      #ffffff !default;
+$animate_base_color_end:        #000000 !default;
+$animate_base_color_glow_01:    $N2405 !default;
+$animate_base_color_glow_02:    $N3005 !default;
+$animate_base_color_glow_03:    $N3605 !default;
+
+/// Flash colors
+$animate_color_flash_glow:      #fff !default;
+$animate_color_neon_flash:      #0ff !default;
+
+/// Pulse ring color
+$animate_color_pulse_ring:      rgba(0, 0, 0, 0.3) !default;
+$animate_pulse_ring_size:       20px !default;
+
+
+// ============================================================================
+// Heartbeat Variables
+// ============================================================================
+
+$animate_heartbeat_scale_small: 1.1 !default;
+
+
+// ============================================================================
+// Transition Duration Variables
+// ============================================================================
+
+$transition_duration_00:    0.25s !default;
+$transition_duration_01:    0.5s !default;
+$transition_duration_02:    1.0s !default;
+$transition_duration_03:    1.5s !default;
+$transition_duration_04:    2.0s !default;
+
+
+// ============================================================================
+// Slideshow Variables
+// ============================================================================
+
+$slideshow_time: 6s !default;