fade

Fades opacity only. Overlays, backdrops, and anything where movement would distract.

Use it

data-motion="fade"

What it sets

The preset only declares these. Everything else, duration and easing included, comes from the shared tokens, so overriding a token restyles every preset at once rather than one of them.

[data-motion~="fade"] {
  --motion-from-opacity: 0;
}

Composition

Composes with slide-up. Combine them with a space.

data-motion="fade slide-up"

Hosts

The same attribute across every host it supports. You never choose the mechanism; the host's own state attributes do.