@wix/interact 2.0.0-rc.8 → 2.0.1

package/rules/pointermove.md

@@ -8,7 +8,7 @@ These rules help generate pointer-driven interactions using the `@wix/interact`
 
 The `pointerMove` trigger provides 2D progress (x and y coordinates). You can use:
 
-1. **`namedEffect`** (Preferred): Pre-built mouse presets from `@wix/motion` that handle 2D progress internally
+1. **`namedEffect`** (Preferred): Pre-built mouse presets from `@wix/motion-presets` that handle 2D progress internally
 2. **`customEffect`** (Advanced): Custom function receiving the 2D progress object for full control
 3. **`keyframeEffect`** (Single-axis): The pointer position on a single axis is mapped to linear 0-1 progress for keyframe animations. Use `axis: 'x'` or `axis: 'y'` (defaults to `'y'`)
 
@@ -87,7 +87,7 @@ Controls how the progress range is calculated:
 - `[TARGET_KEY]`: Unique identifier for target element to animate (can be same as source or different)
 - `[HIT_AREA]`: 'self' (mouse within source element) or 'root' (mouse anywhere in viewport)
 - `[3D_EFFECT_TYPE]`: 'Tilt3DMouse', 'Track3DMouse', 'SwivelMouse'
-- `[EFFECT_PROPERTIES]`: Named effect specific properties (angle, perspective, power, etc.)
+- `[EFFECT_PROPERTIES]`: Named effect specific properties (angle, perspective, direction, etc.)
 - `[CENTERED_TO_TARGET]`: true (center range at target) or false (use source element bounds)
 - `[UNIQUE_EFFECT_ID]`: Optional unique identifier
 
@@ -106,8 +106,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'Tilt3DMouse',
                 angle: 15,
-                perspective: 1000,
-                power: 'medium'
+                perspective: 1000
             }
         }
     ]
@@ -141,9 +140,8 @@ Controls how the progress range is calculated:
             key: '[TARGET_KEY]',
             namedEffect: {
                 type: '[MOVEMENT_EFFECT_TYPE]',
-                distance: { value: [DISTANCE_VALUE], type: '[DISTANCE_UNIT]' },
-                axis: '[AXIS_CONSTRAINT]',
-                power: '[POWER_LEVEL]'
+                distance: { value: [DISTANCE_VALUE], unit: '[DISTANCE_UNIT]' },
+                axis: '[AXIS_CONSTRAINT]'
             },
             centeredToTarget: [CENTERED_TO_TARGET],
             effectId: '[UNIQUE_EFFECT_ID]'
@@ -158,7 +156,6 @@ Controls how the progress range is calculated:
 - `[DISTANCE_VALUE]`: Numeric value for movement distance
 - `[DISTANCE_UNIT]`: 'px', 'percentage', 'vw', 'vh'
 - `[AXIS_CONSTRAINT]`: 'both', 'horizontal', 'vertical'
-- `[POWER_LEVEL]`: 'soft', 'medium', 'hard'
 - Other variables same as Rule 1
 
 **Example - Cursor Follower Element**:
@@ -174,9 +171,8 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 50, type: 'percentage' },
-                axis: 'both',
-                power: 'medium'
+                distance: { value: 50, unit: 'percentage' },
+                axis: 'both'
             },
             centeredToTarget: false
         }
@@ -198,9 +194,8 @@ Controls how the progress range is calculated:
             key: 'floating-element',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 30, type: 'px' },
-                axis: 'both',
-                power: 'soft'
+                distance: { value: 30, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true,
             effectId: 'hero-float'
@@ -248,7 +243,7 @@ Controls how the progress range is calculated:
 **Variables**:
 
 - `[SCALE_EFFECT_TYPE]`: 'ScaleMouse', 'BlobMouse', 'SkewMouse'
-- `[SCALE_PROPERTIES]`: Effect-specific properties (scale, distance, axis, power)
+- `[SCALE_PROPERTIES]`: Effect-specific properties (scale, distance, axis)
 - Other variables same as Rule 1
 
 **Example - Interactive Scale Button**:
@@ -266,9 +261,8 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.1,
-                distance: { value: 100, type: 'px' },
-                axis: 'both',
-                power: 'medium'
+                distance: { value: 100, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true
         }
@@ -291,8 +285,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'BlobMouse',
                 intensity: 0.8,
-                smoothness: 0.6,
-                power: 'medium'
+                smoothness: 0.6
             },
             effectId: 'blob-morph'
         }
