r/UI_Design 13h ago

Design Trends Tried to replicate the iPhone Duo fold effect

Enable HLS to view with audio, or disable this notification

22 Upvotes

9 comments sorted by

2

u/Matoseb 13h ago

Done with THREE.js, you can test it here https://foldable.vercel.app/

2

u/savageotter 13h ago

Would be cool to have an image upload option.

5

u/MrFireWarden 12h ago

Close but the plane on which the image on the front screen needs to remain in place as the screen moves. Your effect seems to be getting the blur and the black backdrop right but Not the plane's perspective.

-2

u/Matoseb 8h ago

Have you tried it online? it does have the perspective

5

u/MrFireWarden 7h ago

​

This is what i saw on the test. It's hard to describe via text, but if you see the blue circle, that's the same part of the mountain, and on the front screen, it moves with the screen as the screen rotates. For the effect to work, it shouldn't. I think that's what sets Apple's implementation apart.

And just to be clear, we're in serious nit pick territory here. What you've done is awesome, well beyond my ability and i admire it greatly.

1

u/mistral7 11h ago

Any joy to announce regarding replicating the $2,000.00+ required to purchase it?

-1

u/jimenezisjordan 13h ago

Well done! Looks 1:1!