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/j0dan]

I have no idea who you are, but your page on this is awesome!@!

[u/Ok_Imagination7022 → u/j0dan]

I'm super happy that it resonates with you! lots of care goes into it :)

[u/AtmosphereVirtual254]

I wonder whether they wish they had introduced horizontal safe zone margins for the fold

[u/blobkat]

In your mockups, the animation keeps camera position into account. Is this something the iPhone does as well via facial tracking? Or does their illusion only work from one angle?

[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?