# Mask Imperfect Crossfades with Blur
**SHOULD** · **ID:** `animations-emil-blur-crossfade` · **Category:** animations
**Source:** [Emil Kowalski](https://emilkowalski.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-emil-blur-crossfade
> SHOULD: When a crossfade still reads as a ghosted double exposure, add a small transition-scoped `filter: blur(2px)` (2–4px, single element, only for the duration of the transition, always < 20px) so the two states fuse into one morph. This is the narrow carve-out from "never animate blur", which targets large, long-lived, or continuously-animating blurs — stay especially conservative in Safari.
Add a small blur to a crossfade so two overlapping states read as one transformation, not a double image
In a straight opacity crossfade both layers sit near 50% at the midpoint and stay separately legible, so the user perceives a ghosted double exposure rather than a change. A 2px blur on the outgoing layer destroys its legibility exactly where the overlap happens, and the eye fuses the two into a single morph. Note the tension with the blanket "never animate blur" performance rule: that rule targets large, long-lived, or continuously-animating blurs, which force expensive re-rasterization. A small (2–4px), short, transition-scoped blur on a single element is the deliberate carve-out — stay well under 20px, and be especially conservative in Safari.
## Bad — do not do this
`animations-emil-blur-crossfade-bad`
```tsx
import { useState } from 'react';
const PANELS = [
{ label: 'This week', value: '1,204 deploys' },
{ label: 'This month', value: '8,930 deploys' },
];
/**
* Bad: a straight opacity crossfade. Mid-transition both layers are ~50%
* opaque and perfectly legible, so the user sees two states double-exposed
* instead of one state becoming another.
*/
export function EmilBlurCrossfadeBad() {
const [index, setIndex] = useState(0);
return (
{PANELS.map((panel, i) => (
{panel.label}{panel.value}
))}
Both numbers stay readable at the halfway point — you see a ghosted double image, not a change
);
}
```
## Good — do this
`animations-emil-blur-crossfade-good`
```tsx
import { useState } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
const PANELS = [
{ label: 'This week', value: '1,204 deploys' },
{ label: 'This month', value: '8,930 deploys' },
];
/**
* Good: the outgoing layer picks up a 2px blur (and a hair of scale) while it
* fades. The two states stop being separately legible at the midpoint, so the
* eye reads one transformation instead of two overlapping panels.
*
* Keep the blur small (well under 20px) and scoped to the transition — a large
* or long-lived blur is genuinely expensive to rasterize, especially in Safari.
*/
export function EmilBlurCrossfadeGood() {
const [index, setIndex] = useState(0);
const reduced = useMediaQuery('(prefers-reduced-motion: reduce)');
return (
{PANELS.map((panel, i) => {
const active = index === i;
return (
{panel.label}{panel.value}
);
})}
A 2px blur on the outgoing layer masks the overlap — the two states merge into one perceived change