Blur the overlap, then stagger

Layers that swap should blur into each other, then stagger in.

Rauno Freiberg@raunofreiberg
4 levels of motion choreography 1. Confusing overlapping layers 2. Blocking delay to avoid overlap 3. Blur filter to blend layers 4. Staggered blur fade
Sep 9, 2025View on X ↗
Rauno Freibergrauno.me
In my mind, choreography is deliberately orchestrating when something happens in a structured sequence.
Designing DepthRead article ↗

Both panes swap the same two panels. Pick a level on the left, then replay.

1 · Swap two panels

Pick a level on the left, then replay both.

Overlap or waitBad
Done in200ms
Blur, then staggerGood
Level 4Done in280ms
/* old layer: blur out fast */
.out { animation: out 120ms var(--ease-out) both; }
@keyframes out { to { opacity: 0; filter: blur(4px); } }
/* new rows: blur in, 30ms apart, starting while the old layer leaves */
.row { animation: in 160ms var(--ease-out) both; animation-delay: calc(30ms + var(--i) * 30ms); }
@keyframes in { from { opacity: 0; filter: blur(4px); } }

Why it matters, pros and cons

Why it matters

Two layers swapping is a sequence. Blur hides the seam, and a stagger orders what you read.

Pros

  • No ghosted text: blur blends the two layers instead of stacking them.
  • Nothing waits: the new layer starts while the old one is still leaving.
  • The stagger gives the eye an order to read in, top to bottom.

Cons

  • Blur costs paint time on big or busy surfaces; keep the radius small.
  • Four levels of polish is a lot for a panel nobody opens twice.
  • Past about 40ms per item, a stagger starts to feel like loading.