@wix/interact 2.0.0-rc.8 → 2.0.0

package/rules/full-lean.md

@@ -34,7 +34,7 @@ Interact.create(config);
 
 ```html
 <script type="module">
-  import { Interact } from 'https://esm.sh/@wix/interact@2.0.0-rc.4';
+  import { Interact } from 'https://esm.sh/@wix/interact';
 
   const config = {
     // config-props
@@ -48,7 +48,7 @@ Interact.create(config);
 
 - Use `generate(config)` to create critical CSS that hides elements until their `viewEnter` entrance animation plays.
 - Add `data-interact-initial="true"` to the `<interact-element>` that should have its first child hidden initially.
-- Only use `data-interact-initial="true"` for `<interact-element>` with `viewEnter` trigger.
+- Only use `data-interact-initial="true"` for `<interact-element>` with `viewEnter` trigger and `type: 'once'`, where the source and target elements are the same.
 - Do NOT use for `hover` or `click` interactions.
 
 **Usage:**
@@ -115,9 +115,10 @@ This configuration declares what user/system triggers occur on which source elem
   - **Purpose**: Named predicates that gate interactions/effects by runtime context.
   - **Key (string)**: The condition id. MUST be unique across the registry.
   - **Value (Condition)**:
-    - **type**: `'media' | 'container'`
+    - **type**: `'media' | 'container' | 'selector'`
       - `'media'`: The predicate MUST be a valid CSS media query expression without the outer `@media` keyword (e.g., `'(min-width: 768px)'`).
       - `'container'`: The predicate SHOULD be a valid CSS container query condition string relative to the relevant container context.
+      - `'selector'`: The predicate is a CSS selector pattern. If it contains `&`, the `&` is replaced with the base element selector; otherwise the predicate is appended to the base selector. Used for conditional styling (e.g., `:nth-of-type(odd)`, `.active`).
     - **predicate?**: OPTIONAL textual predicate for the given type. If omitted, the condition is treated as always-true (i.e., a no-op guard).
 
 - **interactions: Interaction[]**
@@ -131,13 +132,13 @@ This configuration declares what user/system triggers occur on which source elem
       - OPTIONAL. A CSS selector used to select items within `listContainer`.
     - **trigger: TriggerType**
       - REQUIRED. One of:
-        - `'hover' | 'click'`: Pointer interactions.
+        - `'hover' | 'click' | 'activate' | 'interest'`: Pointer interactions (`activate` = click with keyboard Space/Enter; `interest` = hover with focus).
         - `'viewEnter' | 'pageVisible' | 'viewProgress'`: Viewport visibility/progress triggers.
         - `'animationEnd'`: Fires when a specific effect completes on the source element.
         - `'pointerMove'`: Continuous pointer motion over an area.
     - **params?: TriggerParams**
       - OPTIONAL. Parameter object that MUST match the trigger:
-        - hover/click: `StateParams | PointerTriggerParams`
+        - hover/click/activate/interest: `StateParams | PointerTriggerParams` (activate uses same params as click; interest uses same params as hover).
           - `StateParams.method`: `'add' | 'remove' | 'toggle' | 'clear'`
           - `PointerTriggerParams.type?`: `'once' | 'repeat' | 'alternate' | 'state'`
           - Usage:
@@ -153,13 +154,14 @@ This configuration declares what user/system triggers occur on which source elem
               - `'once'`: Play once and remove the listener (hover attaches only the enter listener; no leave).
               - `'state'`: Hover — play on enter if idle/paused, pause on leave if running. Click — toggle play/pause on successive clicks until finished.
         - viewEnter/pageVisible/viewProgress: `ViewEnterParams`
-          - `type?`: `'once' | 'repeat' | 'alternate'`
+          - `type?`: `'once' | 'repeat' | 'alternate' | 'state'`
           - `threshold?`: number in [0,1] describing intersection threshold
           - `inset?`: string CSS-style inset for rootMargin/observer geometry
           - Usage:
             - `'once'`: Play on first visibility and unobserve the element.
             - `'repeat'`: Play each time the element re‑enters visibility according to `threshold`/`inset`.
             - `'alternate'`: Triggers on re‑entries; if you need alternating direction, set it on the effect (e.g., `alternate: true`) rather than relying on the trigger.
+            - `'state'`: Play on entry, pause on exit (for looping/continuous animations).
             - `threshold`: Passed to `IntersectionObserver.threshold` — typical values are 0.1–0.6 for entrances.
             - `inset`: Applied as vertical `rootMargin` (`top/bottom`), e.g., `'-100px'` to trigger earlier/later; left/right remain 0.
             - Note: For `viewProgress`, `threshold` and `inset` are ignored; progress is driven by ViewTimeline/scroll scenes. Control the range via `ScrubEffect.rangeStart/rangeEnd` and `namedEffect.range`.
@@ -168,10 +170,11 @@ This configuration declares what user/system triggers occur on which source elem
           - Usage: Fire when the specified effect (by `effectId`) on the source element finishes, useful for chaining sequences.
         - pointerMove: `PointerMoveParams`
           - `hitArea?`: `'root' | 'self'` (default `'self'`)
+          - `axis?`: `'x' | 'y'` - when using `keyframeEffect` with `pointerMove`, selects which pointer coordinate maps to linear 0-1 progress; defaults to `'y'`. Ignored for `namedEffect` and `customEffect`.
           - Usage:
             - `'self'`: Track pointer within the source element’s bounds.
             - `'root'`: Track pointer anywhere in the viewport (document root).
-            - Only use with `ScrubEffect` mouse presets (`namedEffect`) or `customEffect` that consumes pointer progress; avoid `keyframeEffect` with `pointerMove`.
+            - Only use with `ScrubEffect` mouse presets (`namedEffect`) or `customEffect` that consumes pointer progress; avoid `keyframeEffect` with `pointerMove` unless mapping a single axis via `axis`.
           - When using `customEffect` with `pointerMove`, the progress parameter is an object:
             - ```typescript
               type Progress = {
@@ -343,7 +346,7 @@ The config remains the same for both integrations—only the HTML/JSX setup diff
      - `delay?`: number (ms)
      - One of:
        - `keyframeEffect`: `{ name: string; keyframes: Keyframe[] }`
-       - `namedEffect`: `NamedEffect` (from `@wix/motion`)
+       - `namedEffect`: `NamedEffect` (from `@wix/motion-presets`)
        - `customEffect`: `(element: Element, progress: any) => void`
 
   2. **ScrubEffect** (animation driven by scroll/progress)
@@ -391,15 +394,10 @@ The config remains the same for both integrations—only the HTML/JSX setup diff
 
 ### Authoring rules for animation payloads (`namedEffect`, `keyframeEffect`, `customEffect`):
 
-- **namedEffect (Preferred)**: Use first for best performance. These are pre-built presets from `@wix/motion` that are GPU-friendly and tuned.
-  - Structure: `namedEffect: { type: '<PresetName>', /* optional preset options like direction (bottom|top|left|right), power ('soft'|'medium'|'hard'), etc. do not use those without having proper documentation of which options exist and of what types. */ }`
-  - Short list of common preset names:
-    - Entrance: `FadeIn`, `BounceIn`, `SlideIn`, `FlipIn`, `ArcIn`
-    - Ongoing: `Pulse`, `Spin`, `Wiggle`, `Bounce`
-    - Scroll: `ParallaxScroll`, `FadeScroll`, `RevealScroll`, `TiltScroll`
-    - For scroll-effects used with the `viewProgress` trigger, the `namedEffect` options MUST include `range: 'in' | 'out' | 'continuous'`. Prefer `range: 'continuous'` for simplicity.
-    - Mouse: For `pointerMove` (mouse-effects), prefer `namedEffect` presets (e.g., `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`); avoid `keyframeEffect` with `pointerMove` since progress is two‑dimensional.
-    - Mouse: `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`
+- **namedEffect (Preferred)**: Use first for best performance. These are pre-built presets from `@wix/motion-presets` that are GPU-friendly and tuned.
+  - Structure: `namedEffect: { type: '<PresetName>', /* optional preset options like direction (bottom|top|left|right), etc. do not use those without having proper documentation of which options exist and of what types. */ }`
+  - Short list of common preset names: - Entrance: `FadeIn`, `BounceIn`, `SlideIn`, `F
+lipIn`, `ArcIn` - Ongoing: `Pulse`, `Spin`, `Wiggle`, `Bounce` - Scroll: `ParallaxScroll`, `FadeScroll`, `RevealScroll`, `TiltScroll` - For scroll-effects used with the `viewProgress` trigger, the `namedEffect` options MUST include `range: 'in' | 'out' | 'continuous'`. Prefer `range: 'continuous'` for simplicity. - Mouse: For `pointerMove` (mouse-effects), prefer `namedEffect` presets (e.g., `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`); avoid `keyframeEffect` with `pointerMove` since progress is two‑dimensional. - Mouse: `TrackMouse`, `Tilt3DMouse`, `ScaleMouse`, `BlurMouse`
 - **keyframeEffect (Default for custom animations)**: Prefer this when you need a custom-made animation.
   - Structure: `keyframeEffect: { name: string; keyframes: Keyframe[] }` (keyframes use standard CSS/WAAPI properties).
   - Not compatible with `pointerMove` (mouse-effects) because pointer progress is two‑dimensional; use `customEffect` for custom pointer‑driven animations.

package/rules/hover.md

@@ -95,7 +95,7 @@ This document contains rules for generating hover trigger interactions in `@wix/
 
 ## Rule 2: Hover Enter/Leave Animations with Named Effects
 
-**Purpose**: Generate hover interactions using pre-built named effects from @wix/motion
+**Purpose**: Generate hover interactions using pre-built named effects from @wix/motion-presets
 
 **Pattern**:
 
@@ -125,7 +125,7 @@ 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 to use.
+- `[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.)
 - Other variables same as Rule 1
 

package/rules/integration.md

@@ -169,20 +169,22 @@ const html = `
 
 **When to Use:**
 
-- For elements with an entrance efffect that is triggered a with `viewEnter`
+- 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          |
-| :------------- | :------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | :------------------ |
-| `hover`        | Mouse enter/leave                | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./hover.md`        |
-| `click`        | Mouse click                      | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./click.md`        |
-| `viewEnter`    | Element enters viewport          | `type`: 'once', 'alternate', 'repeat', 'state'; `threshold` (0-1)                                                         | `./viewEnter.md`    |
-| `viewProgress` | Scroll-driven using ViewTimeline | (No specific params, uses effect ranges)                                                                                  | `./viewprogress.md` |
-| `pointerMove`  | Mouse movement                   | `hitArea`: 'self' (default) or 'root'                                                                                     | `./pointermove.md`  |
-| `animationEnd` | Chaining animations              | `effectId`: ID of the previous effect                                                                                     | --                  |
+| Trigger        | Description                                     | Key Parameters                                                                                                            | Rules File          |
+| :------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | :------------------ |
+| `hover`        | Mouse enter/leave                               | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./hover.md`        |
+| `click`        | Mouse click                                     | `type`: 'once', 'alternate', 'repeat', 'state' for animations, or `method`: 'add', 'remove', 'toggle', 'clear' for states | `./click.md`        |
+| `activate`     | Accessible click (click + keyboard Space/Enter) | Same as `click` with keyboard support                                                                                     | `./click.md`        |
+| `interest`     | Accessible hover (hover + focus)                | Same as `hover` with focus support                                                                                        | `./hover.md`        |
+| `viewEnter`    | Element enters viewport                         | `type`: 'once', 'alternate', 'repeat', 'state'; `threshold` (0-1)                                                         | `./viewenter.md`    |
+| `viewProgress` | Scroll-driven using ViewTimeline                | (No specific params, uses effect ranges)                                                                                  | `./viewprogress.md` |
+| `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
 

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'`)
 
