[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-wix-interactor":3,"mdc-8k48zd-key":34,"related-org-wix-interactor":4076,"related-repo-wix-interactor":4242},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":32,"mdContent":33},"interactor","add declarative animations with Interact","Use when user asks to add\u002Fedit motion without specific library, or with @wix\u002Finteract - hover, click, view\u002Fscroll triggered, scroll-driven, and pointer-driven animations for web. Wire animations to user interactions; install or set up @wix\u002Finteract; or edit an existing interact config. Do NOT use for other animation libraries.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"wix","Wix","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwix.jpg",[12,14,17,20],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"Animation","animation",{"name":18,"slug":19,"type":13},"Frontend","frontend",{"name":21,"slug":22,"type":13},"Design","design",4,"https:\u002F\u002Fgithub.com\u002Fwix\u002Finteract","2026-07-31T05:55:15.132693",null,2,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":31},[],"A powerful, declarative interaction library for creating engaging web apps.","https:\u002F\u002Fgithub.com\u002Fwix\u002Finteract\u002Ftree\u002FHEAD\u002Fskills\u002Finteractor","---\nname: interactor\ndescription: 'Use when user asks to add\u002Fedit motion without specific library, or with @wix\u002Finteract - hover, click, view\u002Fscroll triggered, scroll-driven, and pointer-driven animations for web. Wire animations to user interactions; install or set up @wix\u002Finteract; or edit an existing interact config. Do NOT use for other animation libraries.'\n---\n\n# Interactor — build interactions with @wix\u002Finteract\n\nThis skill installs, wires up, and configures motion interactions so you can\nadd or edit interactions on any webpage or web app. It is **interact-first**: you\ndescribe _what should animate and when_ as a declarative JSON config, and the\nlibrary does the DOM wiring. You almost never call the motion engine directly.\n\n## Mental model — packages and one config\n\n| Package                  | Role                                                                                                                         | You touch it…                                                                                       |\n| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- |\n| `@wix\u002Finteract`          | Declarative layer. Binds **triggers → effects** via an `InteractConfig`. Ships vanilla \u002F React \u002F Web-Component entry points. | Always. This is the API.                                                                            |\n| `@wix\u002Fmotion-presets`    | Ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as `namedEffect: { type: 'FadeIn' }`.                | When you want a prebuilt effect (the common case).                                                  |\n| `@wix\u002Fmotion`            | The engine (WAAPI, CSS, ViewTimeline, fastdom). Bundled inside interact.                                                     | Rarely — only for programmatic\u002Fescape-hatch animation. See `references\u002Fmotion-engine.md`.           |\n| `@wix\u002Finteract-validate` | Static validator for `InteractConfig` shape (schema + referential checks). No DOM.                                           | Agent-side validation always; optional dev\u002FCI guard in user projects. See `references\u002Fvalidate.md`. |\n\nThe whole job is: **pick a trigger, pick an effect, bind it to an element with a\nkey.** Everything else is detail.\n\n```\n┌── trigger (when) ──┐        ┌── effect (what) ────────────────┐\n│ viewEnter, hover,  │  ───►  │ namedEffect: { type: 'FadeIn' } │  ──► applied to\n│ click, viewProgress│        │ duration, easing, triggerType   │      element with\n│ pointerMove, …     │        │ (or keyframeEffect\u002FcustomEffect)│      matching key\n└────────────────────┘        └─────────────────────────────────┘\n```\n\n## Workflow\n\nFollow four steps in order: **Install → Integrate → Add\u002FEdit interactions → Validate.** If\nthe project already uses interact (a config and the package exist), skip to\n_Add\u002FEdit_. Read the linked reference files as you reach each step — they hold the\nfull schema, the preset catalog, and per-trigger rules. Don't try to hold it all\nin your head; the references are the source of truth.\n\nFor static or pre-rendered output (agent-authored HTML, SSG, static export),\nfollow the canonical CSS generation policy in\n`references\u002Fintegration-recipes.md`.\n\n---\n\n### Step 1 — Install\n\nBoth packages, one command. `@wix\u002Fmotion` comes transitively inside\n`@wix\u002Finteract` — **do not install it separately** on this path.\n\n```bash\nnpm install @wix\u002Finteract @wix\u002Fmotion-presets\n# (yarn add \u002F pnpm add work too — match the project's package manager)\nnpm install -D @wix\u002Finteract-validate   # optional — permanent dev\u002FCI config guard only\n```\n\nA no-build \u002F plain-HTML site can skip npm and import Interact from a CDN for\nruntime wiring — see the CDN recipe in `references\u002Fintegration-recipes.md`.\nCDN pages skip the validate package install; the agent validates configs without\nshipping the validator.\n\n---\n\n### Step 2 — Integrate\n\n**First, detect the stack and pick the entry point** (this determines every\nimport and a couple of flags). Decision procedure:\n\n1. **React \u002F Next \u002F any JSX project** (a `package.json` with `react`, `.jsx`\u002F`.tsx` files) → use `@wix\u002Finteract\u002Freact` with the `\u003CInteraction>` component.\n2. **Static \u002F pre-rendered HTML** (agent-generated `.html`, SSG export, Astro\u002FEleventy\u002FHugo output) → use `@wix\u002Finteract\u002Fweb` with `\u003Cinteract-element>` and follow the canonical CSS policy in `references\u002Fintegration-recipes.md`.\n3. **Plain HTML, no bundler** (hand-edited static `.html`, CDN runtime) → same as (2), using the CDN recipe for runtime wiring.\n4. **Bundled vanilla JS \u002F other framework** (Vite\u002FWebpack but no React, or Vue\u002FSvelte\u002FAngular) → use `@wix\u002Finteract\u002Fweb` (Web Components are framework-agnostic) **or** the base `@wix\u002Finteract` vanilla API. Prefer `\u002Fweb` unless the user wants to control binding manually.\n\nIf you can't tell, ask the user which framework the page uses. The full\ncopy-paste setup for each entry point — including SSR, cleanup, and a verification\nsnippet — is in **`references\u002Fintegration-recipes.md`**. Read it now for the entry\npoint you chose.\n\nPrefer two phases — **generation\u002Fbuild** (all CSS possible) and **runtime**\n(trigger wiring plus any runtime-dependent CSS):\n\n```ts\n\u002F\u002F Generation\u002Fbuild script (Node, SSG, agent scratch)\nimport { Interact, generate } from '@wix\u002Finteract\u002Fweb'; \u002F\u002F or \u002Freact, or '@wix\u002Finteract'\nimport { FadeIn } from '@wix\u002Fmotion-presets';\n\nInteract.registerEffects({ FadeIn }); \u002F\u002F BEFORE generate() — see invariants\nconst css = generate(config, \u002F* useFirstChild *\u002F true); \u002F\u002F true=web, false=react\u002Fvanilla\n\u002F\u002F Deliver css according to the canonical policy in integration-recipes.md\n```\n\n```ts\n\u002F\u002F Runtime (browser bundle \u002F CDN module)\nimport { Interact } from '@wix\u002Finteract\u002Fweb';\n\nconst instance = Interact.create(config); \u002F\u002F wire triggers\n```\n\nFor CSS delivery and runtime-only configs, follow the canonical policy in\n`references\u002Fintegration-recipes.md`.\n\n(For CDN\u002Fquick-start, `import * as presets` + `registerEffects(presets)` is fine at\ngeneration time — selective imports just keep bundled apps lean. See `references\u002Fpresets.md`.)\n\nMark up target elements with a **key** that matches the config:\n\n```html\n\u003C!-- web -->\n\u003Cinteract-element data-interact-key=\"hero\">\u003Csection>…\u003C\u002Fsection>\u003C\u002Finteract-element>\n\u003C!-- react -->\n\u003CInteraction tagName=\"section\" interactKey=\"hero\">…\u003C\u002FInteraction>\n\u003C!-- vanilla -->\n\u003Csection data-interact-key=\"hero\">…\u003C\u002Fsection>\n```\n\n```js\n\u002F\u002F for vanilla - add the following\nimport { add } from '@wix\u002Finteract';\n\nconst el = document.querySelector('[data-interact-key=\"hero\"]');\nadd(el);\n```\n\n---\n\n### Step 3 — Add \u002F edit interactions\n\n**Before designing the config, draw on the example library for inspiration and reference patterns:**\n\n1. Read `examples\u002Findex.md` (this file is the table of contents — it lists every demo with its summary and tags).\n2. Based on the user's request, identify 2–4 demos whose trigger type, layout, motion properties, or overall feel best match what's being built. Match on tags such as `viewProgress`, `pointerMove`, `sticky`, `stagger`, `3d`, or `clip-path`.\n3. Read those demo files from `examples\u002Fexamples\u002F\u003Ccategory>\u002F\u003Cname>.md`. Use the index rather than guessing paths; the categories are `gallery`, `carousel`, `image-background`, `text-animations`, `text-image`, and `ui-components`.\n4. Treat each demo as a cohesive unit — the interact config, HTML structure, and CSS layout are designed to work together. Adapt all three parts to the user's context rather than lifting any single piece in isolation.\n\nThis step is especially useful for: picking the right trigger\u002Feffect combination, handling complex layered compositions, and producing configs that feel polished rather than generic.\n\n---\n\nThis is where most work happens. An `InteractConfig` is:\n\n```ts\n{\n  interactions: [            \u002F\u002F REQUIRED — each binds one source+trigger to effect(s)\n    { key, trigger, params?, effects?, sequences?, conditions?, selector?, listContainer?, listItemSelector? }\n  ],\n  effects?:   { [effectId]: Effect },        \u002F\u002F reusable effects, referenced by effectId\n  sequences?: { [sequenceId]: SequenceConfig },\n  conditions?:{ [conditionId]: Condition },  \u002F\u002F media\u002Fselector gates\n}\n```\n\nTo **add** an interaction:\n\n1. Choose the **trigger** (see decision table below).\n2. Choose the **effect**: prefer a `namedEffect` preset (browse `references\u002Fpresets.md`); fall back to inline `keyframeEffect` for custom keyframes, or `customEffect` for non-CSS (SVG\u002Fcanvas\u002Ftext).\n3. Set the **playback field** the trigger needs: `triggerType` for time effects on hover\u002Fclick\u002FviewEnter; `stateAction` for CSS-state (transition) effects; `rangeStart`\u002F`rangeEnd` for `viewProgress`. Never set both `triggerType` and `stateAction` on one effect.\n4. Bind it: give the target element the matching `key` in the markup. If the thing\n   you're animating is a stack of layers that should move together (hero\n   background + overlay + content, card image + text), key the **one container**\n   that wraps them and put a single effect on it — don't repeat the effect on each\n   layer (invariant 11).\n\nTo **edit** an existing config: read the current config first, find the\ninteraction\u002Feffect by its `key`\u002F`effectId`, and change _only_ what's asked.\nPreserve the rest (other interactions, ids, markup keys). After editing, re-run\nvalidation (Step 4) — a changed `namedEffect.type` or a new\n`viewProgress` effect can silently break if you skip it. If the effect catalog or\ntrigger semantics are involved, open `references\u002Fpresets.md` \u002F `references\u002Ftriggers.md`.\n\nFor multi-target staggering (cards, lists, nav items), use **sequences**, not\nmanual per-item delays — see `references\u002Ftriggers.md` and the sequences section of\n`references\u002Fconfig-schema.md`.\n\n---\n\n### Step 4 — Validate the config\n\nNo `InteractConfig` reaches `generate()` \u002F `Interact.create()` unvalidated, and\n**no `@wix\u002Finteract-validate` reference ships in the code you deliver** — on any\nentry point, CDN included. How you run validation depends on whether you can\nconstruct the config statically:\n\n- **Static config** (you authored a literal you can read in full): validate **before\n  emit** in a scratch script — never add validator imports to user files. See\n  `references\u002Fvalidate.md` for per-environment run mechanics.\n- **Dynamic config** (built at runtime from data\u002Fprops\u002Ffetch\u002Floops — you cannot\n  construct it by reading): temporarily inject `assertValidInteractConfig(config)`\n  immediately before `generate()`\u002F`create()`, run so that code path executes, fix\n  every `severity: 'error'`, then **remove** the call, import, any `esm.sh` import,\n  and any temp devDep. Prefer a dev-only validation script when the config builder\n  module is importable in isolation (no removal step). Full loop in\n  `references\u002Fvalidate.md`. For static site output, follow the canonical CSS\n  generation policy in `references\u002Fintegration-recipes.md`.\n- **Permanent guard (opt-in, separate):** leaving `assertValidInteractConfig` in\n  shipped code as a devDependency CI gate is only when scaffolding a new project or\n  the user explicitly asks — do not conflate with the temporary injection above.\n\nFix every issue with `severity: 'error'` before proceeding; prefer fixing warnings\ntoo. `valid: false` blocks emit.\n\n**Before declaring done**, grep the files you're shipping:\n\n```bash\ngrep -REn 'interact-validate|validateInteractConfig|assertValidInteractConfig|InteractValidationError' \u003Cshipped files>\n# expect: no matches (unless the user asked for a permanent CI guard)\n```\n\nThen run the semantic checklist below.\n\n---\n\n## Trigger → use-case quick reference\n\n| Trigger              | Use for                                                         | Effect type & key field                                         |\n| :------------------- | :-------------------------------------------------------------- | :-------------------------------------------------------------- |\n| `viewEnter`          | Entrance animations when an element scrolls into view           | Time effect; `triggerType` (default `'once'`)                   |\n| `viewProgress`       | Scroll-driven (parallax, reveal, scrub tied to scroll position) | Scrub effect; `rangeStart`\u002F`rangeEnd`                           |\n| `hover` \u002F `interest` | Hover effects (`interest` = hover+focus, accessible)            | Time effect (`triggerType`) **or** State effect (`stateAction`) |\n| `click` \u002F `activate` | Click toggles (`activate` = click+keyboard, accessible)         | Time effect (`triggerType`) **or** State effect (`stateAction`) |\n| `pointerMove`        | Cursor-following \u002F tilt \u002F parallax-on-mouse                     | Scrub effect; `params.hitArea`, `params.axis`                   |\n| `animationEnd`       | Chain one effect after another finishes                         | `params.effectId` of the preceding effect                       |\n\nPer-trigger deep rules and gotchas → **`references\u002Ftriggers.md`**. Effect catalog (which preset for which look) → **`references\u002Fpresets.md`**. Full\nfield-by-field schema for every config object → **`references\u002Fconfig-schema.md`**.\n\n---\n\n## Critical invariants — get these wrong and output silently breaks\n\nThese are the failure modes that don't throw — the page just renders wrong or the\nanimation no-ops. Apply them every time, even if you don't open a reference file.\n\n1. **`registerEffects()` runs BEFORE `generate()` and `Interact.create()`.** An\n   unregistered `namedEffect.type` doesn't error — it logs a console warning and\n   the animation never runs. Register the presets you use up front — prefer a\n   selective `import { FadeIn, … }` (tree-shakeable) over `import * as presets` in\n   bundled apps.\n\n2. **`generate(config, useFirstChild)` parity** — pass `true` for the **web**\n   (`\u003Cinteract-element>`) entry point, `false` for **vanilla** and **React**.\n   Backwards = the FOUC-prevention selectors target the wrong node and break.\n\n3. **FOUC prevention.** Follow the canonical CSS generation policy in\n   `references\u002Fintegration-recipes.md`. For the generated initial-rule behavior\n   and trigger-specific exceptions, see “CSS generation & FOUC” in\n   `references\u002Fconfig-schema.md`. Same-element `viewEnter` + `once` entrances get\n   author-important neutral initial rules from `generate()`. Always set\n   `fill: 'backwards'` on `viewEnter` + `once` animation effects (or `'both'`\n   when the final keyframe must persist) so delayed entrances hold their first\n   keyframe after the entrance marker is set.\n\n4. **Vanilla binding.** You must then call the **standalone** `add(element, 'key')` for\n   each element once it exists in the DOM. For clean up call the `remove('key')` function.\n   `add`\u002F`remove` are functions imported from the package.\n\n5. **`viewEnter` with same source & target → only `triggerType: 'once'`.** For\n   `repeat`\u002F`alternate`\u002F`state`, the animation can move the element out of\u002Finto the\n   viewport and re-trigger forever. Use **separate** source and target elements for\n   those.\n\n6. **Hit-area shift.** On `hover` or `pointerMove`, if the effect changes the\n   element's size\u002Fposition (`scale`, `translate`), the hovered hit-area shifts and\n   flickers. Keep the trigger on the stable parent and animate a **child** by\n   putting `selector` (or different `key`) on the **effect** — `selector` on the _effect_\n   sets the **target**; `selector` on the _interaction_ sets the trigger's\n   **source** instead (the opposite of what you want).\n\n7. **`viewProgress` needs `overflow: clip`, not `hidden`.** `overflow: hidden` on\n   any ancestor between the element and the scroll container creates a scroll\n   context that kills ViewTimeline. Replace every `overflow: hidden` with\n   `overflow: clip` (Tailwind: `overflow-clip`).\n\n8. **Never invent or guess.** Use only real preset names (`references\u002Fpresets.md`).\n   If you don't know a preset's option name\u002Ftype, **omit it** and rely on defaults\n   — guessing produces silently-wrong output. Never emit `DVD` (exists in types but\n   isn't registered) or any `Bg*`\u002F`ImageParallax` preset (experimental, not\n   production-ready). For \"background parallax\", use the public **`ParallaxScroll`**\n   on the image element with `viewProgress`.\n\n9. **Scroll presets carry a `range`.** Every `*Scroll` preset needs\n   `range: 'in' | 'out' | 'continuous'` in its `namedEffect`\n   (prefer `'continuous'`) — **except** `ParallaxScroll`, which takes `parallaxFactor` instead.\n\n10. **Lists: one keyed wrapper, fan out by `selector` or `listContainer` — never\n    duplicate keys.** Keys are unique (one controller per key), so never put the\n    same key on N repeated elements — they'd clobber and only the last binds.\n    Instead key an **ancestor wrapper** and choose by _who triggers_: use\n    **`selector`** on the **effect** when one trigger staggers\u002Fanimates many targets\n    (a `viewEnter` sequence over cards); use **`listContainer`** on the\n    **interaction** when each item needs its **own** trigger (per-card\n    `hover`\u002F`pointerMove`, one tracker each). Either way the `selector`\u002F\n    `listContainer` must match a **descendant** of the keyed element, not the keyed\n    element itself.\n\n11. **Layers that move as one → one keyed container, not the same effect on each\n    layer.** When an element is composed of stacked layers meant to animate\n    **together** — a hero of background image + gradient overlay + content block, a\n    card of image + heading + text + button — put the trigger and **one** effect on\n    the wrapper that holds them and key that wrapper. Copying the same\n    `FadeIn`\u002F`SlideIn` onto each layer is the common wrong turn: N layers become N\n    controllers that have to stay in sync (they visibly drift on slower devices), N\n    keys to wire, and N× the per-frame work for a motion the eye reads as a single\n    move. Collapse them onto the container. This is **not** the same as two cases\n    where separate targets are deliberate: scroll **parallax**, where layers move at\n    _different_ rates on purpose (a `ParallaxScroll` per layer — keep those\n    separate), and **hit-area-safe child targeting** (invariant 6 — trigger on the\n    parent, animate one child). Litmus test: same trigger, same effect, same timing\n    across the layers ⇒ they belong on one keyed container.\n\n## Verify your work (run before declaring done)\n\nAnimations are hard to confirm headlessly, so this static check is your reliable\nproxy.\n\n### Automated config validation\n\n- [ ] `validateInteractConfig(config)` returns `valid: true` (no `severity: 'error'` issues). See `references\u002Fvalidate.md`.\n- [ ] Shipped files contain **no** `interact-validate`, `validateInteractConfig`, `assertValidInteractConfig`, or `InteractValidationError` references (unless the user explicitly asked for a permanent CI guard).\n\n### Semantic & integration checklist\n\nItems the validator cannot check — walk these after automated validation passes:\n\n- [ ] Every `namedEffect.type` is a **real registered preset** from `references\u002Fpresets.md` (not `DVD`, not a `Bg*` preset, not invented).\n- [ ] Every `*Scroll` preset used with `viewProgress` has a `range` (except `ParallaxScroll`).\n- [ ] `pointerMove` effects have **no** `rangeStart`\u002F`rangeEnd` (those are `viewProgress`-only).\n- [ ] Every interaction `key` (and effect `key`) has a **matching element** in the markup (`data-interact-key` \u002F `interactKey`).\n- [ ] Static\u002Fpre-rendered CSS follows the canonical policy in `references\u002Fintegration-recipes.md`.\n- [ ] `useFirstChild` matches the entry point.\n- [ ] Child-target effects put `selector`\u002F`key` on the **effect**, not the interaction. Groups of items use one keyed wrapper + a **descendant** match (no duplicate keys): `selector` on the effect for a one-trigger stagger\u002Fsequence, `listContainer` on the interaction for per-item triggers.\n- [ ] Composite elements whose layers animate as one unit are keyed on a **single container** with one effect — the same effect is not copied onto each layer (distinct from intentional per-layer parallax, which uses different rates, or child-targeting to avoid hit-area shift).\n- [ ] Invariants 5–7, 10, and 11 hold for the relevant triggers (separate source\u002Ftarget, child targets, `overflow: clip`, unique keys, layers collapsed to one container).\n\nIf a dev server is available, load the page and confirm the animation runs and the\nbrowser console is free of \"not found in registry\" warnings.\n\n## Reference files\n\nRead the one(s) relevant to the task — they are self-contained and source-accurate:\n\n- **`examples\u002Findex.md`** — table of contents for the curated demo library, with summaries, tags, and exact file links across all example categories.\n- **`references\u002Fconfig-schema.md`** — every config object field-by-field: `InteractConfig`, `Interaction`, all three effect variants, sequences, conditions, element resolution (source vs target), FOUC, and the full `Interact` static API.\n- **`references\u002Ftriggers.md`** — per-trigger deep rules and gotchas: `viewEnter`, `viewProgress`, `hover`\u002F`click` (+ `triggerType`\u002F`stateAction` tables), `pointerMove`, `animationEnd`, accessibility variants, and sequences\u002Fstagger.\n- **`references\u002Fpresets.md`** — the full preset catalog by category with parameters, defaults, accessibility risk tiers + reduced-motion fallbacks, and an \"atmosphere → preset\" selection guide.\n- **`references\u002Fintegration-recipes.md`** — complete copy-paste setup per entry point (web \u002F React \u002F vanilla \u002F CDN), with SSR, lifecycle\u002Fcleanup, and verification.\n- **`references\u002Fvalidate.md`** — how to run `@wix\u002Finteract-validate` (static scratch script vs temporary injection for dynamic configs), options, limitations, and what the validator does not check.\n- **`references\u002Fmotion-engine.md`** — thin escape-hatch reference for calling `@wix\u002Fmotion` directly (programmatic `getWebAnimation`\u002F`getScrubScene`\u002F`getSequence`), easings, and engine gotchas. Only when the declarative config can't express what's needed.\n",{"data":35,"body":36},{"name":4,"description":6},{"type":37,"children":38},"root",[39,48,70,77,244,256,268,274,293,305,309,316,342,415,427,430,436,446,604,619,638,889,993,1004,1033,1045,1283,1419,1422,1428,1436,1561,1566,1569,1581,1869,1880,2020,2080,2106,2109,2115,2156,2270,2290,2300,2365,2370,2373,2379,2642,2676,2679,2685,2690,3461,3467,3472,3478,3566,3572,3577,3853,3858,3864,3869,4070],{"type":40,"tag":41,"props":42,"children":44},"element","h1",{"id":43},"interactor-build-interactions-with-wixinteract",[45],{"type":46,"value":47},"text","Interactor — build interactions with @wix\u002Finteract",{"type":40,"tag":49,"props":50,"children":51},"p",{},[52,54,60,62,68],{"type":46,"value":53},"This skill installs, wires up, and configures motion interactions so you can\nadd or edit interactions on any webpage or web app. It is ",{"type":40,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":46,"value":59},"interact-first",{"type":46,"value":61},": you\ndescribe ",{"type":40,"tag":63,"props":64,"children":65},"em",{},[66],{"type":46,"value":67},"what should animate and when",{"type":46,"value":69}," as a declarative JSON config, and the\nlibrary does the DOM wiring. You almost never call the motion engine directly.",{"type":40,"tag":71,"props":72,"children":74},"h2",{"id":73},"mental-model-packages-and-one-config",[75],{"type":46,"value":76},"Mental model — packages and one config",{"type":40,"tag":78,"props":79,"children":80},"table",{},[81,106],{"type":40,"tag":82,"props":83,"children":84},"thead",{},[85],{"type":40,"tag":86,"props":87,"children":88},"tr",{},[89,96,101],{"type":40,"tag":90,"props":91,"children":93},"th",{"align":92},"left",[94],{"type":46,"value":95},"Package",{"type":40,"tag":90,"props":97,"children":98},{"align":92},[99],{"type":46,"value":100},"Role",{"type":40,"tag":90,"props":102,"children":103},{"align":92},[104],{"type":46,"value":105},"You touch it…",{"type":40,"tag":107,"props":108,"children":109},"tbody",{},[110,149,179,208],{"type":40,"tag":86,"props":111,"children":112},{},[113,124,144],{"type":40,"tag":114,"props":115,"children":116},"td",{"align":92},[117],{"type":40,"tag":118,"props":119,"children":121},"code",{"className":120},[],[122],{"type":46,"value":123},"@wix\u002Finteract",{"type":40,"tag":114,"props":125,"children":126},{"align":92},[127,129,134,136,142],{"type":46,"value":128},"Declarative layer. Binds ",{"type":40,"tag":55,"props":130,"children":131},{},[132],{"type":46,"value":133},"triggers → effects",{"type":46,"value":135}," via an ",{"type":40,"tag":118,"props":137,"children":139},{"className":138},[],[140],{"type":46,"value":141},"InteractConfig",{"type":46,"value":143},". Ships vanilla \u002F React \u002F Web-Component entry points.",{"type":40,"tag":114,"props":145,"children":146},{"align":92},[147],{"type":46,"value":148},"Always. This is the API.",{"type":40,"tag":86,"props":150,"children":151},{},[152,161,174],{"type":40,"tag":114,"props":153,"children":154},{"align":92},[155],{"type":40,"tag":118,"props":156,"children":158},{"className":157},[],[159],{"type":46,"value":160},"@wix\u002Fmotion-presets",{"type":40,"tag":114,"props":162,"children":163},{"align":92},[164,166,172],{"type":46,"value":165},"Ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as ",{"type":40,"tag":118,"props":167,"children":169},{"className":168},[],[170],{"type":46,"value":171},"namedEffect: { type: 'FadeIn' }",{"type":46,"value":173},".",{"type":40,"tag":114,"props":175,"children":176},{"align":92},[177],{"type":46,"value":178},"When you want a prebuilt effect (the common case).",{"type":40,"tag":86,"props":180,"children":181},{},[182,191,196],{"type":40,"tag":114,"props":183,"children":184},{"align":92},[185],{"type":40,"tag":118,"props":186,"children":188},{"className":187},[],[189],{"type":46,"value":190},"@wix\u002Fmotion",{"type":40,"tag":114,"props":192,"children":193},{"align":92},[194],{"type":46,"value":195},"The engine (WAAPI, CSS, ViewTimeline, fastdom). Bundled inside interact.",{"type":40,"tag":114,"props":197,"children":198},{"align":92},[199,201,207],{"type":46,"value":200},"Rarely — only for programmatic\u002Fescape-hatch animation. See ",{"type":40,"tag":118,"props":202,"children":204},{"className":203},[],[205],{"type":46,"value":206},"references\u002Fmotion-engine.md",{"type":46,"value":173},{"type":40,"tag":86,"props":209,"children":210},{},[211,220,232],{"type":40,"tag":114,"props":212,"children":213},{"align":92},[214],{"type":40,"tag":118,"props":215,"children":217},{"className":216},[],[218],{"type":46,"value":219},"@wix\u002Finteract-validate",{"type":40,"tag":114,"props":221,"children":222},{"align":92},[223,225,230],{"type":46,"value":224},"Static validator for ",{"type":40,"tag":118,"props":226,"children":228},{"className":227},[],[229],{"type":46,"value":141},{"type":46,"value":231}," shape (schema + referential checks). No DOM.",{"type":40,"tag":114,"props":233,"children":234},{"align":92},[235,237,243],{"type":46,"value":236},"Agent-side validation always; optional dev\u002FCI guard in user projects. See ",{"type":40,"tag":118,"props":238,"children":240},{"className":239},[],[241],{"type":46,"value":242},"references\u002Fvalidate.md",{"type":46,"value":173},{"type":40,"tag":49,"props":245,"children":246},{},[247,249,254],{"type":46,"value":248},"The whole job is: ",{"type":40,"tag":55,"props":250,"children":251},{},[252],{"type":46,"value":253},"pick a trigger, pick an effect, bind it to an element with a\nkey.",{"type":46,"value":255}," Everything else is detail.",{"type":40,"tag":257,"props":258,"children":262},"pre",{"className":259,"code":261,"language":46},[260],"language-text","┌── trigger (when) ──┐        ┌── effect (what) ────────────────┐\n│ viewEnter, hover,  │  ───►  │ namedEffect: { type: 'FadeIn' } │  ──► applied to\n│ click, viewProgress│        │ duration, easing, triggerType   │      element with\n│ pointerMove, …     │        │ (or keyframeEffect\u002FcustomEffect)│      matching key\n└────────────────────┘        └─────────────────────────────────┘\n",[263],{"type":40,"tag":118,"props":264,"children":266},{"__ignoreMap":265},"",[267],{"type":46,"value":261},{"type":40,"tag":71,"props":269,"children":271},{"id":270},"workflow",[272],{"type":46,"value":273},"Workflow",{"type":40,"tag":49,"props":275,"children":276},{},[277,279,284,286,291],{"type":46,"value":278},"Follow four steps in order: ",{"type":40,"tag":55,"props":280,"children":281},{},[282],{"type":46,"value":283},"Install → Integrate → Add\u002FEdit interactions → Validate.",{"type":46,"value":285}," If\nthe project already uses interact (a config and the package exist), skip to\n",{"type":40,"tag":63,"props":287,"children":288},{},[289],{"type":46,"value":290},"Add\u002FEdit",{"type":46,"value":292},". Read the linked reference files as you reach each step — they hold the\nfull schema, the preset catalog, and per-trigger rules. Don't try to hold it all\nin your head; the references are the source of truth.",{"type":40,"tag":49,"props":294,"children":295},{},[296,298,304],{"type":46,"value":297},"For static or pre-rendered output (agent-authored HTML, SSG, static export),\nfollow the canonical CSS generation policy in\n",{"type":40,"tag":118,"props":299,"children":301},{"className":300},[],[302],{"type":46,"value":303},"references\u002Fintegration-recipes.md",{"type":46,"value":173},{"type":40,"tag":306,"props":307,"children":308},"hr",{},[],{"type":40,"tag":310,"props":311,"children":313},"h3",{"id":312},"step-1-install",[314],{"type":46,"value":315},"Step 1 — Install",{"type":40,"tag":49,"props":317,"children":318},{},[319,321,326,328,333,335,340],{"type":46,"value":320},"Both packages, one command. ",{"type":40,"tag":118,"props":322,"children":324},{"className":323},[],[325],{"type":46,"value":190},{"type":46,"value":327}," comes transitively inside\n",{"type":40,"tag":118,"props":329,"children":331},{"className":330},[],[332],{"type":46,"value":123},{"type":46,"value":334}," — ",{"type":40,"tag":55,"props":336,"children":337},{},[338],{"type":46,"value":339},"do not install it separately",{"type":46,"value":341}," on this path.",{"type":40,"tag":257,"props":343,"children":347},{"className":344,"code":345,"language":346,"meta":265,"style":265},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @wix\u002Finteract @wix\u002Fmotion-presets\n# (yarn add \u002F pnpm add work too — match the project's package manager)\nnpm install -D @wix\u002Finteract-validate   # optional — permanent dev\u002FCI config guard only\n","bash",[348],{"type":40,"tag":118,"props":349,"children":350},{"__ignoreMap":265},[351,379,388],{"type":40,"tag":352,"props":353,"children":356},"span",{"class":354,"line":355},"line",1,[357,363,369,374],{"type":40,"tag":352,"props":358,"children":360},{"style":359},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[361],{"type":46,"value":362},"npm",{"type":40,"tag":352,"props":364,"children":366},{"style":365},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[367],{"type":46,"value":368}," install",{"type":40,"tag":352,"props":370,"children":371},{"style":365},[372],{"type":46,"value":373}," @wix\u002Finteract",{"type":40,"tag":352,"props":375,"children":376},{"style":365},[377],{"type":46,"value":378}," @wix\u002Fmotion-presets\n",{"type":40,"tag":352,"props":380,"children":381},{"class":354,"line":27},[382],{"type":40,"tag":352,"props":383,"children":385},{"style":384},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[386],{"type":46,"value":387},"# (yarn add \u002F pnpm add work too — match the project's package manager)\n",{"type":40,"tag":352,"props":389,"children":391},{"class":354,"line":390},3,[392,396,400,405,410],{"type":40,"tag":352,"props":393,"children":394},{"style":359},[395],{"type":46,"value":362},{"type":40,"tag":352,"props":397,"children":398},{"style":365},[399],{"type":46,"value":368},{"type":40,"tag":352,"props":401,"children":402},{"style":365},[403],{"type":46,"value":404}," -D",{"type":40,"tag":352,"props":406,"children":407},{"style":365},[408],{"type":46,"value":409}," @wix\u002Finteract-validate",{"type":40,"tag":352,"props":411,"children":412},{"style":384},[413],{"type":46,"value":414},"   # optional — permanent dev\u002FCI config guard only\n",{"type":40,"tag":49,"props":416,"children":417},{},[418,420,425],{"type":46,"value":419},"A no-build \u002F plain-HTML site can skip npm and import Interact from a CDN for\nruntime wiring — see the CDN recipe in ",{"type":40,"tag":118,"props":421,"children":423},{"className":422},[],[424],{"type":46,"value":303},{"type":46,"value":426},".\nCDN pages skip the validate package install; the agent validates configs without\nshipping the validator.",{"type":40,"tag":306,"props":428,"children":429},{},[],{"type":40,"tag":310,"props":431,"children":433},{"id":432},"step-2-integrate",[434],{"type":46,"value":435},"Step 2 — Integrate",{"type":40,"tag":49,"props":437,"children":438},{},[439,444],{"type":40,"tag":55,"props":440,"children":441},{},[442],{"type":46,"value":443},"First, detect the stack and pick the entry point",{"type":46,"value":445}," (this determines every\nimport and a couple of flags). Decision procedure:",{"type":40,"tag":447,"props":448,"children":449},"ol",{},[450,509,548,565],{"type":40,"tag":451,"props":452,"children":453},"li",{},[454,459,461,467,469,475,477,483,485,491,493,499,501,507],{"type":40,"tag":55,"props":455,"children":456},{},[457],{"type":46,"value":458},"React \u002F Next \u002F any JSX project",{"type":46,"value":460}," (a ",{"type":40,"tag":118,"props":462,"children":464},{"className":463},[],[465],{"type":46,"value":466},"package.json",{"type":46,"value":468}," with ",{"type":40,"tag":118,"props":470,"children":472},{"className":471},[],[473],{"type":46,"value":474},"react",{"type":46,"value":476},", ",{"type":40,"tag":118,"props":478,"children":480},{"className":479},[],[481],{"type":46,"value":482},".jsx",{"type":46,"value":484},"\u002F",{"type":40,"tag":118,"props":486,"children":488},{"className":487},[],[489],{"type":46,"value":490},".tsx",{"type":46,"value":492}," files) → use ",{"type":40,"tag":118,"props":494,"children":496},{"className":495},[],[497],{"type":46,"value":498},"@wix\u002Finteract\u002Freact",{"type":46,"value":500}," with the ",{"type":40,"tag":118,"props":502,"children":504},{"className":503},[],[505],{"type":46,"value":506},"\u003CInteraction>",{"type":46,"value":508}," component.",{"type":40,"tag":451,"props":510,"children":511},{},[512,517,519,525,527,533,534,540,542,547],{"type":40,"tag":55,"props":513,"children":514},{},[515],{"type":46,"value":516},"Static \u002F pre-rendered HTML",{"type":46,"value":518}," (agent-generated ",{"type":40,"tag":118,"props":520,"children":522},{"className":521},[],[523],{"type":46,"value":524},".html",{"type":46,"value":526},", SSG export, Astro\u002FEleventy\u002FHugo output) → use ",{"type":40,"tag":118,"props":528,"children":530},{"className":529},[],[531],{"type":46,"value":532},"@wix\u002Finteract\u002Fweb",{"type":46,"value":468},{"type":40,"tag":118,"props":535,"children":537},{"className":536},[],[538],{"type":46,"value":539},"\u003Cinteract-element>",{"type":46,"value":541}," and follow the canonical CSS policy in ",{"type":40,"tag":118,"props":543,"children":545},{"className":544},[],[546],{"type":46,"value":303},{"type":46,"value":173},{"type":40,"tag":451,"props":549,"children":550},{},[551,556,558,563],{"type":40,"tag":55,"props":552,"children":553},{},[554],{"type":46,"value":555},"Plain HTML, no bundler",{"type":46,"value":557}," (hand-edited static ",{"type":40,"tag":118,"props":559,"children":561},{"className":560},[],[562],{"type":46,"value":524},{"type":46,"value":564},", CDN runtime) → same as (2), using the CDN recipe for runtime wiring.",{"type":40,"tag":451,"props":566,"children":567},{},[568,573,575,580,582,587,589,594,596,602],{"type":40,"tag":55,"props":569,"children":570},{},[571],{"type":46,"value":572},"Bundled vanilla JS \u002F other framework",{"type":46,"value":574}," (Vite\u002FWebpack but no React, or Vue\u002FSvelte\u002FAngular) → use ",{"type":40,"tag":118,"props":576,"children":578},{"className":577},[],[579],{"type":46,"value":532},{"type":46,"value":581}," (Web Components are framework-agnostic) ",{"type":40,"tag":55,"props":583,"children":584},{},[585],{"type":46,"value":586},"or",{"type":46,"value":588}," the base ",{"type":40,"tag":118,"props":590,"children":592},{"className":591},[],[593],{"type":46,"value":123},{"type":46,"value":595}," vanilla API. Prefer ",{"type":40,"tag":118,"props":597,"children":599},{"className":598},[],[600],{"type":46,"value":601},"\u002Fweb",{"type":46,"value":603}," unless the user wants to control binding manually.",{"type":40,"tag":49,"props":605,"children":606},{},[607,609,617],{"type":46,"value":608},"If you can't tell, ask the user which framework the page uses. The full\ncopy-paste setup for each entry point — including SSR, cleanup, and a verification\nsnippet — is in ",{"type":40,"tag":55,"props":610,"children":611},{},[612],{"type":40,"tag":118,"props":613,"children":615},{"className":614},[],[616],{"type":46,"value":303},{"type":46,"value":618},". Read it now for the entry\npoint you chose.",{"type":40,"tag":49,"props":620,"children":621},{},[622,624,629,631,636],{"type":46,"value":623},"Prefer two phases — ",{"type":40,"tag":55,"props":625,"children":626},{},[627],{"type":46,"value":628},"generation\u002Fbuild",{"type":46,"value":630}," (all CSS possible) and ",{"type":40,"tag":55,"props":632,"children":633},{},[634],{"type":46,"value":635},"runtime",{"type":46,"value":637},"\n(trigger wiring plus any runtime-dependent CSS):",{"type":40,"tag":257,"props":639,"children":643},{"className":640,"code":641,"language":642,"meta":265,"style":265},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Generation\u002Fbuild script (Node, SSG, agent scratch)\nimport { Interact, generate } from '@wix\u002Finteract\u002Fweb'; \u002F\u002F or \u002Freact, or '@wix\u002Finteract'\nimport { FadeIn } from '@wix\u002Fmotion-presets';\n\nInteract.registerEffects({ FadeIn }); \u002F\u002F BEFORE generate() — see invariants\nconst css = generate(config, \u002F* useFirstChild *\u002F true); \u002F\u002F true=web, false=react\u002Fvanilla\n\u002F\u002F Deliver css according to the canonical policy in integration-recipes.md\n","ts",[644],{"type":40,"tag":118,"props":645,"children":646},{"__ignoreMap":265},[647,655,720,761,770,823,880],{"type":40,"tag":352,"props":648,"children":649},{"class":354,"line":355},[650],{"type":40,"tag":352,"props":651,"children":652},{"style":384},[653],{"type":46,"value":654},"\u002F\u002F Generation\u002Fbuild script (Node, SSG, agent scratch)\n",{"type":40,"tag":352,"props":656,"children":657},{"class":354,"line":27},[658,664,670,676,681,686,691,696,701,705,710,715],{"type":40,"tag":352,"props":659,"children":661},{"style":660},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[662],{"type":46,"value":663},"import",{"type":40,"tag":352,"props":665,"children":667},{"style":666},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[668],{"type":46,"value":669}," {",{"type":40,"tag":352,"props":671,"children":673},{"style":672},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[674],{"type":46,"value":675}," Interact",{"type":40,"tag":352,"props":677,"children":678},{"style":666},[679],{"type":46,"value":680},",",{"type":40,"tag":352,"props":682,"children":683},{"style":672},[684],{"type":46,"value":685}," generate",{"type":40,"tag":352,"props":687,"children":688},{"style":666},[689],{"type":46,"value":690}," }",{"type":40,"tag":352,"props":692,"children":693},{"style":660},[694],{"type":46,"value":695}," from",{"type":40,"tag":352,"props":697,"children":698},{"style":666},[699],{"type":46,"value":700}," '",{"type":40,"tag":352,"props":702,"children":703},{"style":365},[704],{"type":46,"value":532},{"type":40,"tag":352,"props":706,"children":707},{"style":666},[708],{"type":46,"value":709},"'",{"type":40,"tag":352,"props":711,"children":712},{"style":666},[713],{"type":46,"value":714},";",{"type":40,"tag":352,"props":716,"children":717},{"style":384},[718],{"type":46,"value":719}," \u002F\u002F or \u002Freact, or '@wix\u002Finteract'\n",{"type":40,"tag":352,"props":721,"children":722},{"class":354,"line":390},[723,727,731,736,740,744,748,752,756],{"type":40,"tag":352,"props":724,"children":725},{"style":660},[726],{"type":46,"value":663},{"type":40,"tag":352,"props":728,"children":729},{"style":666},[730],{"type":46,"value":669},{"type":40,"tag":352,"props":732,"children":733},{"style":672},[734],{"type":46,"value":735}," FadeIn",{"type":40,"tag":352,"props":737,"children":738},{"style":666},[739],{"type":46,"value":690},{"type":40,"tag":352,"props":741,"children":742},{"style":660},[743],{"type":46,"value":695},{"type":40,"tag":352,"props":745,"children":746},{"style":666},[747],{"type":46,"value":700},{"type":40,"tag":352,"props":749,"children":750},{"style":365},[751],{"type":46,"value":160},{"type":40,"tag":352,"props":753,"children":754},{"style":666},[755],{"type":46,"value":709},{"type":40,"tag":352,"props":757,"children":758},{"style":666},[759],{"type":46,"value":760},";\n",{"type":40,"tag":352,"props":762,"children":763},{"class":354,"line":23},[764],{"type":40,"tag":352,"props":765,"children":767},{"emptyLinePlaceholder":766},true,[768],{"type":46,"value":769},"\n",{"type":40,"tag":352,"props":771,"children":773},{"class":354,"line":772},5,[774,779,783,789,794,799,804,809,814,818],{"type":40,"tag":352,"props":775,"children":776},{"style":672},[777],{"type":46,"value":778},"Interact",{"type":40,"tag":352,"props":780,"children":781},{"style":666},[782],{"type":46,"value":173},{"type":40,"tag":352,"props":784,"children":786},{"style":785},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[787],{"type":46,"value":788},"registerEffects",{"type":40,"tag":352,"props":790,"children":791},{"style":672},[792],{"type":46,"value":793},"(",{"type":40,"tag":352,"props":795,"children":796},{"style":666},[797],{"type":46,"value":798},"{",{"type":40,"tag":352,"props":800,"children":801},{"style":672},[802],{"type":46,"value":803}," FadeIn ",{"type":40,"tag":352,"props":805,"children":806},{"style":666},[807],{"type":46,"value":808},"}",{"type":40,"tag":352,"props":810,"children":811},{"style":672},[812],{"type":46,"value":813},")",{"type":40,"tag":352,"props":815,"children":816},{"style":666},[817],{"type":46,"value":714},{"type":40,"tag":352,"props":819,"children":820},{"style":384},[821],{"type":46,"value":822}," \u002F\u002F BEFORE generate() — see invariants\n",{"type":40,"tag":352,"props":824,"children":826},{"class":354,"line":825},6,[827,833,838,843,847,852,856,861,867,871,875],{"type":40,"tag":352,"props":828,"children":830},{"style":829},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[831],{"type":46,"value":832},"const",{"type":40,"tag":352,"props":834,"children":835},{"style":672},[836],{"type":46,"value":837}," css ",{"type":40,"tag":352,"props":839,"children":840},{"style":666},[841],{"type":46,"value":842},"=",{"type":40,"tag":352,"props":844,"children":845},{"style":785},[846],{"type":46,"value":685},{"type":40,"tag":352,"props":848,"children":849},{"style":672},[850],{"type":46,"value":851},"(config",{"type":40,"tag":352,"props":853,"children":854},{"style":666},[855],{"type":46,"value":680},{"type":40,"tag":352,"props":857,"children":858},{"style":384},[859],{"type":46,"value":860}," \u002F* useFirstChild *\u002F",{"type":40,"tag":352,"props":862,"children":864},{"style":863},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[865],{"type":46,"value":866}," true",{"type":40,"tag":352,"props":868,"children":869},{"style":672},[870],{"type":46,"value":813},{"type":40,"tag":352,"props":872,"children":873},{"style":666},[874],{"type":46,"value":714},{"type":40,"tag":352,"props":876,"children":877},{"style":384},[878],{"type":46,"value":879}," \u002F\u002F true=web, false=react\u002Fvanilla\n",{"type":40,"tag":352,"props":881,"children":883},{"class":354,"line":882},7,[884],{"type":40,"tag":352,"props":885,"children":886},{"style":384},[887],{"type":46,"value":888},"\u002F\u002F Deliver css according to the canonical policy in integration-recipes.md\n",{"type":40,"tag":257,"props":890,"children":892},{"className":640,"code":891,"language":642,"meta":265,"style":265},"\u002F\u002F Runtime (browser bundle \u002F CDN module)\nimport { Interact } from '@wix\u002Finteract\u002Fweb';\n\nconst instance = Interact.create(config); \u002F\u002F wire triggers\n",[893],{"type":40,"tag":118,"props":894,"children":895},{"__ignoreMap":265},[896,904,943,950],{"type":40,"tag":352,"props":897,"children":898},{"class":354,"line":355},[899],{"type":40,"tag":352,"props":900,"children":901},{"style":384},[902],{"type":46,"value":903},"\u002F\u002F Runtime (browser bundle \u002F CDN module)\n",{"type":40,"tag":352,"props":905,"children":906},{"class":354,"line":27},[907,911,915,919,923,927,931,935,939],{"type":40,"tag":352,"props":908,"children":909},{"style":660},[910],{"type":46,"value":663},{"type":40,"tag":352,"props":912,"children":913},{"style":666},[914],{"type":46,"value":669},{"type":40,"tag":352,"props":916,"children":917},{"style":672},[918],{"type":46,"value":675},{"type":40,"tag":352,"props":920,"children":921},{"style":666},[922],{"type":46,"value":690},{"type":40,"tag":352,"props":924,"children":925},{"style":660},[926],{"type":46,"value":695},{"type":40,"tag":352,"props":928,"children":929},{"style":666},[930],{"type":46,"value":700},{"type":40,"tag":352,"props":932,"children":933},{"style":365},[934],{"type":46,"value":532},{"type":40,"tag":352,"props":936,"children":937},{"style":666},[938],{"type":46,"value":709},{"type":40,"tag":352,"props":940,"children":941},{"style":666},[942],{"type":46,"value":760},{"type":40,"tag":352,"props":944,"children":945},{"class":354,"line":390},[946],{"type":40,"tag":352,"props":947,"children":948},{"emptyLinePlaceholder":766},[949],{"type":46,"value":769},{"type":40,"tag":352,"props":951,"children":952},{"class":354,"line":23},[953,957,962,966,970,974,979,984,988],{"type":40,"tag":352,"props":954,"children":955},{"style":829},[956],{"type":46,"value":832},{"type":40,"tag":352,"props":958,"children":959},{"style":672},[960],{"type":46,"value":961}," instance ",{"type":40,"tag":352,"props":963,"children":964},{"style":666},[965],{"type":46,"value":842},{"type":40,"tag":352,"props":967,"children":968},{"style":672},[969],{"type":46,"value":675},{"type":40,"tag":352,"props":971,"children":972},{"style":666},[973],{"type":46,"value":173},{"type":40,"tag":352,"props":975,"children":976},{"style":785},[977],{"type":46,"value":978},"create",{"type":40,"tag":352,"props":980,"children":981},{"style":672},[982],{"type":46,"value":983},"(config)",{"type":40,"tag":352,"props":985,"children":986},{"style":666},[987],{"type":46,"value":714},{"type":40,"tag":352,"props":989,"children":990},{"style":384},[991],{"type":46,"value":992}," \u002F\u002F wire triggers\n",{"type":40,"tag":49,"props":994,"children":995},{},[996,998,1003],{"type":46,"value":997},"For CSS delivery and runtime-only configs, follow the canonical policy in\n",{"type":40,"tag":118,"props":999,"children":1001},{"className":1000},[],[1002],{"type":46,"value":303},{"type":46,"value":173},{"type":40,"tag":49,"props":1005,"children":1006},{},[1007,1009,1015,1017,1023,1025,1031],{"type":46,"value":1008},"(For CDN\u002Fquick-start, ",{"type":40,"tag":118,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":46,"value":1014},"import * as presets",{"type":46,"value":1016}," + ",{"type":40,"tag":118,"props":1018,"children":1020},{"className":1019},[],[1021],{"type":46,"value":1022},"registerEffects(presets)",{"type":46,"value":1024}," is fine at\ngeneration time — selective imports just keep bundled apps lean. See ",{"type":40,"tag":118,"props":1026,"children":1028},{"className":1027},[],[1029],{"type":46,"value":1030},"references\u002Fpresets.md",{"type":46,"value":1032},".)",{"type":40,"tag":49,"props":1034,"children":1035},{},[1036,1038,1043],{"type":46,"value":1037},"Mark up target elements with a ",{"type":40,"tag":55,"props":1039,"children":1040},{},[1041],{"type":46,"value":1042},"key",{"type":46,"value":1044}," that matches the config:",{"type":40,"tag":257,"props":1046,"children":1050},{"className":1047,"code":1048,"language":1049,"meta":265,"style":265},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- web -->\n\u003Cinteract-element data-interact-key=\"hero\">\u003Csection>…\u003C\u002Fsection>\u003C\u002Finteract-element>\n\u003C!-- react -->\n\u003CInteraction tagName=\"section\" interactKey=\"hero\">…\u003C\u002FInteraction>\n\u003C!-- vanilla -->\n\u003Csection data-interact-key=\"hero\">…\u003C\u002Fsection>\n","html",[1051],{"type":40,"tag":118,"props":1052,"children":1053},{"__ignoreMap":265},[1054,1062,1142,1150,1224,1232],{"type":40,"tag":352,"props":1055,"children":1056},{"class":354,"line":355},[1057],{"type":40,"tag":352,"props":1058,"children":1059},{"style":384},[1060],{"type":46,"value":1061},"\u003C!-- web -->\n",{"type":40,"tag":352,"props":1063,"children":1064},{"class":354,"line":27},[1065,1070,1076,1081,1085,1090,1095,1099,1104,1109,1114,1119,1124,1128,1133,1137],{"type":40,"tag":352,"props":1066,"children":1067},{"style":666},[1068],{"type":46,"value":1069},"\u003C",{"type":40,"tag":352,"props":1071,"children":1073},{"style":1072},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1074],{"type":46,"value":1075},"interact-element",{"type":40,"tag":352,"props":1077,"children":1078},{"style":829},[1079],{"type":46,"value":1080}," data-interact-key",{"type":40,"tag":352,"props":1082,"children":1083},{"style":666},[1084],{"type":46,"value":842},{"type":40,"tag":352,"props":1086,"children":1087},{"style":666},[1088],{"type":46,"value":1089},"\"",{"type":40,"tag":352,"props":1091,"children":1092},{"style":365},[1093],{"type":46,"value":1094},"hero",{"type":40,"tag":352,"props":1096,"children":1097},{"style":666},[1098],{"type":46,"value":1089},{"type":40,"tag":352,"props":1100,"children":1101},{"style":666},[1102],{"type":46,"value":1103},">\u003C",{"type":40,"tag":352,"props":1105,"children":1106},{"style":1072},[1107],{"type":46,"value":1108},"section",{"type":40,"tag":352,"props":1110,"children":1111},{"style":666},[1112],{"type":46,"value":1113},">",{"type":40,"tag":352,"props":1115,"children":1116},{"style":672},[1117],{"type":46,"value":1118},"…",{"type":40,"tag":352,"props":1120,"children":1121},{"style":666},[1122],{"type":46,"value":1123},"\u003C\u002F",{"type":40,"tag":352,"props":1125,"children":1126},{"style":1072},[1127],{"type":46,"value":1108},{"type":40,"tag":352,"props":1129,"children":1130},{"style":666},[1131],{"type":46,"value":1132},">\u003C\u002F",{"type":40,"tag":352,"props":1134,"children":1135},{"style":1072},[1136],{"type":46,"value":1075},{"type":40,"tag":352,"props":1138,"children":1139},{"style":666},[1140],{"type":46,"value":1141},">\n",{"type":40,"tag":352,"props":1143,"children":1144},{"class":354,"line":390},[1145],{"type":40,"tag":352,"props":1146,"children":1147},{"style":384},[1148],{"type":46,"value":1149},"\u003C!-- react -->\n",{"type":40,"tag":352,"props":1151,"children":1152},{"class":354,"line":23},[1153,1157,1162,1167,1171,1175,1179,1183,1188,1192,1196,1200,1204,1208,1212,1216,1220],{"type":40,"tag":352,"props":1154,"children":1155},{"style":666},[1156],{"type":46,"value":1069},{"type":40,"tag":352,"props":1158,"children":1159},{"style":1072},[1160],{"type":46,"value":1161},"Interaction",{"type":40,"tag":352,"props":1163,"children":1164},{"style":829},[1165],{"type":46,"value":1166}," tagName",{"type":40,"tag":352,"props":1168,"children":1169},{"style":666},[1170],{"type":46,"value":842},{"type":40,"tag":352,"props":1172,"children":1173},{"style":666},[1174],{"type":46,"value":1089},{"type":40,"tag":352,"props":1176,"children":1177},{"style":365},[1178],{"type":46,"value":1108},{"type":40,"tag":352,"props":1180,"children":1181},{"style":666},[1182],{"type":46,"value":1089},{"type":40,"tag":352,"props":1184,"children":1185},{"style":829},[1186],{"type":46,"value":1187}," interactKey",{"type":40,"tag":352,"props":1189,"children":1190},{"style":666},[1191],{"type":46,"value":842},{"type":40,"tag":352,"props":1193,"children":1194},{"style":666},[1195],{"type":46,"value":1089},{"type":40,"tag":352,"props":1197,"children":1198},{"style":365},[1199],{"type":46,"value":1094},{"type":40,"tag":352,"props":1201,"children":1202},{"style":666},[1203],{"type":46,"value":1089},{"type":40,"tag":352,"props":1205,"children":1206},{"style":666},[1207],{"type":46,"value":1113},{"type":40,"tag":352,"props":1209,"children":1210},{"style":672},[1211],{"type":46,"value":1118},{"type":40,"tag":352,"props":1213,"children":1214},{"style":666},[1215],{"type":46,"value":1123},{"type":40,"tag":352,"props":1217,"children":1218},{"style":1072},[1219],{"type":46,"value":1161},{"type":40,"tag":352,"props":1221,"children":1222},{"style":666},[1223],{"type":46,"value":1141},{"type":40,"tag":352,"props":1225,"children":1226},{"class":354,"line":772},[1227],{"type":40,"tag":352,"props":1228,"children":1229},{"style":384},[1230],{"type":46,"value":1231},"\u003C!-- vanilla -->\n",{"type":40,"tag":352,"props":1233,"children":1234},{"class":354,"line":825},[1235,1239,1243,1247,1251,1255,1259,1263,1267,1271,1275,1279],{"type":40,"tag":352,"props":1236,"children":1237},{"style":666},[1238],{"type":46,"value":1069},{"type":40,"tag":352,"props":1240,"children":1241},{"style":1072},[1242],{"type":46,"value":1108},{"type":40,"tag":352,"props":1244,"children":1245},{"style":829},[1246],{"type":46,"value":1080},{"type":40,"tag":352,"props":1248,"children":1249},{"style":666},[1250],{"type":46,"value":842},{"type":40,"tag":352,"props":1252,"children":1253},{"style":666},[1254],{"type":46,"value":1089},{"type":40,"tag":352,"props":1256,"children":1257},{"style":365},[1258],{"type":46,"value":1094},{"type":40,"tag":352,"props":1260,"children":1261},{"style":666},[1262],{"type":46,"value":1089},{"type":40,"tag":352,"props":1264,"children":1265},{"style":666},[1266],{"type":46,"value":1113},{"type":40,"tag":352,"props":1268,"children":1269},{"style":672},[1270],{"type":46,"value":1118},{"type":40,"tag":352,"props":1272,"children":1273},{"style":666},[1274],{"type":46,"value":1123},{"type":40,"tag":352,"props":1276,"children":1277},{"style":1072},[1278],{"type":46,"value":1108},{"type":40,"tag":352,"props":1280,"children":1281},{"style":666},[1282],{"type":46,"value":1141},{"type":40,"tag":257,"props":1284,"children":1288},{"className":1285,"code":1286,"language":1287,"meta":265,"style":265},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F for vanilla - add the following\nimport { add } from '@wix\u002Finteract';\n\nconst el = document.querySelector('[data-interact-key=\"hero\"]');\nadd(el);\n","js",[1289],{"type":40,"tag":118,"props":1290,"children":1291},{"__ignoreMap":265},[1292,1300,1340,1347,1402],{"type":40,"tag":352,"props":1293,"children":1294},{"class":354,"line":355},[1295],{"type":40,"tag":352,"props":1296,"children":1297},{"style":384},[1298],{"type":46,"value":1299},"\u002F\u002F for vanilla - add the following\n",{"type":40,"tag":352,"props":1301,"children":1302},{"class":354,"line":27},[1303,1307,1311,1316,1320,1324,1328,1332,1336],{"type":40,"tag":352,"props":1304,"children":1305},{"style":660},[1306],{"type":46,"value":663},{"type":40,"tag":352,"props":1308,"children":1309},{"style":666},[1310],{"type":46,"value":669},{"type":40,"tag":352,"props":1312,"children":1313},{"style":672},[1314],{"type":46,"value":1315}," add",{"type":40,"tag":352,"props":1317,"children":1318},{"style":666},[1319],{"type":46,"value":690},{"type":40,"tag":352,"props":1321,"children":1322},{"style":660},[1323],{"type":46,"value":695},{"type":40,"tag":352,"props":1325,"children":1326},{"style":666},[1327],{"type":46,"value":700},{"type":40,"tag":352,"props":1329,"children":1330},{"style":365},[1331],{"type":46,"value":123},{"type":40,"tag":352,"props":1333,"children":1334},{"style":666},[1335],{"type":46,"value":709},{"type":40,"tag":352,"props":1337,"children":1338},{"style":666},[1339],{"type":46,"value":760},{"type":40,"tag":352,"props":1341,"children":1342},{"class":354,"line":390},[1343],{"type":40,"tag":352,"props":1344,"children":1345},{"emptyLinePlaceholder":766},[1346],{"type":46,"value":769},{"type":40,"tag":352,"props":1348,"children":1349},{"class":354,"line":23},[1350,1354,1359,1363,1368,1372,1377,1381,1385,1390,1394,1398],{"type":40,"tag":352,"props":1351,"children":1352},{"style":829},[1353],{"type":46,"value":832},{"type":40,"tag":352,"props":1355,"children":1356},{"style":672},[1357],{"type":46,"value":1358}," el ",{"type":40,"tag":352,"props":1360,"children":1361},{"style":666},[1362],{"type":46,"value":842},{"type":40,"tag":352,"props":1364,"children":1365},{"style":672},[1366],{"type":46,"value":1367}," document",{"type":40,"tag":352,"props":1369,"children":1370},{"style":666},[1371],{"type":46,"value":173},{"type":40,"tag":352,"props":1373,"children":1374},{"style":785},[1375],{"type":46,"value":1376},"querySelector",{"type":40,"tag":352,"props":1378,"children":1379},{"style":672},[1380],{"type":46,"value":793},{"type":40,"tag":352,"props":1382,"children":1383},{"style":666},[1384],{"type":46,"value":709},{"type":40,"tag":352,"props":1386,"children":1387},{"style":365},[1388],{"type":46,"value":1389},"[data-interact-key=\"hero\"]",{"type":40,"tag":352,"props":1391,"children":1392},{"style":666},[1393],{"type":46,"value":709},{"type":40,"tag":352,"props":1395,"children":1396},{"style":672},[1397],{"type":46,"value":813},{"type":40,"tag":352,"props":1399,"children":1400},{"style":666},[1401],{"type":46,"value":760},{"type":40,"tag":352,"props":1403,"children":1404},{"class":354,"line":772},[1405,1410,1415],{"type":40,"tag":352,"props":1406,"children":1407},{"style":785},[1408],{"type":46,"value":1409},"add",{"type":40,"tag":352,"props":1411,"children":1412},{"style":672},[1413],{"type":46,"value":1414},"(el)",{"type":40,"tag":352,"props":1416,"children":1417},{"style":666},[1418],{"type":46,"value":760},{"type":40,"tag":306,"props":1420,"children":1421},{},[],{"type":40,"tag":310,"props":1423,"children":1425},{"id":1424},"step-3-add-edit-interactions",[1426],{"type":46,"value":1427},"Step 3 — Add \u002F edit interactions",{"type":40,"tag":49,"props":1429,"children":1430},{},[1431],{"type":40,"tag":55,"props":1432,"children":1433},{},[1434],{"type":46,"value":1435},"Before designing the config, draw on the example library for inspiration and reference patterns:",{"type":40,"tag":447,"props":1437,"children":1438},{},[1439,1452,1500,1556],{"type":40,"tag":451,"props":1440,"children":1441},{},[1442,1444,1450],{"type":46,"value":1443},"Read ",{"type":40,"tag":118,"props":1445,"children":1447},{"className":1446},[],[1448],{"type":46,"value":1449},"examples\u002Findex.md",{"type":46,"value":1451}," (this file is the table of contents — it lists every demo with its summary and tags).",{"type":40,"tag":451,"props":1453,"children":1454},{},[1455,1457,1463,1464,1470,1471,1477,1478,1484,1485,1491,1493,1499],{"type":46,"value":1456},"Based on the user's request, identify 2–4 demos whose trigger type, layout, motion properties, or overall feel best match what's being built. Match on tags such as ",{"type":40,"tag":118,"props":1458,"children":1460},{"className":1459},[],[1461],{"type":46,"value":1462},"viewProgress",{"type":46,"value":476},{"type":40,"tag":118,"props":1465,"children":1467},{"className":1466},[],[1468],{"type":46,"value":1469},"pointerMove",{"type":46,"value":476},{"type":40,"tag":118,"props":1472,"children":1474},{"className":1473},[],[1475],{"type":46,"value":1476},"sticky",{"type":46,"value":476},{"type":40,"tag":118,"props":1479,"children":1481},{"className":1480},[],[1482],{"type":46,"value":1483},"stagger",{"type":46,"value":476},{"type":40,"tag":118,"props":1486,"children":1488},{"className":1487},[],[1489],{"type":46,"value":1490},"3d",{"type":46,"value":1492},", or ",{"type":40,"tag":118,"props":1494,"children":1496},{"className":1495},[],[1497],{"type":46,"value":1498},"clip-path",{"type":46,"value":173},{"type":40,"tag":451,"props":1501,"children":1502},{},[1503,1505,1511,1513,1519,1520,1526,1527,1533,1534,1540,1541,1547,1549,1555],{"type":46,"value":1504},"Read those demo files from ",{"type":40,"tag":118,"props":1506,"children":1508},{"className":1507},[],[1509],{"type":46,"value":1510},"examples\u002Fexamples\u002F\u003Ccategory>\u002F\u003Cname>.md",{"type":46,"value":1512},". Use the index rather than guessing paths; the categories are ",{"type":40,"tag":118,"props":1514,"children":1516},{"className":1515},[],[1517],{"type":46,"value":1518},"gallery",{"type":46,"value":476},{"type":40,"tag":118,"props":1521,"children":1523},{"className":1522},[],[1524],{"type":46,"value":1525},"carousel",{"type":46,"value":476},{"type":40,"tag":118,"props":1528,"children":1530},{"className":1529},[],[1531],{"type":46,"value":1532},"image-background",{"type":46,"value":476},{"type":40,"tag":118,"props":1535,"children":1537},{"className":1536},[],[1538],{"type":46,"value":1539},"text-animations",{"type":46,"value":476},{"type":40,"tag":118,"props":1542,"children":1544},{"className":1543},[],[1545],{"type":46,"value":1546},"text-image",{"type":46,"value":1548},", and ",{"type":40,"tag":118,"props":1550,"children":1552},{"className":1551},[],[1553],{"type":46,"value":1554},"ui-components",{"type":46,"value":173},{"type":40,"tag":451,"props":1557,"children":1558},{},[1559],{"type":46,"value":1560},"Treat each demo as a cohesive unit — the interact config, HTML structure, and CSS layout are designed to work together. Adapt all three parts to the user's context rather than lifting any single piece in isolation.",{"type":40,"tag":49,"props":1562,"children":1563},{},[1564],{"type":46,"value":1565},"This step is especially useful for: picking the right trigger\u002Feffect combination, handling complex layered compositions, and producing configs that feel polished rather than generic.",{"type":40,"tag":306,"props":1567,"children":1568},{},[],{"type":40,"tag":49,"props":1570,"children":1571},{},[1572,1574,1579],{"type":46,"value":1573},"This is where most work happens. An ",{"type":40,"tag":118,"props":1575,"children":1577},{"className":1576},[],[1578],{"type":46,"value":141},{"type":46,"value":1580}," is:",{"type":40,"tag":257,"props":1582,"children":1584},{"className":640,"code":1583,"language":642,"meta":265,"style":265},"{\n  interactions: [            \u002F\u002F REQUIRED — each binds one source+trigger to effect(s)\n    { key, trigger, params?, effects?, sequences?, conditions?, selector?, listContainer?, listItemSelector? }\n  ],\n  effects?:   { [effectId]: Effect },        \u002F\u002F reusable effects, referenced by effectId\n  sequences?: { [sequenceId]: SequenceConfig },\n  conditions?:{ [conditionId]: Condition },  \u002F\u002F media\u002Fselector gates\n}\n",[1585],{"type":40,"tag":118,"props":1586,"children":1587},{"__ignoreMap":265},[1588,1596,1619,1709,1722,1774,1817,1861],{"type":40,"tag":352,"props":1589,"children":1590},{"class":354,"line":355},[1591],{"type":40,"tag":352,"props":1592,"children":1593},{"style":666},[1594],{"type":46,"value":1595},"{\n",{"type":40,"tag":352,"props":1597,"children":1598},{"class":354,"line":27},[1599,1604,1609,1614],{"type":40,"tag":352,"props":1600,"children":1601},{"style":359},[1602],{"type":46,"value":1603},"  interactions",{"type":40,"tag":352,"props":1605,"children":1606},{"style":666},[1607],{"type":46,"value":1608},":",{"type":40,"tag":352,"props":1610,"children":1611},{"style":1072},[1612],{"type":46,"value":1613}," [            ",{"type":40,"tag":352,"props":1615,"children":1616},{"style":384},[1617],{"type":46,"value":1618},"\u002F\u002F REQUIRED — each binds one source+trigger to effect(s)\n",{"type":40,"tag":352,"props":1620,"children":1621},{"class":354,"line":390},[1622,1627,1632,1636,1641,1645,1650,1654,1659,1663,1668,1672,1677,1681,1686,1690,1695,1699,1704],{"type":40,"tag":352,"props":1623,"children":1624},{"style":666},[1625],{"type":46,"value":1626},"    {",{"type":40,"tag":352,"props":1628,"children":1629},{"style":672},[1630],{"type":46,"value":1631}," key",{"type":40,"tag":352,"props":1633,"children":1634},{"style":666},[1635],{"type":46,"value":680},{"type":40,"tag":352,"props":1637,"children":1638},{"style":672},[1639],{"type":46,"value":1640}," trigger",{"type":40,"tag":352,"props":1642,"children":1643},{"style":666},[1644],{"type":46,"value":680},{"type":40,"tag":352,"props":1646,"children":1647},{"style":1072},[1648],{"type":46,"value":1649}," params?",{"type":40,"tag":352,"props":1651,"children":1652},{"style":666},[1653],{"type":46,"value":680},{"type":40,"tag":352,"props":1655,"children":1656},{"style":1072},[1657],{"type":46,"value":1658}," effects?",{"type":40,"tag":352,"props":1660,"children":1661},{"style":666},[1662],{"type":46,"value":680},{"type":40,"tag":352,"props":1664,"children":1665},{"style":1072},[1666],{"type":46,"value":1667}," sequences?",{"type":40,"tag":352,"props":1669,"children":1670},{"style":666},[1671],{"type":46,"value":680},{"type":40,"tag":352,"props":1673,"children":1674},{"style":1072},[1675],{"type":46,"value":1676}," conditions?",{"type":40,"tag":352,"props":1678,"children":1679},{"style":666},[1680],{"type":46,"value":680},{"type":40,"tag":352,"props":1682,"children":1683},{"style":1072},[1684],{"type":46,"value":1685}," selector?",{"type":40,"tag":352,"props":1687,"children":1688},{"style":666},[1689],{"type":46,"value":680},{"type":40,"tag":352,"props":1691,"children":1692},{"style":1072},[1693],{"type":46,"value":1694}," listContainer?",{"type":40,"tag":352,"props":1696,"children":1697},{"style":666},[1698],{"type":46,"value":680},{"type":40,"tag":352,"props":1700,"children":1701},{"style":1072},[1702],{"type":46,"value":1703}," listItemSelector? ",{"type":40,"tag":352,"props":1705,"children":1706},{"style":666},[1707],{"type":46,"value":1708},"}\n",{"type":40,"tag":352,"props":1710,"children":1711},{"class":354,"line":23},[1712,1717],{"type":40,"tag":352,"props":1713,"children":1714},{"style":1072},[1715],{"type":46,"value":1716},"  ]",{"type":40,"tag":352,"props":1718,"children":1719},{"style":666},[1720],{"type":46,"value":1721},",\n",{"type":40,"tag":352,"props":1723,"children":1724},{"class":354,"line":772},[1725,1730,1735,1740,1745,1750,1755,1759,1764,1769],{"type":40,"tag":352,"props":1726,"children":1727},{"style":672},[1728],{"type":46,"value":1729},"  effects",{"type":40,"tag":352,"props":1731,"children":1732},{"style":666},[1733],{"type":46,"value":1734},"?:",{"type":40,"tag":352,"props":1736,"children":1737},{"style":666},[1738],{"type":46,"value":1739},"   {",{"type":40,"tag":352,"props":1741,"children":1742},{"style":1072},[1743],{"type":46,"value":1744}," [",{"type":40,"tag":352,"props":1746,"children":1747},{"style":672},[1748],{"type":46,"value":1749},"effectId",{"type":40,"tag":352,"props":1751,"children":1752},{"style":1072},[1753],{"type":46,"value":1754},"]",{"type":40,"tag":352,"props":1756,"children":1757},{"style":666},[1758],{"type":46,"value":1608},{"type":40,"tag":352,"props":1760,"children":1761},{"style":672},[1762],{"type":46,"value":1763}," Effect",{"type":40,"tag":352,"props":1765,"children":1766},{"style":666},[1767],{"type":46,"value":1768}," },",{"type":40,"tag":352,"props":1770,"children":1771},{"style":384},[1772],{"type":46,"value":1773},"        \u002F\u002F reusable effects, referenced by effectId\n",{"type":40,"tag":352,"props":1775,"children":1776},{"class":354,"line":825},[1777,1782,1786,1790,1794,1799,1803,1807,1812],{"type":40,"tag":352,"props":1778,"children":1779},{"style":672},[1780],{"type":46,"value":1781},"  sequences",{"type":40,"tag":352,"props":1783,"children":1784},{"style":666},[1785],{"type":46,"value":1734},{"type":40,"tag":352,"props":1787,"children":1788},{"style":666},[1789],{"type":46,"value":669},{"type":40,"tag":352,"props":1791,"children":1792},{"style":1072},[1793],{"type":46,"value":1744},{"type":40,"tag":352,"props":1795,"children":1796},{"style":672},[1797],{"type":46,"value":1798},"sequenceId",{"type":40,"tag":352,"props":1800,"children":1801},{"style":1072},[1802],{"type":46,"value":1754},{"type":40,"tag":352,"props":1804,"children":1805},{"style":666},[1806],{"type":46,"value":1608},{"type":40,"tag":352,"props":1808,"children":1809},{"style":672},[1810],{"type":46,"value":1811}," SequenceConfig",{"type":40,"tag":352,"props":1813,"children":1814},{"style":666},[1815],{"type":46,"value":1816}," },\n",{"type":40,"tag":352,"props":1818,"children":1819},{"class":354,"line":882},[1820,1825,1830,1834,1839,1843,1847,1852,1856],{"type":40,"tag":352,"props":1821,"children":1822},{"style":672},[1823],{"type":46,"value":1824},"  conditions",{"type":40,"tag":352,"props":1826,"children":1827},{"style":666},[1828],{"type":46,"value":1829},"?:{",{"type":40,"tag":352,"props":1831,"children":1832},{"style":1072},[1833],{"type":46,"value":1744},{"type":40,"tag":352,"props":1835,"children":1836},{"style":672},[1837],{"type":46,"value":1838},"conditionId",{"type":40,"tag":352,"props":1840,"children":1841},{"style":1072},[1842],{"type":46,"value":1754},{"type":40,"tag":352,"props":1844,"children":1845},{"style":666},[1846],{"type":46,"value":1608},{"type":40,"tag":352,"props":1848,"children":1849},{"style":672},[1850],{"type":46,"value":1851}," Condition",{"type":40,"tag":352,"props":1853,"children":1854},{"style":666},[1855],{"type":46,"value":1768},{"type":40,"tag":352,"props":1857,"children":1858},{"style":384},[1859],{"type":46,"value":1860},"  \u002F\u002F media\u002Fselector gates\n",{"type":40,"tag":352,"props":1862,"children":1864},{"class":354,"line":1863},8,[1865],{"type":40,"tag":352,"props":1866,"children":1867},{"style":666},[1868],{"type":46,"value":1708},{"type":40,"tag":49,"props":1870,"children":1871},{},[1872,1874,1878],{"type":46,"value":1873},"To ",{"type":40,"tag":55,"props":1875,"children":1876},{},[1877],{"type":46,"value":1409},{"type":46,"value":1879}," an interaction:",{"type":40,"tag":447,"props":1881,"children":1882},{},[1883,1895,1937,2001],{"type":40,"tag":451,"props":1884,"children":1885},{},[1886,1888,1893],{"type":46,"value":1887},"Choose the ",{"type":40,"tag":55,"props":1889,"children":1890},{},[1891],{"type":46,"value":1892},"trigger",{"type":46,"value":1894}," (see decision table below).",{"type":40,"tag":451,"props":1896,"children":1897},{},[1898,1899,1904,1906,1912,1914,1919,1921,1927,1929,1935],{"type":46,"value":1887},{"type":40,"tag":55,"props":1900,"children":1901},{},[1902],{"type":46,"value":1903},"effect",{"type":46,"value":1905},": prefer a ",{"type":40,"tag":118,"props":1907,"children":1909},{"className":1908},[],[1910],{"type":46,"value":1911},"namedEffect",{"type":46,"value":1913}," preset (browse ",{"type":40,"tag":118,"props":1915,"children":1917},{"className":1916},[],[1918],{"type":46,"value":1030},{"type":46,"value":1920},"); fall back to inline ",{"type":40,"tag":118,"props":1922,"children":1924},{"className":1923},[],[1925],{"type":46,"value":1926},"keyframeEffect",{"type":46,"value":1928}," for custom keyframes, or ",{"type":40,"tag":118,"props":1930,"children":1932},{"className":1931},[],[1933],{"type":46,"value":1934},"customEffect",{"type":46,"value":1936}," for non-CSS (SVG\u002Fcanvas\u002Ftext).",{"type":40,"tag":451,"props":1938,"children":1939},{},[1940,1942,1947,1949,1955,1957,1963,1965,1971,1972,1978,1980,1985,1987,1992,1994,1999],{"type":46,"value":1941},"Set the ",{"type":40,"tag":55,"props":1943,"children":1944},{},[1945],{"type":46,"value":1946},"playback field",{"type":46,"value":1948}," the trigger needs: ",{"type":40,"tag":118,"props":1950,"children":1952},{"className":1951},[],[1953],{"type":46,"value":1954},"triggerType",{"type":46,"value":1956}," for time effects on hover\u002Fclick\u002FviewEnter; ",{"type":40,"tag":118,"props":1958,"children":1960},{"className":1959},[],[1961],{"type":46,"value":1962},"stateAction",{"type":46,"value":1964}," for CSS-state (transition) effects; ",{"type":40,"tag":118,"props":1966,"children":1968},{"className":1967},[],[1969],{"type":46,"value":1970},"rangeStart",{"type":46,"value":484},{"type":40,"tag":118,"props":1973,"children":1975},{"className":1974},[],[1976],{"type":46,"value":1977},"rangeEnd",{"type":46,"value":1979}," for ",{"type":40,"tag":118,"props":1981,"children":1983},{"className":1982},[],[1984],{"type":46,"value":1462},{"type":46,"value":1986},". Never set both ",{"type":40,"tag":118,"props":1988,"children":1990},{"className":1989},[],[1991],{"type":46,"value":1954},{"type":46,"value":1993}," and ",{"type":40,"tag":118,"props":1995,"children":1997},{"className":1996},[],[1998],{"type":46,"value":1962},{"type":46,"value":2000}," on one effect.",{"type":40,"tag":451,"props":2002,"children":2003},{},[2004,2006,2011,2013,2018],{"type":46,"value":2005},"Bind it: give the target element the matching ",{"type":40,"tag":118,"props":2007,"children":2009},{"className":2008},[],[2010],{"type":46,"value":1042},{"type":46,"value":2012}," in the markup. If the thing\nyou're animating is a stack of layers that should move together (hero\nbackground + overlay + content, card image + text), key the ",{"type":40,"tag":55,"props":2014,"children":2015},{},[2016],{"type":46,"value":2017},"one container",{"type":46,"value":2019},"\nthat wraps them and put a single effect on it — don't repeat the effect on each\nlayer (invariant 11).",{"type":40,"tag":49,"props":2021,"children":2022},{},[2023,2024,2029,2031,2036,2037,2042,2044,2049,2051,2057,2059,2064,2066,2071,2073,2079],{"type":46,"value":1873},{"type":40,"tag":55,"props":2025,"children":2026},{},[2027],{"type":46,"value":2028},"edit",{"type":46,"value":2030}," an existing config: read the current config first, find the\ninteraction\u002Feffect by its ",{"type":40,"tag":118,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":46,"value":1042},{"type":46,"value":484},{"type":40,"tag":118,"props":2038,"children":2040},{"className":2039},[],[2041],{"type":46,"value":1749},{"type":46,"value":2043},", and change ",{"type":40,"tag":63,"props":2045,"children":2046},{},[2047],{"type":46,"value":2048},"only",{"type":46,"value":2050}," what's asked.\nPreserve the rest (other interactions, ids, markup keys). After editing, re-run\nvalidation (Step 4) — a changed ",{"type":40,"tag":118,"props":2052,"children":2054},{"className":2053},[],[2055],{"type":46,"value":2056},"namedEffect.type",{"type":46,"value":2058}," or a new\n",{"type":40,"tag":118,"props":2060,"children":2062},{"className":2061},[],[2063],{"type":46,"value":1462},{"type":46,"value":2065}," effect can silently break if you skip it. If the effect catalog or\ntrigger semantics are involved, open ",{"type":40,"tag":118,"props":2067,"children":2069},{"className":2068},[],[2070],{"type":46,"value":1030},{"type":46,"value":2072}," \u002F ",{"type":40,"tag":118,"props":2074,"children":2076},{"className":2075},[],[2077],{"type":46,"value":2078},"references\u002Ftriggers.md",{"type":46,"value":173},{"type":40,"tag":49,"props":2081,"children":2082},{},[2083,2085,2090,2092,2097,2099,2105],{"type":46,"value":2084},"For multi-target staggering (cards, lists, nav items), use ",{"type":40,"tag":55,"props":2086,"children":2087},{},[2088],{"type":46,"value":2089},"sequences",{"type":46,"value":2091},", not\nmanual per-item delays — see ",{"type":40,"tag":118,"props":2093,"children":2095},{"className":2094},[],[2096],{"type":46,"value":2078},{"type":46,"value":2098}," and the sequences section of\n",{"type":40,"tag":118,"props":2100,"children":2102},{"className":2101},[],[2103],{"type":46,"value":2104},"references\u002Fconfig-schema.md",{"type":46,"value":173},{"type":40,"tag":306,"props":2107,"children":2108},{},[],{"type":40,"tag":310,"props":2110,"children":2112},{"id":2111},"step-4-validate-the-config",[2113],{"type":46,"value":2114},"Step 4 — Validate the config",{"type":40,"tag":49,"props":2116,"children":2117},{},[2118,2120,2125,2127,2133,2134,2140,2142,2154],{"type":46,"value":2119},"No ",{"type":40,"tag":118,"props":2121,"children":2123},{"className":2122},[],[2124],{"type":46,"value":141},{"type":46,"value":2126}," reaches ",{"type":40,"tag":118,"props":2128,"children":2130},{"className":2129},[],[2131],{"type":46,"value":2132},"generate()",{"type":46,"value":2072},{"type":40,"tag":118,"props":2135,"children":2137},{"className":2136},[],[2138],{"type":46,"value":2139},"Interact.create()",{"type":46,"value":2141}," unvalidated, and\n",{"type":40,"tag":55,"props":2143,"children":2144},{},[2145,2147,2152],{"type":46,"value":2146},"no ",{"type":40,"tag":118,"props":2148,"children":2150},{"className":2149},[],[2151],{"type":46,"value":219},{"type":46,"value":2153}," reference ships in the code you deliver",{"type":46,"value":2155}," — on any\nentry point, CDN included. How you run validation depends on whether you can\nconstruct the config statically:",{"type":40,"tag":2157,"props":2158,"children":2159},"ul",{},[2160,2184,2252],{"type":40,"tag":451,"props":2161,"children":2162},{},[2163,2168,2170,2175,2177,2182],{"type":40,"tag":55,"props":2164,"children":2165},{},[2166],{"type":46,"value":2167},"Static config",{"type":46,"value":2169}," (you authored a literal you can read in full): validate ",{"type":40,"tag":55,"props":2171,"children":2172},{},[2173],{"type":46,"value":2174},"before\nemit",{"type":46,"value":2176}," in a scratch script — never add validator imports to user files. See\n",{"type":40,"tag":118,"props":2178,"children":2180},{"className":2179},[],[2181],{"type":46,"value":242},{"type":46,"value":2183}," for per-environment run mechanics.",{"type":40,"tag":451,"props":2185,"children":2186},{},[2187,2192,2194,2200,2202,2207,2208,2214,2216,2222,2224,2229,2231,2237,2239,2244,2246,2251],{"type":40,"tag":55,"props":2188,"children":2189},{},[2190],{"type":46,"value":2191},"Dynamic config",{"type":46,"value":2193}," (built at runtime from data\u002Fprops\u002Ffetch\u002Floops — you cannot\nconstruct it by reading): temporarily inject ",{"type":40,"tag":118,"props":2195,"children":2197},{"className":2196},[],[2198],{"type":46,"value":2199},"assertValidInteractConfig(config)",{"type":46,"value":2201},"\nimmediately before ",{"type":40,"tag":118,"props":2203,"children":2205},{"className":2204},[],[2206],{"type":46,"value":2132},{"type":46,"value":484},{"type":40,"tag":118,"props":2209,"children":2211},{"className":2210},[],[2212],{"type":46,"value":2213},"create()",{"type":46,"value":2215},", run so that code path executes, fix\nevery ",{"type":40,"tag":118,"props":2217,"children":2219},{"className":2218},[],[2220],{"type":46,"value":2221},"severity: 'error'",{"type":46,"value":2223},", then ",{"type":40,"tag":55,"props":2225,"children":2226},{},[2227],{"type":46,"value":2228},"remove",{"type":46,"value":2230}," the call, import, any ",{"type":40,"tag":118,"props":2232,"children":2234},{"className":2233},[],[2235],{"type":46,"value":2236},"esm.sh",{"type":46,"value":2238}," import,\nand any temp devDep. Prefer a dev-only validation script when the config builder\nmodule is importable in isolation (no removal step). Full loop in\n",{"type":40,"tag":118,"props":2240,"children":2242},{"className":2241},[],[2243],{"type":46,"value":242},{"type":46,"value":2245},". For static site output, follow the canonical CSS\ngeneration policy in ",{"type":40,"tag":118,"props":2247,"children":2249},{"className":2248},[],[2250],{"type":46,"value":303},{"type":46,"value":173},{"type":40,"tag":451,"props":2253,"children":2254},{},[2255,2260,2262,2268],{"type":40,"tag":55,"props":2256,"children":2257},{},[2258],{"type":46,"value":2259},"Permanent guard (opt-in, separate):",{"type":46,"value":2261}," leaving ",{"type":40,"tag":118,"props":2263,"children":2265},{"className":2264},[],[2266],{"type":46,"value":2267},"assertValidInteractConfig",{"type":46,"value":2269}," in\nshipped code as a devDependency CI gate is only when scaffolding a new project or\nthe user explicitly asks — do not conflate with the temporary injection above.",{"type":40,"tag":49,"props":2271,"children":2272},{},[2273,2275,2280,2282,2288],{"type":46,"value":2274},"Fix every issue with ",{"type":40,"tag":118,"props":2276,"children":2278},{"className":2277},[],[2279],{"type":46,"value":2221},{"type":46,"value":2281}," before proceeding; prefer fixing warnings\ntoo. ",{"type":40,"tag":118,"props":2283,"children":2285},{"className":2284},[],[2286],{"type":46,"value":2287},"valid: false",{"type":46,"value":2289}," blocks emit.",{"type":40,"tag":49,"props":2291,"children":2292},{},[2293,2298],{"type":40,"tag":55,"props":2294,"children":2295},{},[2296],{"type":46,"value":2297},"Before declaring done",{"type":46,"value":2299},", grep the files you're shipping:",{"type":40,"tag":257,"props":2301,"children":2303},{"className":344,"code":2302,"language":346,"meta":265,"style":265},"grep -REn 'interact-validate|validateInteractConfig|assertValidInteractConfig|InteractValidationError' \u003Cshipped files>\n# expect: no matches (unless the user asked for a permanent CI guard)\n",[2304],{"type":40,"tag":118,"props":2305,"children":2306},{"__ignoreMap":265},[2307,2357],{"type":40,"tag":352,"props":2308,"children":2309},{"class":354,"line":355},[2310,2315,2320,2324,2329,2333,2338,2343,2348,2353],{"type":40,"tag":352,"props":2311,"children":2312},{"style":359},[2313],{"type":46,"value":2314},"grep",{"type":40,"tag":352,"props":2316,"children":2317},{"style":365},[2318],{"type":46,"value":2319}," -REn",{"type":40,"tag":352,"props":2321,"children":2322},{"style":666},[2323],{"type":46,"value":700},{"type":40,"tag":352,"props":2325,"children":2326},{"style":365},[2327],{"type":46,"value":2328},"interact-validate|validateInteractConfig|assertValidInteractConfig|InteractValidationError",{"type":40,"tag":352,"props":2330,"children":2331},{"style":666},[2332],{"type":46,"value":709},{"type":40,"tag":352,"props":2334,"children":2335},{"style":666},[2336],{"type":46,"value":2337}," \u003C",{"type":40,"tag":352,"props":2339,"children":2340},{"style":365},[2341],{"type":46,"value":2342},"shipped",{"type":40,"tag":352,"props":2344,"children":2345},{"style":365},[2346],{"type":46,"value":2347}," file",{"type":40,"tag":352,"props":2349,"children":2350},{"style":672},[2351],{"type":46,"value":2352},"s",{"type":40,"tag":352,"props":2354,"children":2355},{"style":666},[2356],{"type":46,"value":1141},{"type":40,"tag":352,"props":2358,"children":2359},{"class":354,"line":27},[2360],{"type":40,"tag":352,"props":2361,"children":2362},{"style":384},[2363],{"type":46,"value":2364},"# expect: no matches (unless the user asked for a permanent CI guard)\n",{"type":40,"tag":49,"props":2366,"children":2367},{},[2368],{"type":46,"value":2369},"Then run the semantic checklist below.",{"type":40,"tag":306,"props":2371,"children":2372},{},[],{"type":40,"tag":71,"props":2374,"children":2376},{"id":2375},"trigger-use-case-quick-reference",[2377],{"type":46,"value":2378},"Trigger → use-case quick reference",{"type":40,"tag":78,"props":2380,"children":2381},{},[2382,2403],{"type":40,"tag":82,"props":2383,"children":2384},{},[2385],{"type":40,"tag":86,"props":2386,"children":2387},{},[2388,2393,2398],{"type":40,"tag":90,"props":2389,"children":2390},{"align":92},[2391],{"type":46,"value":2392},"Trigger",{"type":40,"tag":90,"props":2394,"children":2395},{"align":92},[2396],{"type":46,"value":2397},"Use for",{"type":40,"tag":90,"props":2399,"children":2400},{"align":92},[2401],{"type":46,"value":2402},"Effect type & key field",{"type":40,"tag":107,"props":2404,"children":2405},{},[2406,2442,2474,2529,2581,2614],{"type":40,"tag":86,"props":2407,"children":2408},{},[2409,2418,2423],{"type":40,"tag":114,"props":2410,"children":2411},{"align":92},[2412],{"type":40,"tag":118,"props":2413,"children":2415},{"className":2414},[],[2416],{"type":46,"value":2417},"viewEnter",{"type":40,"tag":114,"props":2419,"children":2420},{"align":92},[2421],{"type":46,"value":2422},"Entrance animations when an element scrolls into view",{"type":40,"tag":114,"props":2424,"children":2425},{"align":92},[2426,2428,2433,2435,2441],{"type":46,"value":2427},"Time effect; ",{"type":40,"tag":118,"props":2429,"children":2431},{"className":2430},[],[2432],{"type":46,"value":1954},{"type":46,"value":2434}," (default ",{"type":40,"tag":118,"props":2436,"children":2438},{"className":2437},[],[2439],{"type":46,"value":2440},"'once'",{"type":46,"value":813},{"type":40,"tag":86,"props":2443,"children":2444},{},[2445,2453,2458],{"type":40,"tag":114,"props":2446,"children":2447},{"align":92},[2448],{"type":40,"tag":118,"props":2449,"children":2451},{"className":2450},[],[2452],{"type":46,"value":1462},{"type":40,"tag":114,"props":2454,"children":2455},{"align":92},[2456],{"type":46,"value":2457},"Scroll-driven (parallax, reveal, scrub tied to scroll position)",{"type":40,"tag":114,"props":2459,"children":2460},{"align":92},[2461,2463,2468,2469],{"type":46,"value":2462},"Scrub effect; ",{"type":40,"tag":118,"props":2464,"children":2466},{"className":2465},[],[2467],{"type":46,"value":1970},{"type":46,"value":484},{"type":40,"tag":118,"props":2470,"children":2472},{"className":2471},[],[2473],{"type":46,"value":1977},{"type":40,"tag":86,"props":2475,"children":2476},{},[2477,2493,2505],{"type":40,"tag":114,"props":2478,"children":2479},{"align":92},[2480,2486,2487],{"type":40,"tag":118,"props":2481,"children":2483},{"className":2482},[],[2484],{"type":46,"value":2485},"hover",{"type":46,"value":2072},{"type":40,"tag":118,"props":2488,"children":2490},{"className":2489},[],[2491],{"type":46,"value":2492},"interest",{"type":40,"tag":114,"props":2494,"children":2495},{"align":92},[2496,2498,2503],{"type":46,"value":2497},"Hover effects (",{"type":40,"tag":118,"props":2499,"children":2501},{"className":2500},[],[2502],{"type":46,"value":2492},{"type":46,"value":2504}," = hover+focus, accessible)",{"type":40,"tag":114,"props":2506,"children":2507},{"align":92},[2508,2510,2515,2517,2521,2523,2528],{"type":46,"value":2509},"Time effect (",{"type":40,"tag":118,"props":2511,"children":2513},{"className":2512},[],[2514],{"type":46,"value":1954},{"type":46,"value":2516},") ",{"type":40,"tag":55,"props":2518,"children":2519},{},[2520],{"type":46,"value":586},{"type":46,"value":2522}," State effect (",{"type":40,"tag":118,"props":2524,"children":2526},{"className":2525},[],[2527],{"type":46,"value":1962},{"type":46,"value":813},{"type":40,"tag":86,"props":2530,"children":2531},{},[2532,2548,2560],{"type":40,"tag":114,"props":2533,"children":2534},{"align":92},[2535,2541,2542],{"type":40,"tag":118,"props":2536,"children":2538},{"className":2537},[],[2539],{"type":46,"value":2540},"click",{"type":46,"value":2072},{"type":40,"tag":118,"props":2543,"children":2545},{"className":2544},[],[2546],{"type":46,"value":2547},"activate",{"type":40,"tag":114,"props":2549,"children":2550},{"align":92},[2551,2553,2558],{"type":46,"value":2552},"Click toggles (",{"type":40,"tag":118,"props":2554,"children":2556},{"className":2555},[],[2557],{"type":46,"value":2547},{"type":46,"value":2559}," = click+keyboard, accessible)",{"type":40,"tag":114,"props":2561,"children":2562},{"align":92},[2563,2564,2569,2570,2574,2575,2580],{"type":46,"value":2509},{"type":40,"tag":118,"props":2565,"children":2567},{"className":2566},[],[2568],{"type":46,"value":1954},{"type":46,"value":2516},{"type":40,"tag":55,"props":2571,"children":2572},{},[2573],{"type":46,"value":586},{"type":46,"value":2522},{"type":40,"tag":118,"props":2576,"children":2578},{"className":2577},[],[2579],{"type":46,"value":1962},{"type":46,"value":813},{"type":40,"tag":86,"props":2582,"children":2583},{},[2584,2592,2597],{"type":40,"tag":114,"props":2585,"children":2586},{"align":92},[2587],{"type":40,"tag":118,"props":2588,"children":2590},{"className":2589},[],[2591],{"type":46,"value":1469},{"type":40,"tag":114,"props":2593,"children":2594},{"align":92},[2595],{"type":46,"value":2596},"Cursor-following \u002F tilt \u002F parallax-on-mouse",{"type":40,"tag":114,"props":2598,"children":2599},{"align":92},[2600,2601,2607,2608],{"type":46,"value":2462},{"type":40,"tag":118,"props":2602,"children":2604},{"className":2603},[],[2605],{"type":46,"value":2606},"params.hitArea",{"type":46,"value":476},{"type":40,"tag":118,"props":2609,"children":2611},{"className":2610},[],[2612],{"type":46,"value":2613},"params.axis",{"type":40,"tag":86,"props":2615,"children":2616},{},[2617,2626,2631],{"type":40,"tag":114,"props":2618,"children":2619},{"align":92},[2620],{"type":40,"tag":118,"props":2621,"children":2623},{"className":2622},[],[2624],{"type":46,"value":2625},"animationEnd",{"type":40,"tag":114,"props":2627,"children":2628},{"align":92},[2629],{"type":46,"value":2630},"Chain one effect after another finishes",{"type":40,"tag":114,"props":2632,"children":2633},{"align":92},[2634,2640],{"type":40,"tag":118,"props":2635,"children":2637},{"className":2636},[],[2638],{"type":46,"value":2639},"params.effectId",{"type":46,"value":2641}," of the preceding effect",{"type":40,"tag":49,"props":2643,"children":2644},{},[2645,2647,2655,2657,2665,2667,2675],{"type":46,"value":2646},"Per-trigger deep rules and gotchas → ",{"type":40,"tag":55,"props":2648,"children":2649},{},[2650],{"type":40,"tag":118,"props":2651,"children":2653},{"className":2652},[],[2654],{"type":46,"value":2078},{"type":46,"value":2656},". Effect catalog (which preset for which look) → ",{"type":40,"tag":55,"props":2658,"children":2659},{},[2660],{"type":40,"tag":118,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":46,"value":1030},{"type":46,"value":2666},". Full\nfield-by-field schema for every config object → ",{"type":40,"tag":55,"props":2668,"children":2669},{},[2670],{"type":40,"tag":118,"props":2671,"children":2673},{"className":2672},[],[2674],{"type":46,"value":2104},{"type":46,"value":173},{"type":40,"tag":306,"props":2677,"children":2678},{},[],{"type":40,"tag":71,"props":2680,"children":2682},{"id":2681},"critical-invariants-get-these-wrong-and-output-silently-breaks",[2683],{"type":46,"value":2684},"Critical invariants — get these wrong and output silently breaks",{"type":40,"tag":49,"props":2686,"children":2687},{},[2688],{"type":46,"value":2689},"These are the failure modes that don't throw — the page just renders wrong or the\nanimation no-ops. Apply them every time, even if you don't open a reference file.",{"type":40,"tag":447,"props":2691,"children":2692},{},[2693,2743,2801,2875,2921,2972,3078,3137,3201,3270,3387],{"type":40,"tag":451,"props":2694,"children":2695},{},[2696,2719,2721,2726,2728,2734,2736,2741],{"type":40,"tag":55,"props":2697,"children":2698},{},[2699,2705,2707,2712,2713,2718],{"type":40,"tag":118,"props":2700,"children":2702},{"className":2701},[],[2703],{"type":46,"value":2704},"registerEffects()",{"type":46,"value":2706}," runs BEFORE ",{"type":40,"tag":118,"props":2708,"children":2710},{"className":2709},[],[2711],{"type":46,"value":2132},{"type":46,"value":1993},{"type":40,"tag":118,"props":2714,"children":2716},{"className":2715},[],[2717],{"type":46,"value":2139},{"type":46,"value":173},{"type":46,"value":2720}," An\nunregistered ",{"type":40,"tag":118,"props":2722,"children":2724},{"className":2723},[],[2725],{"type":46,"value":2056},{"type":46,"value":2727}," doesn't error — it logs a console warning and\nthe animation never runs. Register the presets you use up front — prefer a\nselective ",{"type":40,"tag":118,"props":2729,"children":2731},{"className":2730},[],[2732],{"type":46,"value":2733},"import { FadeIn, … }",{"type":46,"value":2735}," (tree-shakeable) over ",{"type":40,"tag":118,"props":2737,"children":2739},{"className":2738},[],[2740],{"type":46,"value":1014},{"type":46,"value":2742}," in\nbundled apps.",{"type":40,"tag":451,"props":2744,"children":2745},{},[2746,2757,2759,2765,2767,2772,2774,2779,2781,2787,2788,2793,2794,2799],{"type":40,"tag":55,"props":2747,"children":2748},{},[2749,2755],{"type":40,"tag":118,"props":2750,"children":2752},{"className":2751},[],[2753],{"type":46,"value":2754},"generate(config, useFirstChild)",{"type":46,"value":2756}," parity",{"type":46,"value":2758}," — pass ",{"type":40,"tag":118,"props":2760,"children":2762},{"className":2761},[],[2763],{"type":46,"value":2764},"true",{"type":46,"value":2766}," for the ",{"type":40,"tag":55,"props":2768,"children":2769},{},[2770],{"type":46,"value":2771},"web",{"type":46,"value":2773},"\n(",{"type":40,"tag":118,"props":2775,"children":2777},{"className":2776},[],[2778],{"type":46,"value":539},{"type":46,"value":2780},") entry point, ",{"type":40,"tag":118,"props":2782,"children":2784},{"className":2783},[],[2785],{"type":46,"value":2786},"false",{"type":46,"value":1979},{"type":40,"tag":55,"props":2789,"children":2790},{},[2791],{"type":46,"value":2792},"vanilla",{"type":46,"value":1993},{"type":40,"tag":55,"props":2795,"children":2796},{},[2797],{"type":46,"value":2798},"React",{"type":46,"value":2800},".\nBackwards = the FOUC-prevention selectors target the wrong node and break.",{"type":40,"tag":451,"props":2802,"children":2803},{},[2804,2809,2811,2816,2818,2823,2825,2830,2831,2837,2839,2844,2846,2852,2854,2859,2860,2865,2867,2873],{"type":40,"tag":55,"props":2805,"children":2806},{},[2807],{"type":46,"value":2808},"FOUC prevention.",{"type":46,"value":2810}," Follow the canonical CSS generation policy in\n",{"type":40,"tag":118,"props":2812,"children":2814},{"className":2813},[],[2815],{"type":46,"value":303},{"type":46,"value":2817},". For the generated initial-rule behavior\nand trigger-specific exceptions, see “CSS generation & FOUC” in\n",{"type":40,"tag":118,"props":2819,"children":2821},{"className":2820},[],[2822],{"type":46,"value":2104},{"type":46,"value":2824},". Same-element ",{"type":40,"tag":118,"props":2826,"children":2828},{"className":2827},[],[2829],{"type":46,"value":2417},{"type":46,"value":1016},{"type":40,"tag":118,"props":2832,"children":2834},{"className":2833},[],[2835],{"type":46,"value":2836},"once",{"type":46,"value":2838}," entrances get\nauthor-important neutral initial rules from ",{"type":40,"tag":118,"props":2840,"children":2842},{"className":2841},[],[2843],{"type":46,"value":2132},{"type":46,"value":2845},". Always set\n",{"type":40,"tag":118,"props":2847,"children":2849},{"className":2848},[],[2850],{"type":46,"value":2851},"fill: 'backwards'",{"type":46,"value":2853}," on ",{"type":40,"tag":118,"props":2855,"children":2857},{"className":2856},[],[2858],{"type":46,"value":2417},{"type":46,"value":1016},{"type":40,"tag":118,"props":2861,"children":2863},{"className":2862},[],[2864],{"type":46,"value":2836},{"type":46,"value":2866}," animation effects (or ",{"type":40,"tag":118,"props":2868,"children":2870},{"className":2869},[],[2871],{"type":46,"value":2872},"'both'",{"type":46,"value":2874},"\nwhen the final keyframe must persist) so delayed entrances hold their first\nkeyframe after the entrance marker is set.",{"type":40,"tag":451,"props":2876,"children":2877},{},[2878,2883,2885,2890,2892,2898,2900,2906,2908,2913,2914,2919],{"type":40,"tag":55,"props":2879,"children":2880},{},[2881],{"type":46,"value":2882},"Vanilla binding.",{"type":46,"value":2884}," You must then call the ",{"type":40,"tag":55,"props":2886,"children":2887},{},[2888],{"type":46,"value":2889},"standalone",{"type":46,"value":2891}," ",{"type":40,"tag":118,"props":2893,"children":2895},{"className":2894},[],[2896],{"type":46,"value":2897},"add(element, 'key')",{"type":46,"value":2899}," for\neach element once it exists in the DOM. For clean up call the ",{"type":40,"tag":118,"props":2901,"children":2903},{"className":2902},[],[2904],{"type":46,"value":2905},"remove('key')",{"type":46,"value":2907}," function.\n",{"type":40,"tag":118,"props":2909,"children":2911},{"className":2910},[],[2912],{"type":46,"value":1409},{"type":46,"value":484},{"type":40,"tag":118,"props":2915,"children":2917},{"className":2916},[],[2918],{"type":46,"value":2228},{"type":46,"value":2920}," are functions imported from the package.",{"type":40,"tag":451,"props":2922,"children":2923},{},[2924,2941,2943,2949,2950,2956,2957,2963,2965,2970],{"type":40,"tag":55,"props":2925,"children":2926},{},[2927,2932,2934,2940],{"type":40,"tag":118,"props":2928,"children":2930},{"className":2929},[],[2931],{"type":46,"value":2417},{"type":46,"value":2933}," with same source & target → only ",{"type":40,"tag":118,"props":2935,"children":2937},{"className":2936},[],[2938],{"type":46,"value":2939},"triggerType: 'once'",{"type":46,"value":173},{"type":46,"value":2942}," For\n",{"type":40,"tag":118,"props":2944,"children":2946},{"className":2945},[],[2947],{"type":46,"value":2948},"repeat",{"type":46,"value":484},{"type":40,"tag":118,"props":2951,"children":2953},{"className":2952},[],[2954],{"type":46,"value":2955},"alternate",{"type":46,"value":484},{"type":40,"tag":118,"props":2958,"children":2960},{"className":2959},[],[2961],{"type":46,"value":2962},"state",{"type":46,"value":2964},", the animation can move the element out of\u002Finto the\nviewport and re-trigger forever. Use ",{"type":40,"tag":55,"props":2966,"children":2967},{},[2968],{"type":46,"value":2969},"separate",{"type":46,"value":2971}," source and target elements for\nthose.",{"type":40,"tag":451,"props":2973,"children":2974},{},[2975,2980,2982,2987,2989,2994,2996,3002,3003,3009,3011,3016,3018,3024,3026,3031,3033,3037,3038,3043,3045,3049,3051,3056,3058,3063,3064,3069,3071,3076],{"type":40,"tag":55,"props":2976,"children":2977},{},[2978],{"type":46,"value":2979},"Hit-area shift.",{"type":46,"value":2981}," On ",{"type":40,"tag":118,"props":2983,"children":2985},{"className":2984},[],[2986],{"type":46,"value":2485},{"type":46,"value":2988}," or ",{"type":40,"tag":118,"props":2990,"children":2992},{"className":2991},[],[2993],{"type":46,"value":1469},{"type":46,"value":2995},", if the effect changes the\nelement's size\u002Fposition (",{"type":40,"tag":118,"props":2997,"children":2999},{"className":2998},[],[3000],{"type":46,"value":3001},"scale",{"type":46,"value":476},{"type":40,"tag":118,"props":3004,"children":3006},{"className":3005},[],[3007],{"type":46,"value":3008},"translate",{"type":46,"value":3010},"), the hovered hit-area shifts and\nflickers. Keep the trigger on the stable parent and animate a ",{"type":40,"tag":55,"props":3012,"children":3013},{},[3014],{"type":46,"value":3015},"child",{"type":46,"value":3017}," by\nputting ",{"type":40,"tag":118,"props":3019,"children":3021},{"className":3020},[],[3022],{"type":46,"value":3023},"selector",{"type":46,"value":3025}," (or different ",{"type":40,"tag":118,"props":3027,"children":3029},{"className":3028},[],[3030],{"type":46,"value":1042},{"type":46,"value":3032},") on the ",{"type":40,"tag":55,"props":3034,"children":3035},{},[3036],{"type":46,"value":1903},{"type":46,"value":334},{"type":40,"tag":118,"props":3039,"children":3041},{"className":3040},[],[3042],{"type":46,"value":3023},{"type":46,"value":3044}," on the ",{"type":40,"tag":63,"props":3046,"children":3047},{},[3048],{"type":46,"value":1903},{"type":46,"value":3050},"\nsets the ",{"type":40,"tag":55,"props":3052,"children":3053},{},[3054],{"type":46,"value":3055},"target",{"type":46,"value":3057},"; ",{"type":40,"tag":118,"props":3059,"children":3061},{"className":3060},[],[3062],{"type":46,"value":3023},{"type":46,"value":3044},{"type":40,"tag":63,"props":3065,"children":3066},{},[3067],{"type":46,"value":3068},"interaction",{"type":46,"value":3070}," sets the trigger's\n",{"type":40,"tag":55,"props":3072,"children":3073},{},[3074],{"type":46,"value":3075},"source",{"type":46,"value":3077}," instead (the opposite of what you want).",{"type":40,"tag":451,"props":3079,"children":3080},{},[3081,3106,3107,3113,3115,3120,3122,3127,3129,3135],{"type":40,"tag":55,"props":3082,"children":3083},{},[3084,3089,3091,3097,3099,3105],{"type":40,"tag":118,"props":3085,"children":3087},{"className":3086},[],[3088],{"type":46,"value":1462},{"type":46,"value":3090}," needs ",{"type":40,"tag":118,"props":3092,"children":3094},{"className":3093},[],[3095],{"type":46,"value":3096},"overflow: clip",{"type":46,"value":3098},", not ",{"type":40,"tag":118,"props":3100,"children":3102},{"className":3101},[],[3103],{"type":46,"value":3104},"hidden",{"type":46,"value":173},{"type":46,"value":2891},{"type":40,"tag":118,"props":3108,"children":3110},{"className":3109},[],[3111],{"type":46,"value":3112},"overflow: hidden",{"type":46,"value":3114}," on\nany ancestor between the element and the scroll container creates a scroll\ncontext that kills ViewTimeline. Replace every ",{"type":40,"tag":118,"props":3116,"children":3118},{"className":3117},[],[3119],{"type":46,"value":3112},{"type":46,"value":3121}," with\n",{"type":40,"tag":118,"props":3123,"children":3125},{"className":3124},[],[3126],{"type":46,"value":3096},{"type":46,"value":3128}," (Tailwind: ",{"type":40,"tag":118,"props":3130,"children":3132},{"className":3131},[],[3133],{"type":46,"value":3134},"overflow-clip",{"type":46,"value":3136},").",{"type":40,"tag":451,"props":3138,"children":3139},{},[3140,3145,3147,3152,3154,3159,3161,3167,3169,3175,3176,3182,3184,3193,3195,3200],{"type":40,"tag":55,"props":3141,"children":3142},{},[3143],{"type":46,"value":3144},"Never invent or guess.",{"type":46,"value":3146}," Use only real preset names (",{"type":40,"tag":118,"props":3148,"children":3150},{"className":3149},[],[3151],{"type":46,"value":1030},{"type":46,"value":3153},").\nIf you don't know a preset's option name\u002Ftype, ",{"type":40,"tag":55,"props":3155,"children":3156},{},[3157],{"type":46,"value":3158},"omit it",{"type":46,"value":3160}," and rely on defaults\n— guessing produces silently-wrong output. Never emit ",{"type":40,"tag":118,"props":3162,"children":3164},{"className":3163},[],[3165],{"type":46,"value":3166},"DVD",{"type":46,"value":3168}," (exists in types but\nisn't registered) or any ",{"type":40,"tag":118,"props":3170,"children":3172},{"className":3171},[],[3173],{"type":46,"value":3174},"Bg*",{"type":46,"value":484},{"type":40,"tag":118,"props":3177,"children":3179},{"className":3178},[],[3180],{"type":46,"value":3181},"ImageParallax",{"type":46,"value":3183}," preset (experimental, not\nproduction-ready). For \"background parallax\", use the public ",{"type":40,"tag":55,"props":3185,"children":3186},{},[3187],{"type":40,"tag":118,"props":3188,"children":3190},{"className":3189},[],[3191],{"type":46,"value":3192},"ParallaxScroll",{"type":46,"value":3194},"\non the image element with ",{"type":40,"tag":118,"props":3196,"children":3198},{"className":3197},[],[3199],{"type":46,"value":1462},{"type":46,"value":173},{"type":40,"tag":451,"props":3202,"children":3203},{},[3204,3216,3218,3224,3226,3232,3234,3239,3241,3247,3249,3254,3255,3260,3262,3268],{"type":40,"tag":55,"props":3205,"children":3206},{},[3207,3209,3215],{"type":46,"value":3208},"Scroll presets carry a ",{"type":40,"tag":118,"props":3210,"children":3212},{"className":3211},[],[3213],{"type":46,"value":3214},"range",{"type":46,"value":173},{"type":46,"value":3217}," Every ",{"type":40,"tag":118,"props":3219,"children":3221},{"className":3220},[],[3222],{"type":46,"value":3223},"*Scroll",{"type":46,"value":3225}," preset needs\n",{"type":40,"tag":118,"props":3227,"children":3229},{"className":3228},[],[3230],{"type":46,"value":3231},"range: 'in' | 'out' | 'continuous'",{"type":46,"value":3233}," in its ",{"type":40,"tag":118,"props":3235,"children":3237},{"className":3236},[],[3238],{"type":46,"value":1911},{"type":46,"value":3240},"\n(prefer ",{"type":40,"tag":118,"props":3242,"children":3244},{"className":3243},[],[3245],{"type":46,"value":3246},"'continuous'",{"type":46,"value":3248},") — ",{"type":40,"tag":55,"props":3250,"children":3251},{},[3252],{"type":46,"value":3253},"except",{"type":46,"value":2891},{"type":40,"tag":118,"props":3256,"children":3258},{"className":3257},[],[3259],{"type":46,"value":3192},{"type":46,"value":3261},", which takes ",{"type":40,"tag":118,"props":3263,"children":3265},{"className":3264},[],[3266],{"type":46,"value":3267},"parallaxFactor",{"type":46,"value":3269}," instead.",{"type":40,"tag":451,"props":3271,"children":3272},{},[3273,3292,3294,3299,3301,3306,3308,3316,3317,3321,3323,3328,3330,3338,3340,3344,3346,3351,3353,3358,3359,3364,3366,3371,3373,3378,3380,3385],{"type":40,"tag":55,"props":3274,"children":3275},{},[3276,3278,3283,3284,3290],{"type":46,"value":3277},"Lists: one keyed wrapper, fan out by ",{"type":40,"tag":118,"props":3279,"children":3281},{"className":3280},[],[3282],{"type":46,"value":3023},{"type":46,"value":2988},{"type":40,"tag":118,"props":3285,"children":3287},{"className":3286},[],[3288],{"type":46,"value":3289},"listContainer",{"type":46,"value":3291}," — never\nduplicate keys.",{"type":46,"value":3293}," Keys are unique (one controller per key), so never put the\nsame key on N repeated elements — they'd clobber and only the last binds.\nInstead key an ",{"type":40,"tag":55,"props":3295,"children":3296},{},[3297],{"type":46,"value":3298},"ancestor wrapper",{"type":46,"value":3300}," and choose by ",{"type":40,"tag":63,"props":3302,"children":3303},{},[3304],{"type":46,"value":3305},"who triggers",{"type":46,"value":3307},": use\n",{"type":40,"tag":55,"props":3309,"children":3310},{},[3311],{"type":40,"tag":118,"props":3312,"children":3314},{"className":3313},[],[3315],{"type":46,"value":3023},{"type":46,"value":3044},{"type":40,"tag":55,"props":3318,"children":3319},{},[3320],{"type":46,"value":1903},{"type":46,"value":3322}," when one trigger staggers\u002Fanimates many targets\n(a ",{"type":40,"tag":118,"props":3324,"children":3326},{"className":3325},[],[3327],{"type":46,"value":2417},{"type":46,"value":3329}," sequence over cards); use ",{"type":40,"tag":55,"props":3331,"children":3332},{},[3333],{"type":40,"tag":118,"props":3334,"children":3336},{"className":3335},[],[3337],{"type":46,"value":3289},{"type":46,"value":3339}," on the\n",{"type":40,"tag":55,"props":3341,"children":3342},{},[3343],{"type":46,"value":3068},{"type":46,"value":3345}," when each item needs its ",{"type":40,"tag":55,"props":3347,"children":3348},{},[3349],{"type":46,"value":3350},"own",{"type":46,"value":3352}," trigger (per-card\n",{"type":40,"tag":118,"props":3354,"children":3356},{"className":3355},[],[3357],{"type":46,"value":2485},{"type":46,"value":484},{"type":40,"tag":118,"props":3360,"children":3362},{"className":3361},[],[3363],{"type":46,"value":1469},{"type":46,"value":3365},", one tracker each). Either way the ",{"type":40,"tag":118,"props":3367,"children":3369},{"className":3368},[],[3370],{"type":46,"value":3023},{"type":46,"value":3372},"\u002F\n",{"type":40,"tag":118,"props":3374,"children":3376},{"className":3375},[],[3377],{"type":46,"value":3289},{"type":46,"value":3379}," must match a ",{"type":40,"tag":55,"props":3381,"children":3382},{},[3383],{"type":46,"value":3384},"descendant",{"type":46,"value":3386}," of the keyed element, not the keyed\nelement itself.",{"type":40,"tag":451,"props":3388,"children":3389},{},[3390,3395,3397,3402,3404,3409,3411,3417,3418,3424,3426,3431,3433,3438,3440,3445,3447,3452,3454,3459],{"type":40,"tag":55,"props":3391,"children":3392},{},[3393],{"type":46,"value":3394},"Layers that move as one → one keyed container, not the same effect on each\nlayer.",{"type":46,"value":3396}," When an element is composed of stacked layers meant to animate\n",{"type":40,"tag":55,"props":3398,"children":3399},{},[3400],{"type":46,"value":3401},"together",{"type":46,"value":3403}," — a hero of background image + gradient overlay + content block, a\ncard of image + heading + text + button — put the trigger and ",{"type":40,"tag":55,"props":3405,"children":3406},{},[3407],{"type":46,"value":3408},"one",{"type":46,"value":3410}," effect on\nthe wrapper that holds them and key that wrapper. Copying the same\n",{"type":40,"tag":118,"props":3412,"children":3414},{"className":3413},[],[3415],{"type":46,"value":3416},"FadeIn",{"type":46,"value":484},{"type":40,"tag":118,"props":3419,"children":3421},{"className":3420},[],[3422],{"type":46,"value":3423},"SlideIn",{"type":46,"value":3425}," onto each layer is the common wrong turn: N layers become N\ncontrollers that have to stay in sync (they visibly drift on slower devices), N\nkeys to wire, and N× the per-frame work for a motion the eye reads as a single\nmove. Collapse them onto the container. This is ",{"type":40,"tag":55,"props":3427,"children":3428},{},[3429],{"type":46,"value":3430},"not",{"type":46,"value":3432}," the same as two cases\nwhere separate targets are deliberate: scroll ",{"type":40,"tag":55,"props":3434,"children":3435},{},[3436],{"type":46,"value":3437},"parallax",{"type":46,"value":3439},", where layers move at\n",{"type":40,"tag":63,"props":3441,"children":3442},{},[3443],{"type":46,"value":3444},"different",{"type":46,"value":3446}," rates on purpose (a ",{"type":40,"tag":118,"props":3448,"children":3450},{"className":3449},[],[3451],{"type":46,"value":3192},{"type":46,"value":3453}," per layer — keep those\nseparate), and ",{"type":40,"tag":55,"props":3455,"children":3456},{},[3457],{"type":46,"value":3458},"hit-area-safe child targeting",{"type":46,"value":3460}," (invariant 6 — trigger on the\nparent, animate one child). Litmus test: same trigger, same effect, same timing\nacross the layers ⇒ they belong on one keyed container.",{"type":40,"tag":71,"props":3462,"children":3464},{"id":3463},"verify-your-work-run-before-declaring-done",[3465],{"type":46,"value":3466},"Verify your work (run before declaring done)",{"type":40,"tag":49,"props":3468,"children":3469},{},[3470],{"type":46,"value":3471},"Animations are hard to confirm headlessly, so this static check is your reliable\nproxy.",{"type":40,"tag":310,"props":3473,"children":3475},{"id":3474},"automated-config-validation",[3476],{"type":46,"value":3477},"Automated config validation",{"type":40,"tag":2157,"props":3479,"children":3482},{"className":3480},[3481],"contains-task-list",[3483,3523],{"type":40,"tag":451,"props":3484,"children":3487},{"className":3485},[3486],"task-list-item",[3488,3493,3494,3500,3502,3508,3510,3515,3517,3522],{"type":40,"tag":3489,"props":3490,"children":3492},"input",{"disabled":766,"type":3491},"checkbox",[],{"type":46,"value":2891},{"type":40,"tag":118,"props":3495,"children":3497},{"className":3496},[],[3498],{"type":46,"value":3499},"validateInteractConfig(config)",{"type":46,"value":3501}," returns ",{"type":40,"tag":118,"props":3503,"children":3505},{"className":3504},[],[3506],{"type":46,"value":3507},"valid: true",{"type":46,"value":3509}," (no ",{"type":40,"tag":118,"props":3511,"children":3513},{"className":3512},[],[3514],{"type":46,"value":2221},{"type":46,"value":3516}," issues). See ",{"type":40,"tag":118,"props":3518,"children":3520},{"className":3519},[],[3521],{"type":46,"value":242},{"type":46,"value":173},{"type":40,"tag":451,"props":3524,"children":3526},{"className":3525},[3486],[3527,3530,3532,3537,3538,3544,3545,3551,3552,3557,3558,3564],{"type":40,"tag":3489,"props":3528,"children":3529},{"disabled":766,"type":3491},[],{"type":46,"value":3531}," Shipped files contain ",{"type":40,"tag":55,"props":3533,"children":3534},{},[3535],{"type":46,"value":3536},"no",{"type":46,"value":2891},{"type":40,"tag":118,"props":3539,"children":3541},{"className":3540},[],[3542],{"type":46,"value":3543},"interact-validate",{"type":46,"value":476},{"type":40,"tag":118,"props":3546,"children":3548},{"className":3547},[],[3549],{"type":46,"value":3550},"validateInteractConfig",{"type":46,"value":476},{"type":40,"tag":118,"props":3553,"children":3555},{"className":3554},[],[3556],{"type":46,"value":2267},{"type":46,"value":1492},{"type":40,"tag":118,"props":3559,"children":3561},{"className":3560},[],[3562],{"type":46,"value":3563},"InteractValidationError",{"type":46,"value":3565}," references (unless the user explicitly asked for a permanent CI guard).",{"type":40,"tag":310,"props":3567,"children":3569},{"id":3568},"semantic-integration-checklist",[3570],{"type":46,"value":3571},"Semantic & integration checklist",{"type":40,"tag":49,"props":3573,"children":3574},{},[3575],{"type":46,"value":3576},"Items the validator cannot check — walk these after automated validation passes:",{"type":40,"tag":2157,"props":3578,"children":3580},{"className":3579},[3481],[3581,3624,3659,3699,3743,3758,3774,3821,3837],{"type":40,"tag":451,"props":3582,"children":3584},{"className":3583},[3486],[3585,3588,3589,3594,3596,3601,3603,3608,3610,3615,3617,3622],{"type":40,"tag":3489,"props":3586,"children":3587},{"disabled":766,"type":3491},[],{"type":46,"value":3217},{"type":40,"tag":118,"props":3590,"children":3592},{"className":3591},[],[3593],{"type":46,"value":2056},{"type":46,"value":3595}," is a ",{"type":40,"tag":55,"props":3597,"children":3598},{},[3599],{"type":46,"value":3600},"real registered preset",{"type":46,"value":3602}," from ",{"type":40,"tag":118,"props":3604,"children":3606},{"className":3605},[],[3607],{"type":46,"value":1030},{"type":46,"value":3609}," (not ",{"type":40,"tag":118,"props":3611,"children":3613},{"className":3612},[],[3614],{"type":46,"value":3166},{"type":46,"value":3616},", not a ",{"type":40,"tag":118,"props":3618,"children":3620},{"className":3619},[],[3621],{"type":46,"value":3174},{"type":46,"value":3623}," preset, not invented).",{"type":40,"tag":451,"props":3625,"children":3627},{"className":3626},[3486],[3628,3631,3632,3637,3639,3644,3646,3651,3653,3658],{"type":40,"tag":3489,"props":3629,"children":3630},{"disabled":766,"type":3491},[],{"type":46,"value":3217},{"type":40,"tag":118,"props":3633,"children":3635},{"className":3634},[],[3636],{"type":46,"value":3223},{"type":46,"value":3638}," preset used with ",{"type":40,"tag":118,"props":3640,"children":3642},{"className":3641},[],[3643],{"type":46,"value":1462},{"type":46,"value":3645}," has a ",{"type":40,"tag":118,"props":3647,"children":3649},{"className":3648},[],[3650],{"type":46,"value":3214},{"type":46,"value":3652}," (except ",{"type":40,"tag":118,"props":3654,"children":3656},{"className":3655},[],[3657],{"type":46,"value":3192},{"type":46,"value":3136},{"type":40,"tag":451,"props":3660,"children":3662},{"className":3661},[3486],[3663,3666,3667,3672,3674,3678,3679,3684,3685,3690,3692,3697],{"type":40,"tag":3489,"props":3664,"children":3665},{"disabled":766,"type":3491},[],{"type":46,"value":2891},{"type":40,"tag":118,"props":3668,"children":3670},{"className":3669},[],[3671],{"type":46,"value":1469},{"type":46,"value":3673}," effects have ",{"type":40,"tag":55,"props":3675,"children":3676},{},[3677],{"type":46,"value":3536},{"type":46,"value":2891},{"type":40,"tag":118,"props":3680,"children":3682},{"className":3681},[],[3683],{"type":46,"value":1970},{"type":46,"value":484},{"type":40,"tag":118,"props":3686,"children":3688},{"className":3687},[],[3689],{"type":46,"value":1977},{"type":46,"value":3691}," (those are ",{"type":40,"tag":118,"props":3693,"children":3695},{"className":3694},[],[3696],{"type":46,"value":1462},{"type":46,"value":3698},"-only).",{"type":40,"tag":451,"props":3700,"children":3702},{"className":3701},[3486],[3703,3706,3708,3713,3715,3720,3722,3727,3729,3735,3736,3742],{"type":40,"tag":3489,"props":3704,"children":3705},{"disabled":766,"type":3491},[],{"type":46,"value":3707}," Every interaction ",{"type":40,"tag":118,"props":3709,"children":3711},{"className":3710},[],[3712],{"type":46,"value":1042},{"type":46,"value":3714}," (and effect ",{"type":40,"tag":118,"props":3716,"children":3718},{"className":3717},[],[3719],{"type":46,"value":1042},{"type":46,"value":3721},") has a ",{"type":40,"tag":55,"props":3723,"children":3724},{},[3725],{"type":46,"value":3726},"matching element",{"type":46,"value":3728}," in the markup (",{"type":40,"tag":118,"props":3730,"children":3732},{"className":3731},[],[3733],{"type":46,"value":3734},"data-interact-key",{"type":46,"value":2072},{"type":40,"tag":118,"props":3737,"children":3739},{"className":3738},[],[3740],{"type":46,"value":3741},"interactKey",{"type":46,"value":3136},{"type":40,"tag":451,"props":3744,"children":3746},{"className":3745},[3486],[3747,3750,3752,3757],{"type":40,"tag":3489,"props":3748,"children":3749},{"disabled":766,"type":3491},[],{"type":46,"value":3751}," Static\u002Fpre-rendered CSS follows the canonical policy in ",{"type":40,"tag":118,"props":3753,"children":3755},{"className":3754},[],[3756],{"type":46,"value":303},{"type":46,"value":173},{"type":40,"tag":451,"props":3759,"children":3761},{"className":3760},[3486],[3762,3765,3766,3772],{"type":40,"tag":3489,"props":3763,"children":3764},{"disabled":766,"type":3491},[],{"type":46,"value":2891},{"type":40,"tag":118,"props":3767,"children":3769},{"className":3768},[],[3770],{"type":46,"value":3771},"useFirstChild",{"type":46,"value":3773}," matches the entry point.",{"type":40,"tag":451,"props":3775,"children":3777},{"className":3776},[3486],[3778,3781,3783,3788,3789,3794,3795,3799,3801,3805,3807,3812,3814,3819],{"type":40,"tag":3489,"props":3779,"children":3780},{"disabled":766,"type":3491},[],{"type":46,"value":3782}," Child-target effects put ",{"type":40,"tag":118,"props":3784,"children":3786},{"className":3785},[],[3787],{"type":46,"value":3023},{"type":46,"value":484},{"type":40,"tag":118,"props":3790,"children":3792},{"className":3791},[],[3793],{"type":46,"value":1042},{"type":46,"value":3044},{"type":40,"tag":55,"props":3796,"children":3797},{},[3798],{"type":46,"value":1903},{"type":46,"value":3800},", not the interaction. Groups of items use one keyed wrapper + a ",{"type":40,"tag":55,"props":3802,"children":3803},{},[3804],{"type":46,"value":3384},{"type":46,"value":3806}," match (no duplicate keys): ",{"type":40,"tag":118,"props":3808,"children":3810},{"className":3809},[],[3811],{"type":46,"value":3023},{"type":46,"value":3813}," on the effect for a one-trigger stagger\u002Fsequence, ",{"type":40,"tag":118,"props":3815,"children":3817},{"className":3816},[],[3818],{"type":46,"value":3289},{"type":46,"value":3820}," on the interaction for per-item triggers.",{"type":40,"tag":451,"props":3822,"children":3824},{"className":3823},[3486],[3825,3828,3830,3835],{"type":40,"tag":3489,"props":3826,"children":3827},{"disabled":766,"type":3491},[],{"type":46,"value":3829}," Composite elements whose layers animate as one unit are keyed on a ",{"type":40,"tag":55,"props":3831,"children":3832},{},[3833],{"type":46,"value":3834},"single container",{"type":46,"value":3836}," with one effect — the same effect is not copied onto each layer (distinct from intentional per-layer parallax, which uses different rates, or child-targeting to avoid hit-area shift).",{"type":40,"tag":451,"props":3838,"children":3840},{"className":3839},[3486],[3841,3844,3846,3851],{"type":40,"tag":3489,"props":3842,"children":3843},{"disabled":766,"type":3491},[],{"type":46,"value":3845}," Invariants 5–7, 10, and 11 hold for the relevant triggers (separate source\u002Ftarget, child targets, ",{"type":40,"tag":118,"props":3847,"children":3849},{"className":3848},[],[3850],{"type":46,"value":3096},{"type":46,"value":3852},", unique keys, layers collapsed to one container).",{"type":40,"tag":49,"props":3854,"children":3855},{},[3856],{"type":46,"value":3857},"If a dev server is available, load the page and confirm the animation runs and the\nbrowser console is free of \"not found in registry\" warnings.",{"type":40,"tag":71,"props":3859,"children":3861},{"id":3860},"reference-files",[3862],{"type":46,"value":3863},"Reference files",{"type":40,"tag":49,"props":3865,"children":3866},{},[3867],{"type":46,"value":3868},"Read the one(s) relevant to the task — they are self-contained and source-accurate:",{"type":40,"tag":2157,"props":3870,"children":3871},{},[3872,3885,3918,3982,3995,4008,4028],{"type":40,"tag":451,"props":3873,"children":3874},{},[3875,3883],{"type":40,"tag":55,"props":3876,"children":3877},{},[3878],{"type":40,"tag":118,"props":3879,"children":3881},{"className":3880},[],[3882],{"type":46,"value":1449},{"type":46,"value":3884}," — table of contents for the curated demo library, with summaries, tags, and exact file links across all example categories.",{"type":40,"tag":451,"props":3886,"children":3887},{},[3888,3896,3898,3903,3904,3909,3911,3916],{"type":40,"tag":55,"props":3889,"children":3890},{},[3891],{"type":40,"tag":118,"props":3892,"children":3894},{"className":3893},[],[3895],{"type":46,"value":2104},{"type":46,"value":3897}," — every config object field-by-field: ",{"type":40,"tag":118,"props":3899,"children":3901},{"className":3900},[],[3902],{"type":46,"value":141},{"type":46,"value":476},{"type":40,"tag":118,"props":3905,"children":3907},{"className":3906},[],[3908],{"type":46,"value":1161},{"type":46,"value":3910},", all three effect variants, sequences, conditions, element resolution (source vs target), FOUC, and the full ",{"type":40,"tag":118,"props":3912,"children":3914},{"className":3913},[],[3915],{"type":46,"value":778},{"type":46,"value":3917}," static API.",{"type":40,"tag":451,"props":3919,"children":3920},{},[3921,3929,3931,3936,3937,3942,3943,3948,3949,3954,3956,3961,3962,3967,3969,3974,3975,3980],{"type":40,"tag":55,"props":3922,"children":3923},{},[3924],{"type":40,"tag":118,"props":3925,"children":3927},{"className":3926},[],[3928],{"type":46,"value":2078},{"type":46,"value":3930}," — per-trigger deep rules and gotchas: ",{"type":40,"tag":118,"props":3932,"children":3934},{"className":3933},[],[3935],{"type":46,"value":2417},{"type":46,"value":476},{"type":40,"tag":118,"props":3938,"children":3940},{"className":3939},[],[3941],{"type":46,"value":1462},{"type":46,"value":476},{"type":40,"tag":118,"props":3944,"children":3946},{"className":3945},[],[3947],{"type":46,"value":2485},{"type":46,"value":484},{"type":40,"tag":118,"props":3950,"children":3952},{"className":3951},[],[3953],{"type":46,"value":2540},{"type":46,"value":3955}," (+ ",{"type":40,"tag":118,"props":3957,"children":3959},{"className":3958},[],[3960],{"type":46,"value":1954},{"type":46,"value":484},{"type":40,"tag":118,"props":3963,"children":3965},{"className":3964},[],[3966],{"type":46,"value":1962},{"type":46,"value":3968}," tables), ",{"type":40,"tag":118,"props":3970,"children":3972},{"className":3971},[],[3973],{"type":46,"value":1469},{"type":46,"value":476},{"type":40,"tag":118,"props":3976,"children":3978},{"className":3977},[],[3979],{"type":46,"value":2625},{"type":46,"value":3981},", accessibility variants, and sequences\u002Fstagger.",{"type":40,"tag":451,"props":3983,"children":3984},{},[3985,3993],{"type":40,"tag":55,"props":3986,"children":3987},{},[3988],{"type":40,"tag":118,"props":3989,"children":3991},{"className":3990},[],[3992],{"type":46,"value":1030},{"type":46,"value":3994}," — the full preset catalog by category with parameters, defaults, accessibility risk tiers + reduced-motion fallbacks, and an \"atmosphere → preset\" selection guide.",{"type":40,"tag":451,"props":3996,"children":3997},{},[3998,4006],{"type":40,"tag":55,"props":3999,"children":4000},{},[4001],{"type":40,"tag":118,"props":4002,"children":4004},{"className":4003},[],[4005],{"type":46,"value":303},{"type":46,"value":4007}," — complete copy-paste setup per entry point (web \u002F React \u002F vanilla \u002F CDN), with SSR, lifecycle\u002Fcleanup, and verification.",{"type":40,"tag":451,"props":4009,"children":4010},{},[4011,4019,4021,4026],{"type":40,"tag":55,"props":4012,"children":4013},{},[4014],{"type":40,"tag":118,"props":4015,"children":4017},{"className":4016},[],[4018],{"type":46,"value":242},{"type":46,"value":4020}," — how to run ",{"type":40,"tag":118,"props":4022,"children":4024},{"className":4023},[],[4025],{"type":46,"value":219},{"type":46,"value":4027}," (static scratch script vs temporary injection for dynamic configs), options, limitations, and what the validator does not check.",{"type":40,"tag":451,"props":4029,"children":4030},{},[4031,4039,4041,4046,4048,4054,4055,4061,4062,4068],{"type":40,"tag":55,"props":4032,"children":4033},{},[4034],{"type":40,"tag":118,"props":4035,"children":4037},{"className":4036},[],[4038],{"type":46,"value":206},{"type":46,"value":4040}," — thin escape-hatch reference for calling ",{"type":40,"tag":118,"props":4042,"children":4044},{"className":4043},[],[4045],{"type":46,"value":190},{"type":46,"value":4047}," directly (programmatic ",{"type":40,"tag":118,"props":4049,"children":4051},{"className":4050},[],[4052],{"type":46,"value":4053},"getWebAnimation",{"type":46,"value":484},{"type":40,"tag":118,"props":4056,"children":4058},{"className":4057},[],[4059],{"type":46,"value":4060},"getScrubScene",{"type":46,"value":484},{"type":40,"tag":118,"props":4063,"children":4065},{"className":4064},[],[4066],{"type":46,"value":4067},"getSequence",{"type":46,"value":4069},"), easings, and engine gotchas. Only when the declarative config can't express what's needed.",{"type":40,"tag":4071,"props":4072,"children":4073},"style",{},[4074],{"type":46,"value":4075},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4077,"total":4241},[4078,4096,4108,4120,4135,4145,4156,4168,4185,4199,4214,4226],{"slug":4079,"name":4079,"fn":4080,"description":4081,"org":4082,"tags":4083,"stars":4093,"repoUrl":4094,"updatedAt":4095},"rp-discovery","discover source platform schema for migration","Discovers and documents the source platform schema (entities, fields, relationships) for a migration project. Use when capturing source structure before mapping to Wix.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4084,4087,4090],{"name":4085,"slug":4086,"type":13},"Data Modeling","data-modeling",{"name":4088,"slug":4089,"type":13},"Documentation","documentation",{"name":4091,"slug":4092,"type":13},"Migration","migration",23,"https:\u002F\u002Fgithub.com\u002Fwix\u002Fskills","2026-07-01T08:08:08.302261",{"slug":4097,"name":4097,"fn":4098,"description":4099,"org":4100,"tags":4101,"stars":4093,"repoUrl":4094,"updatedAt":4107},"rp-execute-import","execute migration pipelines to Wix","Runs the generated extract\u002Fimport pipeline and records execution results. Use when setup and codegen are complete and the user has approved the execution plan.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4102,4105,4106],{"name":4103,"slug":4104,"type":13},"Data Pipeline","data-pipeline",{"name":4091,"slug":4092,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:07.038962",{"slug":4109,"name":4109,"fn":4110,"description":4111,"org":4112,"tags":4113,"stars":4093,"repoUrl":4094,"updatedAt":4119},"rp-execute-setup","provision Wix site setup for migration","Verifies and provisions Wix-side setup required before import. Use after codegen when setup-requirements.md must be validated or executed against the target site.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4114,4117,4118],{"name":4115,"slug":4116,"type":13},"Deployment","deployment",{"name":4091,"slug":4092,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:04.475894",{"slug":4121,"name":4121,"fn":4122,"description":4123,"org":4124,"tags":4125,"stars":4093,"repoUrl":4094,"updatedAt":4134},"rp-import-codegen","generate migration code for Wix","Generates migration readers, transforms, and Wix writers from schema and mapping artifacts. Use when producing runnable extract\u002Fimport code under the migration project.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4126,4129,4132,4133],{"name":4127,"slug":4128,"type":13},"Automation","automation",{"name":4130,"slug":4131,"type":13},"Data Engineering","data-engineering",{"name":4091,"slug":4092,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:05.755188",{"slug":4136,"name":4136,"fn":4137,"description":4138,"org":4139,"tags":4140,"stars":4093,"repoUrl":4094,"updatedAt":4144},"rp-mapper","map source entities to Wix targets","Maps discovered source entities and fields to Wix targets and documents lossiness. Use when creating mapping-plan.md and mapping-summary.md after discovery.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4141,4142,4143],{"name":4085,"slug":4086,"type":13},{"name":4091,"slug":4092,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:01.958081",{"slug":4146,"name":4146,"fn":4147,"description":4148,"org":4149,"tags":4150,"stars":4093,"repoUrl":4094,"updatedAt":4155},"rp-orchestration","orchestrate Wix site migrations","Routes RePlatform source-to-Wix migrations to the next workflow step by inspecting migration project artifacts. Use when starting, continuing, or recovering a migration run.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4151,4152,4153,4154],{"name":4127,"slug":4128,"type":13},{"name":4115,"slug":4116,"type":13},{"name":4091,"slug":4092,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:09.570887",{"slug":4157,"name":4157,"fn":4158,"description":4159,"org":4160,"tags":4161,"stars":4093,"repoUrl":4094,"updatedAt":4167},"rp-setup-discovery","set up Wix environment prerequisites","Derives Wix environment prerequisites (apps, collections, schemas) from an approved mapping plan. Use after mapping review and before import code generation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4162,4165,4166],{"name":4163,"slug":4164,"type":13},"Configuration","configuration",{"name":4085,"slug":4086,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:07:59.413698",{"slug":4169,"name":4169,"fn":4170,"description":4171,"org":4172,"tags":4173,"stars":4093,"repoUrl":4094,"updatedAt":4184},"rp-source-wordpress","capture data from WordPress and WooCommerce","WordPress and WooCommerce source adapter: REST capture, auth, pagination, and read contract for codegen. Use when the source platform is WordPress or WooCommerce.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4174,4175,4178,4181],{"name":4130,"slug":4131,"type":13},{"name":4176,"slug":4177,"type":13},"REST API","rest-api",{"name":4179,"slug":4180,"type":13},"WooCommerce","woocommerce",{"name":4182,"slug":4183,"type":13},"WordPress","wordpress","2026-07-01T08:08:00.69949",{"slug":4186,"name":4186,"fn":4187,"description":4188,"org":4189,"tags":4190,"stars":4093,"repoUrl":4094,"updatedAt":4198},"rp-target-wix","validate Wix API write operations","Wix target adapter with verified write primitives (wix-writers.js) and contract tests. Use when vendoring Wix writers, validating API shapes, or Wix provisioning mechanics.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4191,4194,4197],{"name":4192,"slug":4193,"type":13},"API Development","api-development",{"name":4195,"slug":4196,"type":13},"Testing","testing",{"name":9,"slug":8,"type":13},"2026-07-01T08:08:03.226054",{"slug":4200,"name":4200,"fn":4201,"description":4202,"org":4203,"tags":4204,"stars":4093,"repoUrl":4094,"updatedAt":4213},"wix-app","build Wix CLI app extensions","Build and review Wix CLI app extensions — dashboard pages, modals, plugins, menu plugins, custom element widgets, Editor React components, site plugins, embedded scripts, backend APIs, backend events, service plugins, data collections, and App Market readiness. Use when building ANY feature or extension for a Wix CLI app or preparing a Wix app for App Market review. Triggers on: add, build, create, implement, help me, dashboard, widget, plugin, backend, API, event, collection, embedded script, service plugin, Editor React component, checkout, shipping, tax, discount, SPI, CMS, schema, tracking, popup, admin panel, menu item, modal, validate, test, verify, register extension, App Market, app review, submission readiness.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4205,4208,4211,4212],{"name":4206,"slug":4207,"type":13},"Backend","backend",{"name":4209,"slug":4210,"type":13},"CLI","cli",{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13},"2026-04-16T04:58:00.157961",{"slug":4215,"name":4215,"fn":4216,"description":4217,"org":4218,"tags":4219,"stars":4093,"repoUrl":4094,"updatedAt":4225},"wix-auth","authenticate with Wix APIs","Authenticate with Wix to obtain an access token for calling Wix APIs. Use when an agent needs a valid Wix access token and has none, or when the stored token is expired.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4220,4221,4224],{"name":4192,"slug":4193,"type":13},{"name":4222,"slug":4223,"type":13},"Auth","auth",{"name":9,"slug":8,"type":13},"2026-07-07T06:47:46.95263",{"slug":4227,"name":4227,"fn":4228,"description":4229,"org":4230,"tags":4231,"stars":4093,"repoUrl":4094,"updatedAt":4240},"wix-design-system","build UIs with Wix Design System","Wix Design System component reference. Use when building UI with @wix\u002Fdesign-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on \"what component\", \"how do I make\", \"WDS\", \"show me props\", \"testkit\", \"driver\", or component names like Button, Card, Modal, Box, Text.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4232,4233,4236,4237,4239],{"name":21,"slug":22,"type":13},{"name":4234,"slug":4235,"type":13},"Design System","design-system",{"name":18,"slug":19,"type":13},{"name":4238,"slug":1554,"type":13},"UI Components",{"name":9,"slug":8,"type":13},"2026-04-29T05:33:44.561687",17,{"items":4243,"total":355},[4244],{"slug":4,"name":4,"fn":5,"description":6,"org":4245,"tags":4246,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4247,4248,4249,4250],{"name":15,"slug":16,"type":13},{"name":21,"slug":22,"type":13},{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13}]