@wix/interact 2.0.3 → 2.0.4

package/rules/hover.md

@@ -1,4 +1,4 @@
-# Hover Trigger Rules
+# Hover Trigger Rules for @wix/interact
 
 This document contains rules for generating hover trigger interactions in `@wix/interact`. These rules cover all hover behavior patterns and common use cases.
 
@@ -10,11 +10,11 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ```typescript
 {
-    key: '[SOURCE_IDENTIFIER]',
+    key: '[SOURCE_KEY]',
     trigger: 'hover',
     effects: [
         {
-            key: '[TARGET_IDENTIFIER]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             fill: 'both',
             duration: [DURATION_MS],
@@ -26,8 +26,8 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 **Variables**:
 
-- `[SOURCE_IDENTIFIER]`: Unique identifier for hoverable element (e.g., '#menu-button', '#accordion-header'). Should equal the value of the data-interact-key attribute on the wrapping interact-element.
-- `[TARGET_IDENTIFIER]`: Unique identifier for animated element (can be same as trigger or different). Should equal the value of the data-interact-key attribute on the wrapping interact-element.
+- `[SOURCE_KEY]`: Unique identifier for hoverable element. Should equal the value of the `data-interact-key` attribute on the wrapping `<interact-element>`.
+- `[TARGET_KEY]`: Unique identifier for animated element (can be same as `[SOURCE_KEY]` for self-targeting, or different for cross-targeting).
 - `[EFFECT_TYPE]`: Either `namedEffect` or `keyframeEffect`
 - `[EFFECT_DEFINITION]`: Named effect object (e.g., { type: 'SlideIn', ...params }, { type: 'FadeIn', ...params }) or keyframe object (e.g., { name: 'custom-fade', keyframes: [{ opacity: 0 }, { opacity: 1 }] }, { name: 'custom-slide', keyframes: [{ transform: 'translateX(-100%)' }, { transform: 'translateX(0)' }] })
 - `[DURATION_MS]`: Animation duration in milliseconds (typically 200-500ms for micro-interactions)
@@ -38,7 +38,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 - `DURATION_MS`: 300 (for micro-interactions)
 - `EASING_FUNCTION`: 'ease-out' (for smooth feel)
-- `TARGET_IDENTIFIER`: Same as source key (self-targeting)
+- `[TARGET_KEY]`: Same as `[SOURCE_KEY]` for self-targeting
 
 **Common Use Cases**:
 
@@ -93,26 +93,25 @@ This document contains rules for generating hover trigger interactions in `@wix/
 }
 ```
 
-## Rule 2: Hover Enter/Leave Animations with Named Effects
+## Rule 2: Hover Alternate Animations (namedEffect / keyframeEffect)
 
-**Purpose**: Generate hover interactions using pre-built named effects from @wix/motion-presets
+**Purpose**: Hover interactions that play forward on mouse enter and reverse on mouse leave (`type: 'alternate'`).
 
 **Pattern**:
 
 ```typescript
 {
-    key: '[SOURCE_IDENTIFIER]',
+    key: '[SOURCE_KEY]',
     trigger: 'hover',
     params: {
         type: 'alternate'
     },
     effects: [
         {
-            key: '[TARGET_IDENTIFIER]',
-            namedEffect: {
-                type: '[NAMED_EFFECT_TYPE]',
-                [EFFECT_PROPERTIES]
-            },
+            key: '[TARGET_KEY]',
+            // Use namedEffect OR keyframeEffect:
+            namedEffect: { type: '[NAMED_EFFECT_TYPE]' },
+            // keyframeEffect: { name: '[EFFECT_NAME]', keyframes: [{ ... }, { ... }] },
             fill: 'both',
             reversed: [REVERSED_BOOL],
             duration: [DURATION_MS],
@@ -124,143 +123,56 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 **Variables**:
 
-- `[REVERSED_BOOL]`: Optional boolean value indicating whether the mouse enter animation is reversed (and mouse leave is forwards).
-- `[NAMED_EFFECT_TYPE]`: Name of the pre-built named effect from @wix/motion-presets to use.
-- `[EFFECT_PROPERTIES]`: Named effect specific properties (distance, angle, perspective, etc.)
+- `[REVERSED_BOOL]`: Optional. `true` to reverse the enter direction (mouse enter plays backwards, leave plays forwards).
+- `[NAMED_EFFECT_TYPE]`: Pre-built effect from `@wix/motion-presets`. Available hover presets:
+  - Size: `ExpandIn`, `Pulse`, `GrowIn`
+  - Fade/Blur: `FadeIn`, `Flash`, `BlurIn`
+  - Translate: `SlideIn`, `GlideIn`, `FloatIn`, `BounceIn`, `GlitchIn`
+  - Rotate: `SpinIn`, `TiltIn`, `ArcIn`, `TurnIn`, `FlipIn`, `Spin`, `Swing`
+  - Attention: `Bounce`, `DropIn`, `Rubber`, `Jello`, `Cross`, `Wiggle`, `Poke`
 - Other variables same as Rule 1
 
-**Available Named Effects for Hover**:
-
-- **Size Changes**: `ExpandIn`, `Pulse`, `GrowIn`
-- **Opacity/Blur Changes**: `FadeIn`, `Flash`, `BlurIn`
-- **Translation Effects**: `SlideIn`, `GlideIn`, `FloatIn`, `BounceIn`, `GlitchIn`
-- **Rotation Effects**: `SpinIn`, `TiltIn`, `ArcIn`, `TurnIn`, `FlipIn`, `Spin`, `Swing`
-- **Special Attention Effects**: `Bounce`, `DropIn`, `Rubber`, `Jello`, `Cross`, `Wiggle`, `Poke`
-
-**Important**: Spatial effects that change the hit-area considerably (translation, rotation) should use different source and target keys to avoid unwanted flickering on hover enter/leave.
+**Important**: Spatial effects (translation, rotation) that change the hit-area considerably should use different source and target keys to avoid flickering on enter/leave.
 
 **Default Values**:
 
-- `type`: 'alternate' (plays forward on enter, reverses on leave)
-- `DURATION_MS`: 250
+- `DURATION_MS`: 250–300
 - `EASING_FUNCTION`: 'ease-out'
 
-**Example Generations**:
+**Example — namedEffect (card scale)**:
 
 ```typescript
-// Card scale effect
 {
     key: 'feature-card',
     trigger: 'hover',
-    params: {
-        type: 'alternate'
-    },
+    params: { type: 'alternate' },
     effects: [
         {
             key: 'feature-card',
-            namedEffect: {
-                type: 'Pulse'
-            },
+            namedEffect: { type: 'Pulse' },
             fill: 'both',
             duration: 250,
             easing: 'ease-out'
         }
     ]
 }
-
-// Icon rotation effect (different source/target to avoid flickering)
-{
-    key: 'button',
-    trigger: 'hover',
-    params: {
-        type: 'alternate'
-    },
-    effects: [
-        {
-            key: 'button-icon',
-            namedEffect: {
-                type: 'SpinIn',
-                direction: 'clockwise'
-            },
-            fill: 'both',
-            duration: 200,
-            easing: 'ease-out'
-        }
-    ]
-}
-```
-
-## Rule 3: Hover Interactions with Alternate Pattern
-
-**Purpose**: Generate hover interactions that play forward on mouse enter and reverse on mouse leave
-
-**Pattern**:
-
-```typescript
-{
-    key: '[SOURCE_IDENTIFIER]',
-    trigger: 'hover',
-    params: {
-        type: 'alternate'
-    },
-    effects: [
-        {
-            key: '[TARGET_IDENTIFIER]',
-            keyframeEffect: {
-                name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
-                keyframes: [
-                    { [PROPERTY_1]: '[START_VALUE]', [PROPERTY_2]: '[START_VALUE]' },
-                    { [PROPERTY_1]: '[END_VALUE]', [PROPERTY_2]: '[END_VALUE]' }
-                ]
-            },
-            fill: 'both',
-            duration: [DURATION_MS],
-            easing: '[EASING_FUNCTION]'
-        }
-    ]
-}
 ```
 
-**Variables**:
-
-- `[UNIQUE_KEYFRAME_EFFECT_NAME]`: unique name for the keyframeEffect.
-- `[PROPERTY_N]`: animatable CSS property.
-- `[START/END_VALUE]`: values for the animated CSS properties in the start/end frame.
-- Other variables same as Rule 1
-
-**Best Properties for Hover Effects**:
-
-- `transform`: scale, translate, rotate transformations
-- `opacity`: fade effects
-- `box-shadow`: elevation changes
-- `filter`: blur, brightness, hue-rotate
-- `background-color`: color transitions
-- Spatial effects that change the hit-area of the animated element considerably (e.g. Translation effects, Rotation effects, etc.) should have different source and target to avoid unwanted flickering.
-
-**Default Values**:
-
-- `type`: 'alternate'
-- `DURATION_MS`: 300
-- `EASING_FUNCTION`: 'ease-out'
-
-**Example Generations**:
+**Example — keyframeEffect (card lift)**:
 
 ```typescript
-// Card hover with multiple properties
 {
     key: 'portfolio-item',
     trigger: 'hover',
-    params: {
-        type: 'alternate'
-    },
+    params: { type: 'alternate' },
     effects: [
         {
             key: 'portfolio-item',
             keyframeEffect: {
-                name: 'portfolio',
+                name: 'portfolio-lift',
                 keyframes: [
-                    { transform: 'translateY(0)', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', filter: 'brightness(1)' },
-                    { transform: 'translateY(-8px)', boxShadow: '0 20px 25px rgba(0,0,0,0.15)', filter: 'brightness(1.1)' }
+                    { transform: 'translateY(0)', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' },
+                    { transform: 'translateY(-8px)', boxShadow: '0 20px 25px rgba(0,0,0,0.15)' }
                 ]
             },
             fill: 'both',
@@ -269,33 +181,9 @@ This document contains rules for generating hover trigger interactions in `@wix/
         }
     ]
 }
