Rebuilding Curved Monitor Mockups with Real 3D GeometryRebuilding Curved Monitor Mockups with Real 3D Geometry
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Someone trying Perspecto asked for curved monitor mockups.
The first version was a CSS trick: squeeze the image, darken the edges, add a soft highlight. It shipped in under a day and looked right straight on. Turn the mockup and it fell apart.
So I rebuilt it as real geometry. The image now wraps onto a slice of a cylinder, and the edges bow correctly from any angle, in the editor and in every export.
Quick first version, then go back and do it properly. perspecto.io
Post image
Timothy's avatar
Quick first version, then go back and do it properly is a whole philosophy in one line. The cylinder slice approach is clearly the right call, the flat version falling apart at any other angle is exactly the kind of thing that erodes trust in a mockup tool. Was the rebuild...
Daniel's avatar
Mostly the math. The UI barely changed, it’s still one slider. The hard part was keeping it the same everywhere: in the editor the screen is about 48 thin strips placed in 3D, and the PNG, SVG and video exports all use that same curve so nothing drifts.
The surprise was the back....
Rafee 's avatar
Side by side, the curved version is clearly better. Good call going back to redo it.
Daniel's avatar
Thanks Rafee! Do you do much mockup work for your own projects? Always curious what people still find missing in these tools.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started