@@ -141,7 +141,7 @@ Controls how the progress range is calculated:
             key: '[TARGET_KEY]',
             namedEffect: {
                 type: '[MOVEMENT_EFFECT_TYPE]',
-                distance: { value: [DISTANCE_VALUE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [DISTANCE_VALUE], unit: '[DISTANCE_UNIT]' },
                 axis: '[AXIS_CONSTRAINT]',
                 power: '[POWER_LEVEL]'
             },
@@ -174,7 +174,7 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 50, type: 'percentage' },
+                distance: { value: 50, unit: 'percentage' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -198,7 +198,7 @@ Controls how the progress range is calculated:
             key: 'floating-element',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 30, type: 'px' },
+                distance: { value: 30, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -266,7 +266,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.1,
-                distance: { value: 100, type: 'px' },
+                distance: { value: 100, unit: 'px' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -418,7 +418,7 @@ Controls how the progress range is calculated:
             key: '[BACKGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[BACKGROUND_EFFECT_TYPE]',
-                distance: { value: [BACKGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [BACKGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 power: '[BACKGROUND_POWER]'
             },
             centeredToTarget: [CENTERED_TO_TARGET]
@@ -427,7 +427,7 @@ Controls how the progress range is calculated:
             key: '[MIDGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[MIDGROUND_EFFECT_TYPE]',
-                distance: { value: [MIDGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [MIDGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 power: '[MIDGROUND_POWER]'
             },
             centeredToTarget: [CENTERED_TO_TARGET]
@@ -436,7 +436,7 @@ Controls how the progress range is calculated:
             key: '[FOREGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[FOREGROUND_EFFECT_TYPE]',
-                distance: { value: [FOREGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [FOREGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 power: '[FOREGROUND_POWER]'
             },
             centeredToTarget: [CENTERED_TO_TARGET]
@@ -468,7 +468,7 @@ Controls how the progress range is calculated:
             key: 'bg-layer',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 15, type: 'px' },
+                distance: { value: 15, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -478,7 +478,7 @@ Controls how the progress range is calculated:
             key: 'mid-layer',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 25, type: 'px' },
+                distance: { value: 25, unit: 'px' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -488,7 +488,7 @@ Controls how the progress range is calculated:
             key: 'fg-layer',
             namedEffect: {
                 type: 'BounceMouse',
-                distance: { value: 35, type: 'px' },
+                distance: { value: 35, unit: 'px' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -512,7 +512,7 @@ Controls how the progress range is calculated:
             key: 'hero-bg',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 20, type: 'px' },
+                distance: { value: 20, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -522,7 +522,7 @@ Controls how the progress range is calculated:
             key: 'hero-content',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 40, type: 'px' },
+                distance: { value: 40, unit: 'px' },
                 axis: 'horizontal',
                 power: 'medium'
             },
@@ -533,7 +533,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.05,
-                distance: { value: 60, type: 'px' },
+                distance: { value: 60, unit: 'px' },
                 power: 'medium'
             },
             centeredToTarget: true
@@ -619,7 +619,7 @@ Controls how the progress range is calculated:
             key: 'card-shadow',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 20, type: 'px' },
+                distance: { value: 20, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -644,7 +644,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.05,
-                distance: { value: 80, type: 'px' },
+                distance: { value: 80, unit: 'px' },
                 power: 'medium'
             },
             centeredToTarget: true
@@ -653,7 +653,7 @@ Controls how the progress range is calculated:
             key: 'nav-indicator',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 15, type: 'px' },
+                distance: { value: 15, unit: 'px' },
                 axis: 'horizontal',
                 power: 'hard'
             },
@@ -689,7 +689,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,7 +721,7 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 0, type: 'px' },
+                distance: { value: 0, unit: 'px' },
                 axis: 'both',
                 power: 'hard'
             },
@@ -1329,7 +1329,7 @@ Different hit areas for different interaction contexts:
             key: 'ambient-element',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 30, type: 'px' },
+                distance: { value: 30, unit: 'px' },
                 power: 'soft'
             },
             centeredToTarget: false