@@ -339,7 +332,7 @@ Controls how the progress range is calculated:
 **Variables**:
 
 - `[VISUAL_EFFECT_TYPE]`: 'BlurMouse', 'SpinMouse'
-- `[VISUAL_PROPERTIES]`: Effect-specific properties (blur amount, rotation speed, power)
+- `[VISUAL_PROPERTIES]`: Effect-specific properties (blur amount, rotation speed)
 - Other variables same as Rule 1
 
 **Example - Motion Blur Card**:
@@ -357,8 +350,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'BlurMouse',
                 blurAmount: 5,
-                motionIntensity: 0.7,
-                power: 'medium'
+                motionIntensity: 0.7
             },
             centeredToTarget: true
         }
@@ -381,8 +373,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'SpinMouse',
                 rotationSpeed: 0.5,
-                direction: 'clockwise',
-                power: 'soft'
+                direction: 'clockwise'
             },
             centeredToTarget: false,
             effectId: 'icon-spin'
@@ -418,8 +409,7 @@ Controls how the progress range is calculated:
             key: '[BACKGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[BACKGROUND_EFFECT_TYPE]',
-                distance: { value: [BACKGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
-                power: '[BACKGROUND_POWER]'
+                distance: { value: [BACKGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' }
             },
             centeredToTarget: [CENTERED_TO_TARGET]
         },
@@ -427,8 +417,7 @@ Controls how the progress range is calculated:
             key: '[MIDGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[MIDGROUND_EFFECT_TYPE]',
-                distance: { value: [MIDGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
-                power: '[MIDGROUND_POWER]'
+                distance: { value: [MIDGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' }
             },
             centeredToTarget: [CENTERED_TO_TARGET]
         },
@@ -436,8 +425,7 @@ Controls how the progress range is calculated:
             key: '[FOREGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[FOREGROUND_EFFECT_TYPE]',
-                distance: { value: [FOREGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
-                power: '[FOREGROUND_POWER]'
+                distance: { value: [FOREGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' }
             },
             centeredToTarget: [CENTERED_TO_TARGET]
         }
@@ -451,7 +439,6 @@ Controls how the progress range is calculated:
 - `[*_LAYER_KEY]`: Unique identifier for different layer elements
 - `[*_EFFECT_TYPE]`: Named effects for each layer (typically movement effects)
 - `[*_DISTANCE]`: Movement distance for each layer (creating depth)
-- `[*_POWER]`: Power level for each layer response
 - Other variables same as previous rules
 
 **Example - Parallax Card Layers**:
@@ -468,9 +455,8 @@ Controls how the progress range is calculated:
             key: 'bg-layer',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 15, type: 'px' },
-                axis: 'both',
-                power: 'soft'
+                distance: { value: 15, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true
         },
@@ -478,9 +464,8 @@ Controls how the progress range is calculated:
             key: 'mid-layer',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 25, type: 'px' },
-                axis: 'both',
-                power: 'medium'
+                distance: { value: 25, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true
         },
@@ -488,9 +473,8 @@ Controls how the progress range is calculated:
             key: 'fg-layer',
             namedEffect: {
                 type: 'BounceMouse',
-                distance: { value: 35, type: 'px' },
-                axis: 'both',
-                power: 'medium'
+                distance: { value: 35, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true
         }
@@ -512,9 +496,8 @@ Controls how the progress range is calculated:
             key: 'hero-bg',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 20, type: 'px' },
-                axis: 'both',
-                power: 'soft'
+                distance: { value: 20, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true
         },
@@ -522,9 +505,8 @@ Controls how the progress range is calculated:
             key: 'hero-content',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 40, type: 'px' },
-                axis: 'horizontal',
-                power: 'medium'
+                distance: { value: 40, unit: 'px' },
+                axis: 'horizontal'
             },
             centeredToTarget: true
         },
@@ -533,8 +515,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.05,
-                distance: { value: 60, type: 'px' },
-                power: 'medium'
+                distance: { value: 60, unit: 'px' }
             },
             centeredToTarget: true
         }
@@ -610,8 +591,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'Tilt3DMouse',
                 angle: 12,
-                perspective: 1000,
-                power: 'soft'
+                perspective: 1000
             },
             centeredToTarget: true
         },
@@ -619,9 +599,8 @@ Controls how the progress range is calculated:
             key: 'card-shadow',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 20, type: 'px' },
-                axis: 'both',
-                power: 'soft'
+                distance: { value: 20, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: true
         }
@@ -644,8 +623,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.05,
-                distance: { value: 80, type: 'px' },
-                power: 'medium'
+                distance: { value: 80, unit: 'px' }
             },
             centeredToTarget: true
         },
@@ -653,9 +631,8 @@ Controls how the progress range is calculated:
             key: 'nav-indicator',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 15, type: 'px' },
-                axis: 'horizontal',
-                power: 'hard'
+                distance: { value: 15, unit: 'px' },
+                axis: 'horizontal'
             },
             centeredToTarget: false
         }
@@ -689,7 +666,7 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: '[FOLLOWER_EFFECT_TYPE]',
-                distance: { value: [FOLLOWER_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [FOLLOWER_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 [FOLLOWER_PROPERTIES]
             },
             centeredToTarget: false,
@@ -721,9 +698,8 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 0, type: 'px' },
-                axis: 'both',
-                power: 'hard'
+                distance: { value: 0, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: false,
             effectId: 'global-cursor'
@@ -745,9 +721,8 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 50, type: 'px' },
-                axis: 'both',
-                power: 'soft'
+                distance: { value: 50, unit: 'px' },
+                axis: 'both'
             },
             centeredToTarget: false,
             effectId: 'decoration-follower'
@@ -1264,8 +1239,7 @@ Adjusting pointer sensitivity based on device capabilities:
             namedEffect: {
                 type: 'Tilt3DMouse',
                 angle: 20,
-                perspective: 800,
-                power: 'medium'
+                perspective: 800
             },
             centeredToTarget: true
         }
@@ -1284,8 +1258,7 @@ Adjusting pointer sensitivity based on device capabilities:
             key: 'responsive-element',
             namedEffect: {
                 type: 'ScaleMouse',
-                scale: 1.02,
-                power: 'soft'
+                scale: 1.02
             },
             centeredToTarget: true
         }
@@ -1310,8 +1283,7 @@ Different hit areas for different interaction contexts:
             key: 'local-card',
             namedEffect: {
                 type: 'Tilt3DMouse',
-                angle: 15,
-                power: 'medium'
+                angle: 15
             },
             centeredToTarget: true
         }
@@ -1329,8 +1301,7 @@ Different hit areas for different interaction contexts:
             key: 'ambient-element',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 30, type: 'px' },
-                power: 'soft'
+                distance: { value: 30, unit: 'px' }
             },
             centeredToTarget: false
         }
@@ -1354,9 +1325,8 @@ Controlling movement direction for specific design needs:
             key: 'horizontal-slider',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 100, type: 'px' },
-                axis: 'horizontal',
-                power: 'medium'
+                distance: { value: 100, unit: 'px' },
+                axis: 'horizontal'
             },
             centeredToTarget: true
         },
@@ -1365,9 +1335,8 @@ Controlling movement direction for specific design needs:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.2,
-                distance: { value: 150, type: 'px' },
-                axis: 'vertical',
-                power: 'medium'
+                distance: { value: 150, unit: 'px' },
+                axis: 'vertical'
             },
             centeredToTarget: true
         }
@@ -1527,7 +1496,6 @@ Controlling movement direction for specific design needs:
 
 **Poor pointer responsiveness**:
 
-- Check `power` settings (soft/medium/hard) for namedEffect
 - Verify `hitArea` configuration
 - Test `centeredToTarget` settings
 - Ensure target elements are properly positioned