12 / Scroll-driven

Depth of Field

Only the band across the middle of the screen is sharp. Everything above and below it falls out of focus.

also called focus falloff · viewport-centre focus · scroll blur

A camera metaphor applied to a list: attention is a narrow band, and everything outside it recedes. Keep the blur under about 6px — past that it stops reading as focus and starts reading as a rendering fault.

How it is built

@keyframes focusband { 0%, 100% { filter: blur(4.5px); opacity: .34 } 46%, 54% { filter: blur(0); opacity: 1 } }