Mask Reveal

TransitionVanilla JS · zero dependenciesone growing radial mask

unlocked ✦

tap anywhere

-- fps

prefers-reduced-motion detected — no growing mask; instant swap

X-ray · layers

Maskthe circle grows to reveal (off = instant swap)

Ringa bright ring rides the mask's edge

Autoit reveals and covers on a loop (off = on click only)

Parameters

Speed900 ms

Hold1200 ms

Edge softness24 px

Easing2.4

your version · updates as you tinker

How this effect works

Two screens are stacked; the one leaving sits on top. To wipe it away, a single radial mask is applied to it — mask-image: radial-gradient(circle R at click, transparent, black). Inside radius R the top screen becomes see-through, so the screen below shows through a hole. Grow R from 0 to past the far corner and the hole eats the whole screen — the reveal is just one number climbing.

It starts from wherever you click, and R reaches the farthest corner so nothing is ever left uncovered. Easing shapes how R accelerates (a gentle ease-in-out at 2.4, snappier higher), edge softness is the feather between transparent and solid, and the ring is a bright circle pinned to the mask's edge for that "portal" look. Turn the mask off and it simply cuts, so you can see what the growing circle was buying you.

Production notes: respects prefers-reduced-motion (instant swap, no growth) · mask-image is compositor-cheap — no repaint of the content · click or tap to fire it yourself · the copied snippet is self-contained HTML + CSS + JS.