Blur-mask crossfades

When a crossfade double-exposes, blur both states 2px in transit.

Emil Kowalskiimprove-animations
A jarring crossfade that shows two overlapping states can be masked with subtle `filter: blur(2px)` during the transition.
AUDIT.md · Cohesion & tokensSeverity: LOW (polish)
Emil Kowalskiimprove-animations
Keep transition-time `filter: blur()` under 20px — heavy blur is expensive, especially in Safari.
AUDIT.md · PerformanceBudget: < 20px

From improve-animations: LOW-severity polish.

A button label: Save → Saved

Click either button, or pause at 50% to compare.

Plain crossfadeBad
transition: opacity 250ms
With blur(2px)Good
transition: opacity 250ms, filter 250ms
.label {
  grid-area: 1 / 1;
  transition: opacity 250ms var(--ease-out), filter 250ms var(--ease-out);
}
.label[data-hidden] {
  opacity: 0;
  filter: blur(2px);
}

How much blur

Switch the plan, then drag Blur.

Your valueMasked

$12/ month

  • Billed every month
  • Cancel anytime
filter: blur(2px)
Reference2px

$12/ month

  • Billed every month
  • Cancel anytime
filter: blur(2px)
.plan-face[data-hidden] {
  opacity: 0;
  filter: blur(2px);
}

Why it matters, pros and cons

Why it matters

At the midpoint both labels show at half opacity. A slight blur merges them.

Pros

  • One more property, no layout, no JS.
  • Works where states can’t morph.
  • Invisible at rest.

Cons

  • LOW-severity polish; fix easing and duration first.
  • Blur costs GPU per frame, worst on large areas.
  • Past about 4px it reads as out of focus.