@@ -1354,7 +1354,7 @@ Controlling movement direction for specific design needs:
             key: 'horizontal-slider',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 100, type: 'px' },
+                distance: { value: 100, unit: 'px' },
                 axis: 'horizontal',
                 power: 'medium'
             },
@@ -1365,7 +1365,7 @@ Controlling movement direction for specific design needs:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.2,
-                distance: { value: 150, type: 'px' },
+                distance: { value: 150, unit: 'px' },
                 axis: 'vertical',
                 power: 'medium'
             },

package/rules/scroll-list.md

@@ -17,7 +17,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[CONTAINER_SELECTOR]',
+    key: '[CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
@@ -121,7 +121,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 **Variables**:
 
 - `[ITEM_KEY]`: Unique identifier for individual list items
-- `[ITEM_NAMED_EFFECT]`: Item-level scroll effects from @wix/motion scroll animations:
+- `[ITEM_NAMED_EFFECT]`: Item-level scroll effects from @wix/motion-presets scroll animations:
   - **Reveal/Fade**: 'FadeScroll', 'BlurScroll', 'RevealScroll', 'ShapeScroll', 'ShuttersScroll'
   - **Movement**: 'MoveScroll', 'SlideScroll', 'PanScroll', 'SkewPanScroll'
   - **Scale**: 'GrowScroll', 'ShrinkScroll', 'StretchScroll'
@@ -192,11 +192,11 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[ITEM_CONTAINER_SELECTOR]',
+    key: '[ITEM_CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[CONTENT_SELECTOR]',
+            key: '[CONTENT_KEY]',
             namedEffect: {
                 type: '[CONTENT_NAMED_EFFECT]'
             },
@@ -211,9 +211,9 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 **Variables**:
 
-- `[ITEM_CONTAINER_SELECTOR]`: CSS selector for the containing list item
-- `[CONTENT_SELECTOR]`: CSS selector for content within the item
-- `[CONTENT_NAMED_EFFECT]`: Content-level scroll effects from @wix/motion:
+- `[ITEM_CONTAINER_KEY]`: Unique identifier for the containing list item
+- `[CONTENT_KEY]`: Unique identifier for content within the item (or use `selector` for CSS selector)
+- `[CONTENT_NAMED_EFFECT]`: Content-level scroll effects from @wix/motion-presets:
   - **Opacity/Visibility**: 'FadeScroll', 'BlurScroll'
   - **Reveal**: 'RevealScroll', 'ShapeScroll', 'ShuttersScroll'
   - **3D Transforms**: 'TiltScroll', 'FlipScroll', 'ArcScroll', 'TurnScroll', 'Spin3dScroll'
@@ -299,7 +299,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[CONTAINER_SELECTOR]',
+    key: '[CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
@@ -510,7 +510,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
     },
     interactions: [
         {
-            key: '[ITEM_SELECTOR_N]',
+            key: '[ITEM_KEY_N]',
             trigger: 'viewProgress',
             effects: [
                 {
@@ -637,12 +637,12 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[LIST_CONTAINER_SELECTOR]',
+    key: '[LIST_CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[DYNAMIC_CONTENT_SELECTOR]',
-            customEffect: (element, progress, params) => {
+            key: '[DYNAMIC_CONTENT_KEY]',
+            customEffect: (element, progress) => {
                 // progress is 0-1 representing scroll position within range
                 [CUSTOM_CALCULATION_LOGIC]
                 [DYNAMIC_CONTENT_UPDATE]

package/rules/viewenter.md

@@ -17,7 +17,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'once',
@@ -26,7 +26,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
     },
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -39,8 +39,8 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 **Variables**:
 
-- `[SOURCE_SELECTOR]`: Unique identifier for element that triggers when visible (often same as target key)
-- `[TARGET_SELECTOR]`: Unique identifier for element to animate (can be same as source or different)
+- `[SOURCE_KEY]`: Unique identifier for element that triggers when visible (often same as target key)
+- `[TARGET_KEY]`: Unique identifier for element to animate (can be same as source or different)
 - `[VISIBILITY_THRESHOLD]`: Number between 0-1 indicating how much of element must be visible (e.g., 0.3 = 30%)
 - `[VIEWPORT_INSETS]`: String insets around viewport (e.g., '50px', '10%', '-100px')
 - `[EFFECT_TYPE]`: Either `namedEffect` or `keyframeEffect`
@@ -121,7 +121,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 ```typescript
 {
-    key: '[OBSERVER_SELECTOR]',
+    key: '[OBSERVER_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'repeat',
@@ -130,7 +130,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
     },
     effects: [
         {
-            key: '[ANIMATION_TARGET_SELECTOR]',
+            key: '[ANIMATION_TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -143,8 +143,8 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 **Variables**:
 
-- `[OBSERVER_SELECTOR]`: CSS selector for element that acts as scroll trigger
-- `[ANIMATION_TARGET_SELECTOR]`: CSS selector for element that gets animated (different from observer)
+- `[OBSERVER_KEY]`: Unique identifier for element that acts as scroll trigger
+- `[ANIMATION_TARGET_KEY]`: Unique identifier for element that gets animated (different from observer)
 - Other variables same as Rule 1
 
 **Example - Image Reveal on Scroll**:
@@ -219,7 +219,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 ```typescript
 {
-    key: '[OBSERVER_SELECTOR]',
+    key: '[OBSERVER_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'alternate',
@@ -228,7 +228,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
     },
     effects: [
         {
-            key: '[ANIMATION_TARGET_SELECTOR]',
+            key: '[ANIMATION_TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -316,7 +316,7 @@ Same as Rule 2
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'state',
@@ -325,7 +325,7 @@ Same as Rule 2
     },
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -417,7 +417,7 @@ Same as Rule 2
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewEnter',
     params: {
         type: '[BEHAVIOR_TYPE]',
@@ -426,7 +426,7 @@ Same as Rule 2
     },
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]'
@@ -576,7 +576,7 @@ Same as Rule 2
 
 **Variables**:
 
-- `[ELEMENT_N_SELECTOR]`: CSS selector for each individual element in sequence
+- `[ELEMENT_N_KEY]`: Unique identifier for each individual element in sequence
 - `[DELAY_N]`: Progressive delay values (e.g., 0, 100, 200, 300ms)
 - `[SHARED_*]`: Common values used across all elements in the sequence
 - Other variables same as Rule 1
@@ -885,14 +885,14 @@ Combining with conditions for responsive behavior:
 
 ## Preventing Flash of Unstyled Content (FOUC)
 
-When using `viewEnter` with for entrance animations, elements may briefly appear in their final state before the animation plays. Use the `generate` function to create critical CSS that prevents this.
+When using `viewEnter` for entrance animations, elements may briefly appear in their final state before the animation plays. Use the `generate` function to create critical CSS that prevents this.
 
 ### Using the `generate` Function
 
 **Import and generate CSS:**
 
-````typescript
-import { generate } from '@wix/interact';
+```typescript
+import { generate } from '@wix/interact/web';
 
 const config: InteractConfig = {
   interactions: [
@@ -904,19 +904,13 @@ const config: InteractConfig = {
         {
           namedEffect: { type: 'FadeIn' },
           duration: 800,
-          fill: 'backwards'
-        }
-      ]
-    }
-  ]
+          fill: 'backwards',
+        },
+      ],
+    },
+  ],
 };
 
-/**Usage:**
-```javascript
-import { generate } from '@wix/interact';
-
-const config = {/*...*/};
-
 // Generate CSS at build time or on server
 const css = generate(config);
 
@@ -938,7 +932,7 @@ const html = `
 </body>
 </html>
 `;
-````
+```
 
 ### Generated CSS Behavior