G
YouTube TikTok Games
Skip to content

Share reduced-motion variant rules in generate() output - #404

Draft
ameerf-wix wants to merge 11 commits into
masterfrom
css-reduced-motion-dedupe
Draft

ameerf-wix wants to merge 11 commits into
masterfrom
css-reduced-motion-dedupe

Conversation

@ameerf-wix

Copy link
Copy Markdown
Contributor

Stacked on #400. With collapse as the default, generate() emitted every effect twice under exclusive prefers-reduced-motion media. This removes most of that duplication without changing the cascade.

  • Shared variant rules (mergeVariantRules in core/css.ts):
    • A rule an effect's no-preference and reduce variants both have is emitted with no reduced-motion gate.
    • The reduce rule follows under reduce with only the declarations that differ. A list entry it doesn't write is reset to initial, its @property fallback.
    • A rule only one variant has keeps its gate, e.g. an entrance's animation rule.
    • A pair whose reduce rule drops a regular property (a replacement transition on other properties) keeps both gates.
    • Browsers without prefers-reduced-motion support now get the full effect, instead of matching neither gate.
  • Grouped gated rules (printRules, generate() output only):
    • Rules gated by a reduced-motion preference move into one trailing block per media query.
    • A rule stays in place when a later rule writes one of its properties on the same key, so a later variation keeps winning.
    • _generate()'s cssRules are unchanged.

Size: the website's generate() configs go from 20.6 KB to 12.8 KB raw (−38%), and from 1057 B to 993 B with brotli.

Verification: I diffed computed styles in Chromium / Firefox / WebKit for 1728 states:

  • Setup: reduce / no-preference, narrow / wide, with selector-condition classes, effect states and data-interact-enter toggled.
  • Configs: variations under media, selector conditions, cancel / replacement handling, transitions, shared sequences, repeated targets, scroll / pointer effects, and a config built to stress the grouping.
  • Results:
  • Runtime: in CSS mode, WAAPI and CSS still agree for entrances, staggered sequences, variations and live media toggles.

🤖 Generated with Claude Code

ameerf-wix and others added 5 commits November 3, 2026 15:01
A cascading `reducedMotionHandling` field (`ignore` | `cancel` | `collapse` |
effectId) on the config, interactions, sequences and effects. Each effect
position yields variants under exclusive reserved prefers-reduced-motion media,
which generate() emits and the runtime picks from, so the WAAPI and CSS paths
match without adding effects to the config. `Interact.forceReducedMotion` now
applies the reduced outcome, with a matching generate() option.

Validation, docs and the design doc (docs/reduced-motion-design.md) included.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ation

- reducedMotionHandling defaults to 'collapse'; collapse also takes finite
  iterations to one, and a sequence's stagger collapses unless it's ignored
- forceReducedMotion can be set per instance via Interact.create()
- handling is resolved from values, not the objects holding them; the
  time/scrub kind uses effectToAnimationOptions' discriminator
- replacement body fields are typed against the effect types; runtime
  fallback warnings are dropped (the validator reports them)
- CSS variants fall back only the entries assigned before their effect; an
  instant entrance is detected from its own duration
- keyframe naming stays where it was in resolveEffectForCSS
- validate: reduced-motion checks run inside the existing walks, replacement
  kinds come from the effect schemas, sequence definitions are reported per
  reference instead of deduplicated, shared helpers and modes are reused

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…nal iterations

- reducedMotionHandling is no longer a config field: Interact.setup() sets
  the default for every instance, Interact.create() options override it per
  instance, and generate() takes it as an option defaulting to setup()'s
- forceReducedMotion is set through Interact.setup() too
- collapse keeps the fraction of fractional iterations and flips `reversed`
  when the last alternate iteration runs backwards, so the collapsed effect
  ends where the full one does
- the validator rejects the field on the config root and assumes the default
  instance handling

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…gated ones

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Nov 4, 2026 •

Copy link
Copy Markdown
Contributor

Generated llms.txt preview

llms.txt
# @wix/interact

> Declarative, configuration-driven interaction library — web-native, AI-ready, and framework-agnostic.

- Install: `npm install @wix/interact @wix/motion-presets`
- Three entry points: vanilla JS (`@wix/interact`), React (`@wix/interact/react`), Web Components (`@wix/interact/web`)
- Five trigger types: hover, click, viewEnter, viewProgress, pointerMove
- Effects via named presets (`@wix/motion-presets`), keyframes, CSS transitions, or custom JS callbacks
- Configs are JSON-serializable -- designed for LLM generation

## Docs

- [Full Reference](https://wix.github.io/interact/rules/full-lean.md): Declarative configuration-driven interaction library. Binds animations to triggers via JSON config. (817 lines)
- [Integration Guide](https://wix.github.io/interact/rules/integration.md): Rules for integrating `@wix/interact` into a webpage — binding animations and effects to user-driven triggers via declarative configuration. (368 lines)
- [Validation Guide](https://wix.github.io/interact/rules/validate.md): Rules for using `@wix/interact-validate` — validate an `InteractConfig` before it reaches the runtime. (324 lines)

## Optional

- [Click Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/click.md): This document contains rules for generating click-triggered interactions in `@wix/interact`. (197 lines)
- [Hover Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/hover.md): This document contains rules for generating hover-triggered interactions in `@wix/interact`. (199 lines)
- [PointerMove Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/pointermove.md): These rules help generate pointer-driven interactions using `@wix/interact`. (271 lines)
- [ViewEnter Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/viewenter.md): This document contains rules for generating interactions that respond to elements entering the viewport using the `@wix/interact`. (232 lines)
- [ViewProgress Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/viewprogress.md): These rules help generate scroll-driven interactions using `@wix/interact`. (233 lines)
- [@wix/interact Plugin Rules](https://wix.github.io/interact/rules/plugins.md): Rules for extending `@wix/interact` with external plugins via `Interact.use()` and `$`-prefixed config fields. (140 lines)
- [All rules in one file](https://wix.github.io/interact/llms-full.txt): Complete concatenation (2781 lines)
llms-full.txt header
# @wix/interact v2.7.0 -- AI Rules Reference
# https://wix.github.io/interact/llms.txt
# 9 files, 2781 lines

Download full files from workflow artifacts, or run node scripts/generate-llms.mjs locally.

ameerf-wix and others added 6 commits November 4, 2026 17:13
…-and-design

# Conflicts:
#	CHANGELOG.md
#	packages/interact/src/core/Interact.ts
#	packages/interact/src/core/add.ts
- reducedMotionHandling / ReducedMotionHandling are now reducedMotionPolicy /
  ReducedMotionPolicy everywhere, docs included
- the validator's reduced-motion checks run last in each walk batch
- BODY_FIELDS is a plain array again
- the resolver's option and FullEffect types live in types/css.ts
- keyframe naming is back before the CSS-rules check, with resolveBody at
  module level

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…-dedupe

# Conflicts:
#	CHANGELOG.md
#	docs/reduced-motion-design.md
#	packages/interact/docs/api/types.md
#	packages/interact/rules/full-lean.md
Base automatically changed from reduced-motion-plan-and-design to master November 4, 2026 20:04

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant