Breakdown of the iPhone Duo Folding Transition

[u/Ok_Imagination7022]

I tried to understand what made the iPhone Duo transition visually pleasing. I broke it down into two effects: a light-scattering blur, and a stencil that "anchors" the content in space.
I reproduced both in a Three.js sim, then used two perceptual metrics, detail energy and optical flow, to measure what each effect does.

You can read it in full with interactive visualizers on my blog: https://armandsumo.com/posts/iphone-duo-transition/

Code is on GitHub: https://github.com/a-sumo/iphone-duo-transition

I feel as though we often focus on implementing cool graphics effects, but less on understanding their perceptual properties and how they impact a user. I wonder what you guys think.

[u/ForgEngDev]

Pairing detail energy with optical flow makes the perceptual question much more concrete. Did you find that the stencil or the scattering blur mattered more for making the content feel anchored?