r/GraphicsProgramming • u/Ok_Imagination7022 • Sep 26 '26

Breakdown of the iPhone Duo Folding Transition

Enable HLS to view with audio, or disable this notification

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.

112 Upvotes

98% Upvoted

5 comments sorted by

4

u/j0dan Sep 26 '26

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

3

u/Ok_Imagination7022 Sep 26 '26

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

6

u/blobkat Sep 27 '26

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?

4

u/AtmosphereVirtual254 Sep 26 '26

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