properties
changelog

@motion Mixin

Use @motion mixin for respecting user motion preferences.

Usage:

.any-class {
	/* direct */
	@motion <variant> { ... }
}

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  mixins: {
    motion: {
      variants: {
        safe: "@media (prefers-reduced-motion: no-preference)",
        reduce: "@media (prefers-reduced-motion: reduce)",
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at:

Match MixinScreen Mixin