From 6236f6ae5e04cd357d051a16ba7356fcbd75a12f Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Wed, 20 May 2026 17:18:04 +0300 Subject: [PATCH 01/11] Rewrite README for the Motion pakcage --- packages/motion/README.md | 254 +++++++++++++++++++------------------- 1 file changed, 130 insertions(+), 124 deletions(-) diff --git a/packages/motion/README.md b/packages/motion/README.md index 858c5df6..3a956e03 100644 --- a/packages/motion/README.md +++ b/packages/motion/README.md @@ -1,182 +1,188 @@ -# Wix Motion +# @wix/motion -A comprehensive animation library featuring 82+ carefully crafted presets, designed for modern web applications, built on native browser technology. +Low-level, web-native animation engine โ€” WAAPI, CSS, scroll-driven, and pointer-tracking animations with a single dependency. -## โœจ Features +[![npm version](https://img.shields.io/npm/v/@wix/motion.svg)](https://www.npmjs.com/package/@wix/motion) +[![bundle size](https://img.shields.io/bundlephobia/minzip/@wix/motion)](https://bundlephobia.com/package/@wix/motion) +[![license](https://img.shields.io/npm/l/@wix/motion.svg)](./LICENSE) -- **Web Platform First** - Built on native browser technology for smooth 60fps animations -- **82+ Animation Presets** - Professionally designed animations ready to use -- **5 Animation Categories** - Entrance, Ongoing, Scroll, Mouse, and Background Scroll effects -- **TypeScript Support** - Complete type definitions with IntelliSense support -- **Dual Rendering** - Both Web Animations API and CSS-based rendering -- **Scroll Integration** - Advanced scroll-driven animations with ViewTimeline API support -- **Mouse Parallax** - Interactive pointer-based animations -- **Performance Optimized** - Uses fastdom to minimize layout thrashing +## Why Motion? -## ๐Ÿš€ Quick Start +- **Native-first** โ€” Built directly on the Web Animations API and CSS Animations. +- **ViewTimeline** โ€” First-class scroll-driven animations via the ViewTimeline API, with a scrub fallback when the API is unavailable. +- **Pointer-driven** โ€” `pointer-move` animations map cursor `(x, y)` progress to effects, with optional transition smoothing. +- **Custom effects** โ€” Plug in programmatic render callbacks โ€” no preset registration required. +- **Dual rendering** โ€” Choose CSS for declarative effects or WAAPI for fine-grained control, using the same options shape. +- **Performance** โ€” `fastdom` batches DOM reads/writes; no `requestAnimationFrame` loop unless a custom callback opts in. +- **Pluggable presets** โ€” `registerEffects()` accepts any effect module. Use [`@wix/motion-presets`](../motion-presets) or roll your own. -### Installation +Motion is the engine layer. [`@wix/interact`](../interact) is the declarative configuration layer built on top of it. + +## Install ```bash npm install @wix/motion ``` -### Basic Usage +## Quick Start + +### Time-based animation (WAAPI) ```typescript import { getWebAnimation } from '@wix/motion'; -// Create a fade-in entrance animation -const animation = getWebAnimation(document.getElementById('myElement'), { - namedEffect: { type: 'FadeIn' }, - duration: 1000, - easing: 'easeOut', +const animation = getWebAnimation(document.getElementById('hero'), { + keyframeEffect: { + name: 'fade-up', + keyframes: [ + { opacity: 0, transform: 'translateY(20px)' }, + { opacity: 1, transform: 'translateY(0)' }, + ], + }, + duration: 600, + easing: 'ease-out', }); -// Play the animation -await animation.play(); +animation.play(); ``` -### Scroll-Driven Animation +### Scroll-driven (ViewTimeline) ```typescript -import { getScrubScene } from '@wix/motion'; +import { getWebAnimation } from '@wix/motion'; + +const scrollRoot = document.getElementById('viewport')!; -// Create a scroll-driven parallax effect -const scene = getScrubScene( - document.getElementById('scrollElement'), +const animation = getWebAnimation( + document.getElementById('parallax'), { - namedEffect: { - type: 'ParallaxScroll', - speed: 0.5, + keyframeEffect: { + name: 'parallax', + keyframes: [{ transform: 'translateY(80px)' }, { transform: 'translateY(-80px)' }], }, + startOffset: { name: 'cover', offset: { value: 0, unit: 'percentage' } }, + endOffset: { name: 'cover', offset: { value: 100, unit: 'percentage' } }, }, - { trigger: 'view-progress', element: document.getElementById('viewport') }, + { trigger: 'view-progress', element: scrollRoot }, ); ``` -## ๐Ÿ“š Animation Categories - -### ๐ŸŽญ Entrance Animations (24 presets) - -Perfect for element reveals and page transitions: - -- **FadeIn** - Simple opacity transition -- **ArcIn** - Curved motion with 3D rotation -- **BounceIn** - Spring-based entrance with bounce effect -- **SlideIn** - Directional slides from off-screen -- **FlipIn** - 3D flip transitions -- [See all entrance animations โ†’](docs/categories/entrance-animations.md) - -### ๐Ÿ”„ Ongoing Animations (16 presets) - -Continuous looping animations for attention and delight: - -- **Pulse** - Rhythmic scaling effect -- **Breathe** - Organic scaling animation -- **Spin** - Smooth rotation loops -- **Wiggle** - Playful shake motions -- **Float** - Gentle floating movement -- [See all ongoing animations โ†’](docs/categories/ongoing-animations.md) - -### ๐Ÿ“œ Scroll Animations (19 presets) - -Scroll-synchronized effects that respond to viewport position: +### Scroll-driven (polyfill / custom scrubbing) -- **ParallaxScroll** - Classic parallax movement -- **FadeScroll** - Opacity changes on scroll -- **GrowScroll** - Scale transformations -- **RevealScroll** - Clip-path reveals -- **TiltScroll** - 3D perspective tilting -- [See all scroll animations โ†’](docs/categories/scroll-animations.md) +```typescript +import { getScrubScene } from '@wix/motion'; -### ๐Ÿ–ฑ๏ธ Mouse Animations (12 presets) +const scrollRoot = document.getElementById('viewport')!; -Interactive pointer-driven effects: +const scenes = getScrubScene( + document.getElementById('parallax'), + { + keyframeEffect: { + name: 'parallax', + keyframes: [{ transform: 'translateY(80px)' }, { transform: 'translateY(-80px)' }], + }, + startOffset: { name: 'cover', offset: { value: 0, unit: 'percentage' } }, + endOffset: { name: 'cover', offset: { value: 100, unit: 'percentage' } }, + }, + { trigger: 'view-progress', element: scrollRoot }, +); +// Drive each scene's `effect(scene, progress)` from your own scroll/IO listener +// when ViewTimeline is unavailable. +``` -- **TrackMouse** - Element follows cursor -- **Tilt3DMouse** - 3D tilt based on pointer position -- **ScaleMouse** - Dynamic scaling on hover -- **BlurMouse** - Motion blur effects -- [See all mouse animations โ†’](docs/categories/mouse-animations.md) +Quickstart examples use `keyframeEffect` (inline keyframes) so they run without registering presets. -### ๐Ÿ–ผ๏ธ Background Scroll Animations (12 presets) +## Animation Modes -Specialized effects for background media elements: +| Mode | Driver | API | +| -------------- | ----------------------------- | ---------------------------------------------- | +| Time-based | Duration + easing | `getWebAnimation()` / `getCSSAnimation()` | +| Scroll-driven | ViewTimeline / external scrub | `getScrubScene()` with `view-progress` trigger | +| Pointer-driven | Mouse / touch position | `getScrubScene()` with `pointer-move` trigger | -- **BgParallax** - Background parallax scrolling -- **BgZoom** - Dynamic background scaling -- **BgFade** - Background opacity transitions -- **BgRotate** - Background rotation effects -- [See all background animations โ†’](docs/categories/background-scroll-animations.md) +## Core API -## ๐Ÿ› ๏ธ Core APIs +| Function | Purpose | +| -------------------- | ----------------------------------------------------------- | +| `getWebAnimation()` | Create WAAPI-backed animations (time- or scroll-linked) | +| `getCSSAnimation()` | Generate CSS animation descriptors for stylesheet injection | +| `getScrubScene()` | Build scroll-polyfill or pointer-driven scrub scenes | +| `prepareAnimation()` | Pre-measure / mutate DOM via `fastdom` before animating | +| `getAnimation()` | Auto-select CSS (if present) or WAAPI path | +| `getSequence()` | Coordinate staggered groups with easing-based offsets | +| `registerEffects()` | Register named effect modules into the global registry | -### Animation Creation +See [`docs/api/`](./docs/api/) for full signatures and options. -- `getWebAnimation()` - Create Web Animations API instances -- `getScrubScene()` - Generate scroll/pointer-driven scenes -- `prepareAnimation()` - Pre-calculate measurements for performance +## Custom Effects -### CSS Integration +Three ways to define what an animation does: -- CSS custom properties for dynamic values -- CSS Animation API for stylesheet-based animations -- Automatic vendor prefixing and fallbacks +1. **Inline keyframes** โ€” pass `keyframeEffect: { name, keyframes }` directly. Zero registration. +2. **Custom callback** โ€” pass `customEffect: (element, progress) => void` for full programmatic control per frame. +3. **Named presets** โ€” pass `namedEffect: { type: 'โ€ฆ', โ€ฆparams }` referencing effects you've registered via `registerEffects()` (use [`@wix/motion-presets`](../motion-presets) or your own modules). -### TypeScript Support +## Sequences and Staggering -Complete type definitions for all animation options: +`getSequence()` coordinates multiple `AnimationGroup`s with staggered offsets. The stagger interval can be eased so groups bunch toward the start or end of the sequence. ```typescript -interface TimeAnimationOptions { - namedEffect: EntranceAnimation | OngoingAnimation; - duration?: number; - easing?: string; - // ... more options -} -``` - -## ๐Ÿ“– Documentation +import { getSequence } from '@wix/motion'; + +const sequence = getSequence( + { offset: 150, offsetEasing: 'quadIn' }, + Array.from(document.querySelectorAll('.card')).map((el) => ({ + target: el, + options: { + duration: 600, + easing: 'ease-out', + keyframeEffect: { + name: 'fade-up', + keyframes: [ + { opacity: 0, transform: 'translateY(20px)' }, + { opacity: 1, transform: 'translateY(0)' }, + ], + }, + }, + })), +); -- **[Getting Started](docs/getting-started.md)** - Setup and first animation -- **[Core Concepts](docs/core-concepts.md)** - Understanding the animation system -- **[API Reference](docs/api/)** - Complete function documentation -- **[Category Guides](docs/categories/)** - Detailed category overviews -- **[Preset Reference](docs/presets/)** - Individual animation documentation -- **[Advanced Usage](docs/guides/)** - Performance tips and patterns +sequence.play(); +``` -## ๐ŸŽฎ Interactive Playground +See [`docs/api/get-sequence.md`](./docs/api/get-sequence.md) for the full stagger model. -Explore animations interactively in our Storybook playground: +## ViewTimeline and Polyfills -```bash -yarn start # Opens interactive documentation -``` +Motion is built around progressive enhancement: -## ๐Ÿ”ง Framework Integration +- **Native path** โ€” when `window.ViewTimeline` is available, `getWebAnimation()` with a `view-progress` trigger returns a WAAPI animation linked to the scroll timeline. +- **Polyfill path** โ€” `getScrubScene()` with `view-progress` returns `ScrubScrollScene[]` objects exposing `start`, `end`, `viewSource`, and `effect(scene, progress)`. Drive these from your own IntersectionObserver/scroll listener (or use the scroll driver in `@wix/interact`). +- **Pointer smoothing** โ€” `ScrubPointerScene` accepts `transitionDuration` and `transitionEasing` so pointer-tracking effects don't snap to the cursor. -Works seamlessly with popular frameworks: +## Performance Notes -- React/Vue/Angular components -- GSAP and Framer Motion compatibility -- CSS-in-JS libraries -- Server-side rendering support +- `prepareAnimation()` runs `fastdom` measure/mutate phases before the animation starts, avoiding layout thrash. +- The CSS rendering path (`getCSSAnimation`) offloads work to the compositor thread. +- No `requestAnimationFrame` loop runs unless a `customEffect` callback is used. -## ๐ŸŒ Browser Support +## Browser Support -- **Modern browsers** with Web Animations API -- **Progressive enhancement** with CSS fallbacks -- **ViewTimeline API** for advanced scroll effects (with polyfill) +Modern evergreen browsers with Web Animations API support (Chrome, Edge, Firefox, Safari). The ViewTimeline API is used where available; pair `getScrubScene()` with an external driver for older browsers. -## ๐Ÿค Contributing +## Related Packages -This package is part of the Wix wow-libs monorepo. See [contributing guidelines](../../CONTRIBUTING.md) for development setup and contribution process. +- [`@wix/interact`](../interact) โ€” declarative, config-driven interaction layer built on Motion. +- [`@wix/motion-presets`](../motion-presets) โ€” ready-made effect catalog (entrance, ongoing, scroll, mouse, background-scroll). -## ๐Ÿ“„ License +## Documentation -UNLICENSED - Internal Wix package +- [Getting Started](./docs/getting-started.md) +- [Core Concepts](./docs/core-concepts.md) +- [API Reference](./docs/api/) +- [Category Guides](./docs/categories/) +- [Advanced Patterns](./docs/guides/) ---- +## License -**Built with โค๏ธ by the Wix wow!Team** +MIT From 0b0fb6fddd4dc070fc6d652a286d0e2dfe34fe87 Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Wed, 27 May 2026 21:52:47 +0300 Subject: [PATCH 02/11] minor changes + no stale links --- README.md | 4 ++-- packages/interact/README.md | 14 +++++++------- packages/motion/README.md | 36 ++++++++++++++++++------------------ 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 4b94684d..a04e9e56 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Web-native animation and interaction libraries โ€” declarative, AI-ready, framew [![npm version](https://img.shields.io/npm/v/@wix/interact)](https://www.npmjs.com/package/@wix/interact) [![npm version](https://img.shields.io/npm/v/@wix/motion)](https://www.npmjs.com/package/@wix/motion) [![npm version](https://img.shields.io/npm/v/@wix/motion-presets)](https://www.npmjs.com/package/@wix/motion-presets) -[![license](https://img.shields.io/npm/l/@wix/interact)](LICENSE) +[![license](https://img.shields.io/npm/l/@wix/interact)](https://github.com/wix/interact/blob/master/LICENSE) [![bundle size](https://img.shields.io/bundlephobia/minzip/@wix/interact)](https://bundlephobia.com/package/@wix/interact) ## What is Interact? @@ -26,7 +26,7 @@ Web-native animation and interaction libraries โ€” declarative, AI-ready, framew | --------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | [`@wix/interact`](https://github.com/wix/interact/blob/master/packages/interact/) | Declarative interaction layer (main package) | [README](https://github.com/wix/interact/blob/master/packages/interact/README.md) ยท [npm](https://www.npmjs.com/package/@wix/interact) | | [`@wix/motion`](https://github.com/wix/interact/blob/master/packages/motion/) | Low-level animation engine | [README](https://github.com/wix/interact/blob/master/packages/motion/README.md) ยท [npm](https://www.npmjs.com/package/@wix/motion) | -| [`@wix/motion-presets`](https://github.com/wix/interact/blob/master/packages/motion-presets/) | Ready-made animation presets | [README](https://github.com/wix/interact/blob/master/packages/motion-presets/README.md) [npm](https://www.npmjs.com/package/@wix/motion-presets) | +| [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) | Ready-made animation presets | [npm](https://www.npmjs.com/package/@wix/motion-presets) | ``` @wix/motion โ† @wix/interact (declarative layer) diff --git a/packages/interact/README.md b/packages/interact/README.md index 4cc68c09..51b16c0a 100644 --- a/packages/interact/README.md +++ b/packages/interact/README.md @@ -14,7 +14,7 @@ Declarative, configuration-driven interaction library โ€” web-native, AI-ready, - **Framework-agnostic** โ€” Web Components and vanilla JS integrations; React integration included - **AI-ready** โ€” JSON configs are machine-readable and provide guardrails; LLMs can generate and agents can validate them - **CSS generation** โ€” `generate(config)` emits complete CSS for the whole config (`@keyframes`, `view-timeline`, transitions, FOUC rules) -- **Preset ecosystem** โ€” Plug in [`@wix/motion-presets`](../motion-presets/README.md) for 80+ ready-made effects. +- **Preset ecosystem** โ€” Plug in [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) for 80+ ready-made effects. - **Accessible** โ€” Built-in `activate` (click + keyboard) and `interest` (hover + focus) trigger variants ## Install @@ -438,12 +438,12 @@ Interact's JSON-config surface is the differentiator: configs are serializable, ## Documentation -- [**Getting Started**](https://wix.github.io/interact/docs/guides/getting-started.md) -- [**API Reference**](https://wix.github.io/interact/docs/api/README.md) โ€” `Interact` class, `InteractionController`, standalone functions, types -- [**Guides**](https://wix.github.io/interact/docs/guides/README.md) โ€” triggers, effects, configuration, state, conditions, sequences -- [**Examples**](https://wix.github.io/interact/docs/examples/README.md) โ€” entrance, click, hover, list patterns -- [**Web Components**](https://wix.github.io/interact/docs/guides/custom-elements.md) - integration via custom elements -- [**React Integration**](https://wix.github.io/interact/docs/integration/react.md) - React integration +- [**Getting Started**](https://github.com/wix/interact/blob/master/packages/interact/docs/guides/getting-started.md) +- [**API Reference**](https://github.com/wix/interact/blob/master/packages/interact/docs/api/README.md) โ€” `Interact` class, `InteractionController`, standalone functions, types +- [**Guides**](https://github.com/wix/interact/blob/master/packages/interact/docs/guides/README.md) โ€” triggers, effects, configuration, state, conditions, sequences +- [**Examples**](https://github.com/wix/interact/blob/master/packages/interact/docs/examples/README.md) โ€” entrance, click, hover, list patterns +- [**Web Components**](https://github.com/wix/interact/blob/master/packages/interact/docs/guides/custom-elements.md) โ€” integration via custom elements +- [**React Integration**](https://github.com/wix/interact/blob/master/packages/interact/docs/integration/react.md) โ€” React integration ## License diff --git a/packages/motion/README.md b/packages/motion/README.md index 3a956e03..230d027e 100644 --- a/packages/motion/README.md +++ b/packages/motion/README.md @@ -4,7 +4,7 @@ Low-level, web-native animation engine โ€” WAAPI, CSS, scroll-driven, and pointe [![npm version](https://img.shields.io/npm/v/@wix/motion.svg)](https://www.npmjs.com/package/@wix/motion) [![bundle size](https://img.shields.io/bundlephobia/minzip/@wix/motion)](https://bundlephobia.com/package/@wix/motion) -[![license](https://img.shields.io/npm/l/@wix/motion.svg)](./LICENSE) +[![license](https://img.shields.io/npm/l/@wix/motion.svg)](https://github.com/wix/interact/blob/master/LICENSE) ## Why Motion? @@ -13,10 +13,8 @@ Low-level, web-native animation engine โ€” WAAPI, CSS, scroll-driven, and pointe - **Pointer-driven** โ€” `pointer-move` animations map cursor `(x, y)` progress to effects, with optional transition smoothing. - **Custom effects** โ€” Plug in programmatic render callbacks โ€” no preset registration required. - **Dual rendering** โ€” Choose CSS for declarative effects or WAAPI for fine-grained control, using the same options shape. -- **Performance** โ€” `fastdom` batches DOM reads/writes; no `requestAnimationFrame` loop unless a custom callback opts in. -- **Pluggable presets** โ€” `registerEffects()` accepts any effect module. Use [`@wix/motion-presets`](../motion-presets) or roll your own. - -Motion is the engine layer. [`@wix/interact`](../interact) is the declarative configuration layer built on top of it. +- **Performance** โ€” `fastdom` batches DOM reads/writes; no `requestAnimationFrame` loop (except for customEffects). +- **Pluggable presets** โ€” `registerEffects()` accepts any effect module. Use [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) or create your own. ## Install @@ -51,7 +49,7 @@ animation.play(); ```typescript import { getWebAnimation } from '@wix/motion'; -const scrollRoot = document.getElementById('viewport')!; +const scrollRoot = document.getElementById('scrollRoot')!; const animation = getWebAnimation( document.getElementById('parallax'), @@ -72,7 +70,7 @@ const animation = getWebAnimation( ```typescript import { getScrubScene } from '@wix/motion'; -const scrollRoot = document.getElementById('viewport')!; +const scrollRoot = document.getElementById('scrollRoot')!; const scenes = getScrubScene( document.getElementById('parallax'), @@ -112,7 +110,7 @@ Quickstart examples use `keyframeEffect` (inline keyframes) so they run without | `getSequence()` | Coordinate staggered groups with easing-based offsets | | `registerEffects()` | Register named effect modules into the global registry | -See [`docs/api/`](./docs/api/) for full signatures and options. +See [`docs/api/`](https://github.com/wix/interact/blob/master/packages/motion/docs/api/README.md) for full signatures and options. ## Custom Effects @@ -120,11 +118,11 @@ Three ways to define what an animation does: 1. **Inline keyframes** โ€” pass `keyframeEffect: { name, keyframes }` directly. Zero registration. 2. **Custom callback** โ€” pass `customEffect: (element, progress) => void` for full programmatic control per frame. -3. **Named presets** โ€” pass `namedEffect: { type: 'โ€ฆ', โ€ฆparams }` referencing effects you've registered via `registerEffects()` (use [`@wix/motion-presets`](../motion-presets) or your own modules). +3. **Named presets** โ€” pass `namedEffect: { type: 'โ€ฆ', โ€ฆparams }` referencing effects you've registered via `registerEffects()` (use [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) or your own modules). ## Sequences and Staggering -`getSequence()` coordinates multiple `AnimationGroup`s with staggered offsets. The stagger interval can be eased so groups bunch toward the start or end of the sequence. +`getSequence()` plays multiple animations with staggered start times. Pass `offset` (ms between each start) and an optional `offsetEasing` to shape how the offsets are distributed across the sequence. ```typescript import { getSequence } from '@wix/motion'; @@ -150,7 +148,7 @@ const sequence = getSequence( sequence.play(); ``` -See [`docs/api/get-sequence.md`](./docs/api/get-sequence.md) for the full stagger model. +See [`docs/api/get-sequence.md`](https://github.com/wix/interact/blob/master/packages/motion/docs/api/get-sequence.md) for the full stagger model. ## ViewTimeline and Polyfills @@ -172,16 +170,18 @@ Modern evergreen browsers with Web Animations API support (Chrome, Edge, Firefox ## Related Packages -- [`@wix/interact`](../interact) โ€” declarative, config-driven interaction layer built on Motion. -- [`@wix/motion-presets`](../motion-presets) โ€” ready-made effect catalog (entrance, ongoing, scroll, mouse, background-scroll). +Motion is the engine layer. The other packages in this repo build on top of it: + +- [`@wix/interact`](https://github.com/wix/interact/tree/master/packages/interact) โ€” declarative, config-driven interaction layer built on Motion. +- [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) โ€” ready-made effect catalog (entrance, ongoing, scroll, mouse, background-scroll). ## Documentation -- [Getting Started](./docs/getting-started.md) -- [Core Concepts](./docs/core-concepts.md) -- [API Reference](./docs/api/) -- [Category Guides](./docs/categories/) -- [Advanced Patterns](./docs/guides/) +- [Getting Started](https://github.com/wix/interact/blob/master/packages/motion/docs/getting-started.md) +- [Core Concepts](https://github.com/wix/interact/blob/master/packages/motion/docs/core-concepts.md) +- [API Reference](https://github.com/wix/interact/blob/master/packages/motion/docs/api/README.md) +- [Category Guides](https://github.com/wix/interact/blob/master/packages/motion/docs/categories/README.md) +- [Advanced Patterns](https://github.com/wix/interact/blob/master/packages/motion/docs/guides/README.md) ## License From e1dd538559c17170a6a55586f90a296ef472b6e7 Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Wed, 27 May 2026 22:02:20 +0300 Subject: [PATCH 03/11] license link --- packages/motion/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/motion/README.md b/packages/motion/README.md index 230d027e..6549532c 100644 --- a/packages/motion/README.md +++ b/packages/motion/README.md @@ -185,4 +185,4 @@ Motion is the engine layer. The other packages in this repo build on top of it: ## License -MIT +[MIT](https://github.com/wix/interact/blob/master/LICENSE) From f4f07edf99ab951f3b25fccc5bf94e19843efa5d Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Wed, 27 May 2026 22:04:53 +0300 Subject: [PATCH 04/11] format --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a04e9e56..9c6a9917 100644 --- a/README.md +++ b/README.md @@ -22,11 +22,11 @@ Web-native animation and interaction libraries โ€” declarative, AI-ready, framew ## Packages -| Package | Description | Links | -| --------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| [`@wix/interact`](https://github.com/wix/interact/blob/master/packages/interact/) | Declarative interaction layer (main package) | [README](https://github.com/wix/interact/blob/master/packages/interact/README.md) ยท [npm](https://www.npmjs.com/package/@wix/interact) | -| [`@wix/motion`](https://github.com/wix/interact/blob/master/packages/motion/) | Low-level animation engine | [README](https://github.com/wix/interact/blob/master/packages/motion/README.md) ยท [npm](https://www.npmjs.com/package/@wix/motion) | -| [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) | Ready-made animation presets | [npm](https://www.npmjs.com/package/@wix/motion-presets) | +| Package | Description | Links | +| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| [`@wix/interact`](https://github.com/wix/interact/blob/master/packages/interact/) | Declarative interaction layer (main package) | [README](https://github.com/wix/interact/blob/master/packages/interact/README.md) ยท [npm](https://www.npmjs.com/package/@wix/interact) | +| [`@wix/motion`](https://github.com/wix/interact/blob/master/packages/motion/) | Low-level animation engine | [README](https://github.com/wix/interact/blob/master/packages/motion/README.md) ยท [npm](https://www.npmjs.com/package/@wix/motion) | +| [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) | Ready-made animation presets | [npm](https://www.npmjs.com/package/@wix/motion-presets) | ``` @wix/motion โ† @wix/interact (declarative layer) From b118b7ab9639af17f1673ad0989202e66e4d393a Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Wed, 27 May 2026 23:13:02 +0300 Subject: [PATCH 05/11] some more bacward fixes --- README.md | 4 ++-- packages/interact/README.md | 22 +++++++++++----------- packages/motion/README.md | 4 ++-- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 9c6a9917..62897cf7 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Web-native animation and interaction libraries โ€” declarative, AI-ready, framew **Wix Interact** (`@wix/interact`) is a declarative interaction layer on top of **@wix/motion**. You describe _when_ something should animate and _what_ should happen in a JSON config โ€” no manual event listeners, no imperative animation wiring. - **Config-driven** โ€” bind triggers (`viewEnter`, `click`, `hover`, `viewProgress`, `pointerMove`, and more) to effects in one `InteractConfig` object -- **Built on native browser APIs** โ€” Web Animations API, `ViewTimeline`, pointer tracking, and CSS; with an optional custom animation runtime via `@wix/motion` +- **Built on native browser APIs** โ€” Web Animations API, `ViewTimeline`, pointer tracking, and CSS; optional `customEffect` adds programmatic per-frame JS callbacks for effects that go beyond what native APIs can express. - **Three entry points** โ€” Web Components (`@wix/interact/web`), React (`@wix/interact/react`), and vanilla JS (`@wix/interact`) - **Ready-made presets** โ€” entrance, scroll, pointer, loop, and micro-interactions from `@wix/motion-presets` - **SSR-friendly CSS** โ€” `generate(config)` emits complete CSS for the whole config (keyframes, view-timeline, transitions, FOUC rules) so animations can be ready before JS runs @@ -355,7 +355,7 @@ type Interaction = { - Do not invent `namedEffect` types โ€” use only registered presets (see preset rules above) - Do not attach DOM event listeners manually โ€” express behavior through `trigger` and config - For `viewProgress`, avoid `overflow: hidden` on ancestors; use `overflow: clip` instead -- Call `generate(config)` at build time or on the server and inject CSS into ``. For `viewEnter` + `triggerType: 'once'`, to prevent FOUC +- Call `generate(config)` at build time or on the server and inject CSS into ``. For `viewEnter` + `triggerType: 'once'`, to prevent FOUC, also mark elements with `data-interact-initial="true"`. - `effects` at the config top level is a reusable `Record` - `` should wrap exactly one child (the library targets `.firstElementChild` by default). diff --git a/packages/interact/README.md b/packages/interact/README.md index 51b16c0a..c0bfe8ba 100644 --- a/packages/interact/README.md +++ b/packages/interact/README.md @@ -9,12 +9,12 @@ Declarative, configuration-driven interaction library โ€” web-native, AI-ready, ## Why Interact? -- **Declerative** โ€” Define trigger-to-effect bindings in JSON; no imperative event wiring +- **Declarative** โ€” Define trigger-to-effect bindings in JSON; no imperative event wiring - **Web-native** โ€” Built on CSS, WAAPI, ViewTimeline, and DOM APIs; supports DOM management via Custom Elements - **Framework-agnostic** โ€” Web Components and vanilla JS integrations; React integration included - **AI-ready** โ€” JSON configs are machine-readable and provide guardrails; LLMs can generate and agents can validate them - **CSS generation** โ€” `generate(config)` emits complete CSS for the whole config (`@keyframes`, `view-timeline`, transitions, FOUC rules) -- **Preset ecosystem** โ€” Plug in [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) for 80+ ready-made effects. +- **Preset ecosystem** โ€” Plug in [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) for 70+ ready-made effects. - **Accessible** โ€” Built-in `activate` (click + keyboard) and `interest` (hover + focus) trigger variants ## Install @@ -62,7 +62,7 @@ const config: InteractConfig = { }; // render styles - e.g. for SSR -const interactCSS = generate(config, false); +const interactCSS = generate(config, true); // run on client - e.g. on pagereveal event const instance = Interact.create(config); @@ -132,7 +132,7 @@ export function Hero() { } ``` -### Using vaniall JS - no handling for DOM changes +### Using Vanilla JS (you manage element lifecycle) **Vanilla JS** โ€” bind elements after they exist in the DOM: @@ -167,14 +167,14 @@ Config โ”€โ”ฌโ”€โ–บ Interact.create() โ”€โ–บ Trigger Observers โ”€โ–บ Effect Eng ``` `generate(config)` runs at build time or on the server to emit complete CSS for the entire config โ€” maximizing offload of effect creation, binding, and running to the browser. -Interact also uses native effect triggering, i.e. `view-timeline`, as it becomes more widely supported +Interact also generates native `view-timeline` CSS declarations, so browsers that support it can drive scroll animations entirely without JS. The `InteractConfig` shape: ```ts type InteractConfig = { interactions: Interaction[]; // trigger โ†’ effect bindings - effects: ?Record; // reusable effect definitions + effects?: Record; // reusable effect definitions sequences?: Record; // staggered multi-effect timelines conditions?: Record; // media / selector gates }; @@ -315,7 +315,7 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf 'lift': { keyframeEffect: { keyframes: [ - { transform: 'transformY(-80px)', boxShadow: '0 8px 16px rgb(0 0 0 / 0.15)' }, + { transform: 'translateY(-80px)', boxShadow: '0 8px 16px rgb(0 0 0 / 0.15)' }, ], }, duration: 200, @@ -397,7 +397,7 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf - **Same element as source and target with `viewEnter`** โ€” Must use `triggerType: 'once'`. Other types cause re-entry loops. - **Hit-area shift on `hover` / `pointerMove`** โ€” Animating size/position of the hovered element shifts the hit area and causes jitter. Instead, animate a child via `selector` or a different `key`. - **`registerEffects()` must run before `Interact.create()`/`generate()`** when using `namedEffect`. -- **FOUC prevention requires** โ€” `generate(config)` injected into ``. +- **FOUC prevention requires two steps** โ€” (1) inject the output of `generate(config)` into ``, and (2) mark each entrance-animated element with `data-interact-initial="true"` (`initial={true}` in React). Both are required. - **`generate(config, useFirstChild)`** โ€” Pass `true` for `` (web), `false` for vanilla and React ``. - **`` must wrap exactly one child** โ€” the library targets `:first-child` by default. @@ -427,14 +427,14 @@ Interact's JSON-config surface is the differentiator: configs are serializable, - Modern browsers with the Web Animations API (Baseline). - `adoptedStyleSheets` (used by `transition` / `transitionProperties`): Chrome 73+, Firefox 101+, Safari 16.4+, Edge 79+. -- ViewTimeline: Chrome 115+; polyfilled via [`fizban`](https://github.com/wix/fizban) elsewhere. +- ViewTimeline: Chrome 115+; polyfilled via [`fizban`](https://github.com/wix-incubator/fizban) elsewhere. ## Related Packages - [`@wix/motion`](https://github.com/wix/interact/tree/master/packages/motion) โ€” low-level animation engine underneath Interact. - [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) โ€” ready-made effect catalog (entrance, scroll, hover, pointer). -- [`fizban`](https://github.com/wix/fizban) โ€” scroll-driven animation polyfill (bundled dependency). -- [`kuliso`](https://github.com/wix/kuliso) โ€” pointer-driven animation polyfill (bundled dependency). +- [`fizban`](https://github.com/wix-incubator/fizban) โ€” scroll-driven animation polyfill (bundled dependency). +- [`kuliso`](https://github.com/wix-incubator/kuliso) โ€” pointer-driven animation polyfill (bundled dependency). ## Documentation diff --git a/packages/motion/README.md b/packages/motion/README.md index 6549532c..ed0dde55 100644 --- a/packages/motion/README.md +++ b/packages/motion/README.md @@ -13,7 +13,7 @@ Low-level, web-native animation engine โ€” WAAPI, CSS, scroll-driven, and pointe - **Pointer-driven** โ€” `pointer-move` animations map cursor `(x, y)` progress to effects, with optional transition smoothing. - **Custom effects** โ€” Plug in programmatic render callbacks โ€” no preset registration required. - **Dual rendering** โ€” Choose CSS for declarative effects or WAAPI for fine-grained control, using the same options shape. -- **Performance** โ€” `fastdom` batches DOM reads/writes; no `requestAnimationFrame` loop (except for customEffects). +- **Performance** โ€” `fastdom` batches DOM reads/writes; no `requestAnimationFrame` loop (except for customEffect callbacks). - **Pluggable presets** โ€” `registerEffects()` accepts any effect module. Use [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) or create your own. ## Install @@ -155,7 +155,7 @@ See [`docs/api/get-sequence.md`](https://github.com/wix/interact/blob/master/pac Motion is built around progressive enhancement: - **Native path** โ€” when `window.ViewTimeline` is available, `getWebAnimation()` with a `view-progress` trigger returns a WAAPI animation linked to the scroll timeline. -- **Polyfill path** โ€” `getScrubScene()` with `view-progress` returns `ScrubScrollScene[]` objects exposing `start`, `end`, `viewSource`, and `effect(scene, progress)`. Drive these from your own IntersectionObserver/scroll listener (or use the scroll driver in `@wix/interact`). +- **Polyfill path** โ€” `getScrubScene()` with `view-progress` returns `ScrubScrollScene[]` objects exposing `start`, `end`, `viewSource`, and `effect(scene, progress)`. Drive these from your own IntersectionObserver/scroll listener. If using `@wix/interact`, its bundled scroll polyfill - [`fizban`](https://github.com/wix-incubator/fizban) - handles this automatically. - **Pointer smoothing** โ€” `ScrubPointerScene` accepts `transitionDuration` and `transitionEasing` so pointer-tracking effects don't snap to the cursor. ## Performance Notes From d30bad3df1e46b7fa5fc9fbfd7df37bb91594f43 Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Thu, 28 May 2026 00:39:08 +0300 Subject: [PATCH 06/11] some more minor backward and link fixes --- README.md | 7 ++++--- packages/interact/README.md | 21 ++++++++++++--------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 62897cf7..3cc7d0a3 100644 --- a/README.md +++ b/README.md @@ -120,9 +120,10 @@ import { useEffect } from 'react'; import { Interact, Interaction } from '@wix/interact/react'; import * as presets from '@wix/motion-presets'; +Interact.registerEffects(presets); + function App() { useEffect(() => { - Interact.registerEffects(presets); const instance = Interact.create(config); return () => { @@ -187,7 +188,7 @@ const config: InteractConfig = { }; ``` -Inject the styles returned from `generate(config)` into `` for FOUC prevention. +FOUC prevention requires two steps โ€” (1) inject the output of `generate(config)` into ``, and (2) mark each entrance-animated element with `data-interact-initial="true"` (`initial={true}` in React). Both are required. ### Click effect @@ -229,7 +230,7 @@ const config: InteractConfig = { trigger: 'viewProgress', effects: [ { - namedEffect: { type: 'ParallaxScroll', speed: 0.5 }, + namedEffect: { type: 'ParallaxScroll', parallaxFactor: 0.5 }, rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } }, rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } }, easing: 'linear', diff --git a/packages/interact/README.md b/packages/interact/README.md index c0bfe8ba..88d87e46 100644 --- a/packages/interact/README.md +++ b/packages/interact/README.md @@ -14,7 +14,7 @@ Declarative, configuration-driven interaction library โ€” web-native, AI-ready, - **Framework-agnostic** โ€” Web Components and vanilla JS integrations; React integration included - **AI-ready** โ€” JSON configs are machine-readable and provide guardrails; LLMs can generate and agents can validate them - **CSS generation** โ€” `generate(config)` emits complete CSS for the whole config (`@keyframes`, `view-timeline`, transitions, FOUC rules) -- **Preset ecosystem** โ€” Plug in [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) for 70+ ready-made effects. +- **Preset ecosystem** โ€” Plug in [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) for 75+ ready-made effects. - **Accessible** โ€” Built-in `activate` (click + keyboard) and `interest` (hover + focus) trigger variants ## Install @@ -39,9 +39,9 @@ npm install @wix/motion-presets ```ts import { Interact, generate, type InteractConfig } from '@wix/interact/web'; -import * as presets from '@wix/motion-presets'; // optional +import * as presets from '@wix/motion-presets'; // required when using namedEffect -Interact.registerEffects(presets); // optional +Interact.registerEffects(presets); // required when using namedEffect const config: InteractConfig = { interactions: [ @@ -314,6 +314,7 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf effects: { 'lift': { keyframeEffect: { + name: 'lift', keyframes: [ { transform: 'translateY(-80px)', boxShadow: '0 8px 16px rgb(0 0 0 / 0.15)' }, ], @@ -345,6 +346,7 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf effects: { 'follow-x': { keyframeEffect: { + name: 'follow-x', keyframes: [ { transform: 'rotateY(-45deg)' }, { transform: 'rotateY(0px)' }, @@ -356,6 +358,7 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf }, 'follow-y': { keyframeEffect: { + name: 'follow-y', keyframes: [ { transform: 'rotateX(45deg)' }, { transform: 'rotateX(0px)' }, @@ -438,12 +441,12 @@ Interact's JSON-config surface is the differentiator: configs are serializable, ## Documentation -- [**Getting Started**](https://github.com/wix/interact/blob/master/packages/interact/docs/guides/getting-started.md) -- [**API Reference**](https://github.com/wix/interact/blob/master/packages/interact/docs/api/README.md) โ€” `Interact` class, `InteractionController`, standalone functions, types -- [**Guides**](https://github.com/wix/interact/blob/master/packages/interact/docs/guides/README.md) โ€” triggers, effects, configuration, state, conditions, sequences -- [**Examples**](https://github.com/wix/interact/blob/master/packages/interact/docs/examples/README.md) โ€” entrance, click, hover, list patterns -- [**Web Components**](https://github.com/wix/interact/blob/master/packages/interact/docs/guides/custom-elements.md) โ€” integration via custom elements -- [**React Integration**](https://github.com/wix/interact/blob/master/packages/interact/docs/integration/react.md) โ€” React integration +- [**Getting Started**](https://wix.github.io/interact/docs/#/guides/getting-started) +- [**API Reference**](https://wix.github.io/interact/docs/#/api) โ€” `Interact` class, `InteractionController`, standalone functions, types +- [**Guides**](https://wix.github.io/interact/docs/#/guides) โ€” triggers, effects, configuration, state, conditions, sequences +- [**Examples**](https://wix.github.io/interact/docs/#/examples) โ€” entrance, click, hover, list patterns +- [**Web Components**](https://wix.github.io/interact/docs/#/guides/custom-elements) โ€” integration via custom elements +- [**React Integration**](https://wix.github.io/interact/docs/#/integration/react) โ€” React integration ## License From c624c06cac8c0a363bd90c526489d9893c207fe4 Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Thu, 28 May 2026 04:23:15 +0300 Subject: [PATCH 07/11] linking llms.txt in comment --- README.md | 2 ++ packages/interact/README.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/README.md b/README.md index 3cc7d0a3..db82a791 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ + + # Wix Interact Web-native animation and interaction libraries โ€” declarative, AI-ready, framework-agnostic. diff --git a/packages/interact/README.md b/packages/interact/README.md index 88d87e46..5b83d38d 100644 --- a/packages/interact/README.md +++ b/packages/interact/README.md @@ -1,3 +1,5 @@ + + # @wix/interact Declarative, configuration-driven interaction library โ€” web-native, AI-ready, and framework-agnostic. From e497767fee144e0e4945d06198c6692d912cc6ac Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Thu, 28 May 2026 04:56:47 +0300 Subject: [PATCH 08/11] linking llms.txt in AI section --- README.md | 5 +++++ packages/interact/README.md | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/README.md b/README.md index db82a791..e76d28f9 100644 --- a/README.md +++ b/README.md @@ -336,6 +336,11 @@ type Interaction = { ## AI and Agent Support +AI agents can discover @wix/interact documentation through: + +- **[llms.txt](https://wix.github.io/interact/llms.txt)** โ€” structured docs index ([llms.txt standard](https://llmstxt.org/)) +- **[llms-full.txt](https://wix.github.io/interact/llms-full.txt)** โ€” all rules in a single file + ### Rules files **@wix/interact**: diff --git a/packages/interact/README.md b/packages/interact/README.md index 5b83d38d..9e7d8534 100644 --- a/packages/interact/README.md +++ b/packages/interact/README.md @@ -410,6 +410,11 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf Interact's JSON-config surface is the differentiator: configs are serializable, schema-typed, and validate-able (guardrails) โ€” no imperative DOM logic for an LLM to hallucinate. +AI agents can discover @wix/interact documentation through: + +- **[llms.txt](https://wix.github.io/interact/llms.txt)** โ€” structured docs index ([llms.txt standard](https://llmstxt.org/)) +- **[llms-full.txt](https://wix.github.io/interact/llms-full.txt)** โ€” all rules in a single file + **Rules files** ship with the package under [`rules/`](https://github.com/wix/interact/tree/master/packages/interact/rules) โ€” point your agent at them: - [`rules/full-lean.md`](https://wix.github.io/interact/rules/full-lean.md) โ€” complete config spec, pitfalls, and constraints From b0db01ed501b31d3a746eaf90d063dd99106c0cf Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Thu, 28 May 2026 05:26:18 +0300 Subject: [PATCH 09/11] llms.txt in package.json --- packages/interact/package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/interact/package.json b/packages/interact/package.json index 0d718233..73a7bb0f 100644 --- a/packages/interact/package.json +++ b/packages/interact/package.json @@ -6,6 +6,8 @@ "main": "dist/cjs/index.js", "module": "dist/es/index.js", "types": "dist/types/index.d.ts", + "llms": "https://wix.github.io/interact/llms.txt", + "llmsFull": "https://wix.github.io/interact/llms-full.txt", "exports": { ".": { "types": "./dist/types/index.d.ts", From f936a766e995be7d026d7219e1d4d92bfca1e457 Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Thu, 28 May 2026 13:03:31 +0300 Subject: [PATCH 10/11] removing initial mentions --- README.md | 4 ++-- packages/interact/README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e76d28f9..0fb58210 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ const config: InteractConfig = { }; ``` -FOUC prevention requires two steps โ€” (1) inject the output of `generate(config)` into ``, and (2) mark each entrance-animated element with `data-interact-initial="true"` (`initial={true}` in React). Both are required. +FOUC prevention requires injecting the output of `generate(config)` into ``. ### Click effect @@ -363,7 +363,7 @@ AI agents can discover @wix/interact documentation through: - Do not invent `namedEffect` types โ€” use only registered presets (see preset rules above) - Do not attach DOM event listeners manually โ€” express behavior through `trigger` and config - For `viewProgress`, avoid `overflow: hidden` on ancestors; use `overflow: clip` instead -- Call `generate(config)` at build time or on the server and inject CSS into ``. For `viewEnter` + `triggerType: 'once'`, to prevent FOUC, also mark elements with `data-interact-initial="true"`. +- Call `generate(config)` at build time or on the server and inject CSS into `` - `effects` at the config top level is a reusable `Record` - `` should wrap exactly one child (the library targets `.firstElementChild` by default). diff --git a/packages/interact/README.md b/packages/interact/README.md index 9e7d8534..6473a009 100644 --- a/packages/interact/README.md +++ b/packages/interact/README.md @@ -402,7 +402,7 @@ Each example is a complete `InteractConfig` โ€” pass it to `Interact.create(conf - **Same element as source and target with `viewEnter`** โ€” Must use `triggerType: 'once'`. Other types cause re-entry loops. - **Hit-area shift on `hover` / `pointerMove`** โ€” Animating size/position of the hovered element shifts the hit area and causes jitter. Instead, animate a child via `selector` or a different `key`. - **`registerEffects()` must run before `Interact.create()`/`generate()`** when using `namedEffect`. -- **FOUC prevention requires two steps** โ€” (1) inject the output of `generate(config)` into ``, and (2) mark each entrance-animated element with `data-interact-initial="true"` (`initial={true}` in React). Both are required. +- **FOUC prevention** โ€” requires injecting the output of `generate(config)` into ``. - **`generate(config, useFirstChild)`** โ€” Pass `true` for `` (web), `false` for vanilla and React ``. - **`` must wrap exactly one child** โ€” the library targets `:first-child` by default. From 7c57e0fd3342730fdbe86e92f085052437fc8720 Mon Sep 17 00:00:00 2001 From: ameerf-wix Date: Thu, 28 May 2026 13:37:17 +0300 Subject: [PATCH 11/11] removing redundant customEffect mention --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0fb58210..744f795e 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Web-native animation and interaction libraries โ€” declarative, AI-ready, framew **Wix Interact** (`@wix/interact`) is a declarative interaction layer on top of **@wix/motion**. You describe _when_ something should animate and _what_ should happen in a JSON config โ€” no manual event listeners, no imperative animation wiring. - **Config-driven** โ€” bind triggers (`viewEnter`, `click`, `hover`, `viewProgress`, `pointerMove`, and more) to effects in one `InteractConfig` object -- **Built on native browser APIs** โ€” Web Animations API, `ViewTimeline`, pointer tracking, and CSS; optional `customEffect` adds programmatic per-frame JS callbacks for effects that go beyond what native APIs can express. +- **Built on native browser APIs** โ€” Web Animations API, `ViewTimeline`, pointer tracking, and CSS. - **Three entry points** โ€” Web Components (`@wix/interact/web`), React (`@wix/interact/react`), and vanilla JS (`@wix/interact`) - **Ready-made presets** โ€” entrance, scroll, pointer, loop, and micro-interactions from `@wix/motion-presets` - **SSR-friendly CSS** โ€” `generate(config)` emits complete CSS for the whole config (keyframes, view-timeline, transitions, FOUC rules) so animations can be ready before JS runs