-
-// Image overlay reveal
-{
-    key: 'gallery-image',
-    trigger: 'hover',
-    params: {
-        type: 'alternate'
-    },
-    effects: [
-        {
-            key: 'image-overlay',
-            keyframeEffect: {
-                name: 'image-overlay-slide',
-                keyframes: [
-                    { opacity: '0', transform: 'translateY(100%)' },
-                    { opacity: '1', transform: 'translateY(0)' }
-                ]
-            },
-            fill: 'both',
-            duration: 250,
-            easing: 'ease-out'
-        }
-    ]
-}
 ```
 
-## Rule 4: Hover Interactions with Repeat Pattern
+## Rule 3: Hover Interactions with Repeat Pattern
 
 **Purpose**: Generate hover interactions that restart animation each time mouse enters
 
@@ -303,14 +191,14 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ```typescript
 {
-    key: '[SOURCE_IDENTIFIER]',
+    key: '[SOURCE_KEY]',
     trigger: 'hover',
     params: {
         type: 'repeat'
     },
     effects: [
         {
-            key: '[TARGET_IDENTIFIER]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]'
@@ -384,7 +272,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 }
 ```
 
-## Rule 5: Hover Interactions with Play/Pause Pattern
+## Rule 4: Hover Interactions with Play/Pause Pattern
 
 **Purpose**: Generate hover interactions that pause/resume on hover (state-based control)
 
@@ -392,14 +280,14 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ```typescript
 {
-    key: '[SOURCE_IDENTIFIER]',
+    key: '[SOURCE_KEY]',
     trigger: 'hover',
     params: {
         type: 'state'
     },
     effects: [
         {
-            key: '[TARGET_IDENTIFIER]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             iterations: Infinity,
@@ -475,7 +363,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 }
 ```
 
-## Rule 6: Multi-Target Hover Effects
+## Rule 5: Multi-Target Hover Effects
 
 **Purpose**: Generate hover interactions that affect multiple elements from a single source
 
@@ -483,7 +371,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ```typescript
 {
-    key: '[SOURCE_IDENTIFIER]',
+    key: '[SOURCE_KEY]',
     trigger: 'hover',
     params: {
         type: '[BEHAVIOR_TYPE]'
@@ -512,7 +400,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 **Variables**:
 
 - `[BEHAVIOR_TYPE]`: type of behavior for the effect. use `alternate`, `repeat`, or `state` according to the previous rules.
-- `[FILL_N]`: Optional fill value for the Nth effect - same ass CSS animation-fill-mode (e.g. 'both', 'forwards', 'backwards').
+- `[FILL_N]`: Optional fill value for the Nth effect - same as CSS animation-fill-mode (e.g. 'both', 'forwards', 'backwards').
 - `[REVERSED_BOOL_N]`: Same as `[REVERSED_BOOL]` from Rule 2 only for the Nth effect.
 - `[DURATION_N]`: Same as `[DURATION_MS]` from Rule 1 only for the Nth effect.
 - `[DELAY_N]`: Delay in milliseconds of the Nth effect.
@@ -598,10 +486,9 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ## Best Practices for Hover Rules
 
-### Performance Guidelines
+### Timing and Pattern Guidelines
 
 1. **Keep durations short** (100-400ms) for responsiveness
-2. **Avoid animating layout properties**: width, height, margin, padding
 
 ### User Experience Guidelines
 
@@ -623,3 +510,31 @@ This document contains rules for generating hover trigger interactions in `@wix/
 - **Interactive elements**: 'ease-in-out' (smooth both ways)
 - **Attention effects**: 'ease-in-out' (natural feel)
 - **Continuous motion**: 'linear' (consistent speed)
+
+## Accessibility
+
+Use `@wix/interact`'s `conditions` API to skip hover animations for users who prefer reduced motion. Define a `prefers-motion` condition and reference it on any interaction that should be suppressed:
+
+```typescript
+{
+  conditions: {
+    'prefers-motion': { type: 'media', predicate: '(prefers-reduced-motion: no-preference)' }
+  },
+  interactions: [
+    {
+      key: 'card',
+      trigger: 'hover',
+      conditions: ['prefers-motion'],  // skipped when reduced-motion is preferred
+      effects: [/* ... */]
+    }
+  ]
+}
+```
+
+For pointer-primary devices only, also consider adding a `hover-capable` condition:
+
+```typescript
+'hover-capable': { type: 'media', predicate: '(hover: hover)' }
+```
+
+Use `trigger: 'interest'` instead of `'hover'` to also handle keyboard focus, which is the accessible equivalent of hover.

package/rules/integration.md

@@ -108,22 +108,23 @@ type InteractConfig = {
 
 ```typescript
 {
-  key: 'element-key',       // Matches data-interact-key
-  trigger: 'trigger-type',  // e.g., 'hover', 'click'
-  selector?: '.child-cls',  // Optional: Targets specific child inside the interact-element
-  listContainer?: '.list',  // Optional: A selector for the element containing a list, for interactions on lists
-  params?: { ... },         // Trigger-specific parameters
-  conditions?: ['cond-id'], // Array of condition IDs
-  effects: [ ... ]          // Array of effects to apply
+  key: 'element-key',              // Matches data-interact-key
+  trigger: 'trigger-type',         // e.g., 'hover', 'click'
+  selector?: '.child-cls',         // Optional: CSS selector to refine target within the element
+  listContainer?: '.list',         // Optional: CSS selector for a list container (enables list context)
+  listItemSelector?: '.item',      // Optional: CSS selector for items within listContainer
+  params?: { ... },                // Trigger-specific parameters
+  conditions?: ['cond-id'],        // Array of condition IDs
+  effects: [ ... ]                 // Array of effects to apply
 }
 ```
 
 ### Element Selection Hierarchy
 
-1. **`listContainer` + `selector`**: If both are present, uses `querySelectorAll(selector)` within the container to find all matching elements as list items.
-2. **`listContainer` only**: If present without `selector`, targets the immediate children of the container as list items.
-3. **`selector` only**: If present without `listContainer`, matches all elements within the root element (using `querySelectorAll`).
-4. **Fallback**: If neither is provided, targets the **first child** of `<interact-element>` in `web` or the root element in `react`.
+1. **`listContainer` + `listItemSelector`**: Selects matching items within the container as list items.
+2. **`listContainer` only**: Targets immediate children of the container as list items.
+3. **`selector` only**: Matches all elements within the root element (using `querySelectorAll`).
+4. **Fallback**: If none are provided, targets the **first child** of `<interact-element>` in `web` or the root element in `react`.
 
 ## 4. Generating Critical CSS for Entrance Animations
 
@@ -134,7 +135,9 @@ Generates critical CSS styles that prevent flash-of-unstyled-content (FOUC) for
 **Rules:**
 
 - MUST be called server-side or at build time to generate static CSS.
-- MUST set `data-interact-initial="true"` on elements that have an entrance effect.
+- MUST set `data-interact-initial="true"` on the `<interact-element>` whose first child should be hidden until the animation plays.
+- Only valid when: trigger is `viewEnter` + `params.type` is `'once'` + source element and target element are the same.
+- Do NOT use for `hover`, `click`, or `viewEnter` with `repeat`/`alternate`/`state` types.
 
 **Usage:**
 
@@ -167,12 +170,6 @@ const html = `
 `;
 ```
 
-**When to Use:**
-
-- For elements with an entrance effect that is triggered with `viewEnter`
-- To prevent elements from being visible before their entrance animation plays
-- For server-side rendering (SSR) or static site generation (SSG) scenarios
-
 ## 5. Triggers & Behaviors
 
 | Trigger        | Description                                     | Key Parameters                                                                                                            | Rules File          |
@@ -186,15 +183,9 @@ const html = `
 | `pointerMove`  | Mouse movement                                  | `hitArea`: 'self' (default) or 'root'; `axis`: 'x' or 'y' for keyframeEffect                                              | `./pointermove.md`  |
 | `animationEnd` | Chaining animations                             | `effectId`: ID of the previous effect                                                                                     | --                  |
 
-## 6. Effects & Animations
-
-Effects define _what_ happens. They can be inline or referenced by ID.
-
-### Effect Types
-
-#### 1. Named Effects (Pre-built effect library)>
+## 6. Named Effects & `registerEffects`
 
-Use the @wix/motion-presets library for consistency.
+To use `namedEffect` presets from `@wix/motion-presets`, register them before calling `Interact.create`. For full effect type syntax (`keyframeEffect`, `customEffect`, `TransitionEffect`, `ScrubEffect`), see `full-lean.md`.
 
 **Install:**
 
@@ -228,65 +219,6 @@ Interact.registerEffects({ FadeIn, ParallaxScroll });
 }
 ```
 
-#### 2. Keyframe Effects (Custom)
-
-Define explicit Web Animations API-like keyframes.
-
-```typescript
-{
-  keyframeEffect: {
-    name: 'custom-slide',
-    keyframes: [
-      { transform: 'translateY(20px)', opacity: 0 },
-      { transform: 'translateY(0)', opacity: 1 }
-    ]
-  },
-  duration: 500
-}
-```
-
-#### 3. Transition Effects
-
-Smoothly transition CSS properties.
-
-```typescript
-{
-  transition: {
-    duration: 300,
-    styleProperties: [{ name: 'backgroundColor', value: 'red' }]
-  }
-}
-```
-
-#### 4. Scroll Effects
-
-Used with `viewProgress`, linked to scroll progress while element is inside viewport.
-
-```typescript
-{
-  keyframeEffect: { ... },
-  rangeStart: { name: 'cover', offset: { value: 0, unit: 'percentage' } },
-  rangeEnd: { name: 'cover', offset: { value: 100, unit: 'percentage' } },
-  fill: 'both'
-}
-```
-
-#### 5. Mouse Effects
-
-Used with `pointerMove`, linked to mouse progress while moving over an element.
-
-```typescript
-{
-  namedEffect: { type: 'Track3DMouse' },
-  centeredToTarget: true
-}
-```
-
-### Targeting
-
-- **Self**: Omit `key` in the effect to target the trigger element. If using `selector` for trigger, also specify it again for the effect target.
-- **Cross-Targeting**: Specify a different `key` and/or `selector` in the effect to animate a different element.
-
 ## 7. Examples
 
 ### Basic Hover (Scale)

package/rules/pointermove.md

@@ -1142,6 +1142,16 @@ This example shows a pointer-driven slider where the X position controls both a
             },
             fill: 'both',
         },
+        'indicator-effect': {
+            keyframeEffect: {
+                name: 'indicator-fade-scale',
+                keyframes: [
+                    { opacity: '0.3', transform: 'scale(0.8)' },
+                    { opacity: '1', transform: 'scale(1)' },
+                ],
+            },
+            fill: 'both',
+        },
     },
 }
 ```
@@ -1223,44 +1233,29 @@ X axis controls `scaleX`, Y axis controls `scaleY`.
 
 ### Responsive Pointer Effects
 
-Adjusting pointer sensitivity based on device capabilities:
+`pointerMove` only fires on pointer-capable devices, but touch users still visit the page. Use the `conditions` config map to define device/motion guards — condition IDs are arbitrary strings you define, matched against the media query predicates you provide.
 
 ```typescript
 {
-    key: 'responsive-element',
-    trigger: 'pointerMove',
-    conditions: ['supports-hover', 'desktop-only'],
-    params: {
-        hitArea: 'self'
+    conditions: {
+        // Only run pointer effects on devices that support hover (non-touch)
+        'supports-hover': { type: 'media', predicate: '(hover: hover)' },
+        // Suppress animations for users who prefer reduced motion
+        'prefers-motion': { type: 'media', predicate: '(prefers-reduced-motion: no-preference)' },
     },
-    effects: [
-        {
-            key: 'responsive-element',
-            namedEffect: {
-                type: 'Tilt3DMouse',
-                angle: 20,
-                perspective: 800
-            },
-            centeredToTarget: true
-        }
-    ]
-},
-// Simplified version for touch devices
-{
-    key: 'responsive-element',
-    trigger: 'pointerMove',
-    conditions: ['touch-device'],
-    params: {
-        hitArea: 'self'
-    },
-    effects: [
+    interactions: [
         {
             key: 'responsive-element',
-            namedEffect: {
-                type: 'ScaleMouse',
-                scale: 1.02
-            },
-            centeredToTarget: true
+            trigger: 'pointerMove',
+            conditions: ['supports-hover', 'prefers-motion'],
+            params: { hitArea: 'self' },
+            effects: [
+                {
+                    key: 'responsive-element',
+                    namedEffect: { type: 'Tilt3DMouse', angle: 20, perspective: 800 },
+                    centeredToTarget: true
+                }
+            ]
         }
     ]
 }
@@ -1374,12 +1369,11 @@ Controlling movement direction for specific design needs:
 
 ### Performance Guidelines
 
-1. **Use hardware-accelerated properties** - prefer transforms over position changes
-2. **Limit simultaneous pointer effects** - too many can cause performance issues
-3. **Test on various devices** - pointer sensitivity varies across hardware
-4. **Cache DOM queries in customEffect** - avoid repeated `querySelector` calls
-5. **Use `requestAnimationFrame` sparingly** - the library already handles frame timing
-6. **Prefer `namedEffect` over `customEffect`** - named effects are optimized for GPU acceleration
+1. **Limit simultaneous pointer effects** - too many can cause performance issues
+2. **Test on various devices** - pointer sensitivity varies across hardware
+3. **Cache DOM queries outside `customEffect` callbacks** - avoid repeated `querySelector` calls inside the callback
+4. **Use `requestAnimationFrame` sparingly** - the library already handles frame timing
+5. **Prefer `namedEffect` over `customEffect`** - named effects are optimized for GPU acceleration
 
 ### Hit Area Guidelines
 
@@ -1397,20 +1391,6 @@ Controlling movement direction for specific design needs:
 4. **Consider responsive design** when setting centering
 5. **Centering affects how progress.x/y map to element position**
 
-### User Experience Guidelines
-
-1. **Keep pointer effects subtle** to avoid overwhelming users
-2. **Ensure effects enhance rather than distract** from content
-3. **Provide visual feedback** that feels natural and responsive
-4. **Test with actual users** to validate interaction quality
-
-### Accessibility Considerations
-
-1. **Respect `prefers-reduced-motion`** for all pointer animations
-2. **Ensure touch device compatibility** with appropriate alternatives
-3. **Don't rely solely on pointer effects** for important interactions
-4. **Provide keyboard alternatives** for interactive elements
-
 ### Common Use Cases by Pattern
 
 **Single Element 3D Effects (Rule 1)** - `namedEffect`:
@@ -1512,7 +1492,6 @@ Controlling movement direction for specific design needs:
 **customEffect not updating smoothly**:
 
 - Add `transitionDuration` and `transitionEasing` for smoother transitions
-- Ensure style changes use transform/opacity for GPU acceleration
 - Avoid expensive calculations inside the callback
 - Consider debouncing complex logic
 
@@ -1551,7 +1530,3 @@ Controlling movement direction for specific design needs:
 | Custom physics              | `customEffect`                             | Full control over calculations                         |
 | Velocity-based effects      | `customEffect`                             | Access to `progress.v`                                 |
 | Grid/particle systems       | `customEffect`                             | Can manipulate many elements                           |
-
----
-
-These rules provide comprehensive coverage for PointerMove trigger interactions in `@wix/interact`, supporting all hit area configurations, centering options, named effect types, keyframe effects, composite animations, and custom effect patterns.