On this page
The phones in Upglow’s portfolio are interactive 3D models. The difficult part is not making a phone rotate. It is making the whole section feel understandable while someone scrolls, pauses or changes direction.
Let scroll choose. Let the transition finish.
The gallery treats scrolling as a request to see another project. Once a transition starts, its own clock carries it through. It does not stop halfway just because the visitor stops moving a finger.
In this implementation, a phone handoff takes 2.2 seconds. A short reading pause follows before a queued destination can take over. Those values belong to this gallery; the useful principle is to separate the visitor’s request from the transition’s timing.
Keep something to look at.
All five projects share one pinned stage. The outgoing and incoming devices overlap during the handoff so the gallery does not intentionally cut to an empty black screen between projects.
The next cover must be ready before its transition begins. If a visitor scrolls quickly through several projects, the gallery keeps the latest requested destination and finishes the current flight before continuing. A small directional buffer prevents tiny scroll changes from repeatedly switching the target.
The fallback is part of the design.
A static phone appears while the model is loading. It follows the same movement as the 3D version, and it stays in place until the first 3D frame has actually been drawn. That keeps loading from becoming a visible jump.
Reduced-motion and data-saving visitors receive the static reading state. The project name, status and Explore link remain available. A 3D effect is an enhancement; the work itself still needs to be accessible without it.
Inspect the journey, not only the end frame.
A screenshot of a centred phone cannot tell you whether it arrived smoothly. For this kind of interface, test a slow scroll, a fast jump, a pause halfway through and a reversal before the current transition finishes.
Also inspect the first load and the boundary where the gallery gives way to the next section. The layout must make room for captions and controls throughout the movement, especially on a small screen. Desktop browser checks do not replace testing on physical phones.