Retail website concept · NIMBUS
The Depth Switch
One phone case, four colours. Pick a colour and the ring of cases turns: the one on screen slides away and blurs while the next arrives from the back and snaps into focus, the whole page changing colour with it.
This is the real website, not a video. Scroll inside it and watch the lineup move.
A colour picker is the most common control on a product page and usually the least felt: a swatch changes an image and nothing else happens. This concept makes the choice physical. The case you are looking at slides back and softens out of focus, the one you chose comes round from behind and sharpens, and the whole page turns that colour with it. It borrows the language of a camera, not a carousel.
How it works
The four cases sit on one stage with real CSS perspective, and only their poses change. The active case is at the front, sharp and large. The next colour waits small and out of focus at the top right edge, and the previous one sinks away at the bottom right, so the hero always looks like a shelf with depth rather than a slideshow. The four slots form a ring: front, bottom right, far back, top right. Choosing a colour turns the ring one slot, so the front case slides down to the bottom right while a blur filter grows on it, which is what a real lens does when something leaves the plane of focus, and the case waiting at the top right travels to the front with its blur falling to zero as it lands. A jump of two colours is two quick turns, so the cases always travel the ring rather than teleport. The page background, the soft aura behind the case, the colour name, the progress bar and the shop further down all switch to the new colour together. The whole thing is four cut out PNGs and a handful of classes, so adding a fifth colour is one image. The type follows Apple's product pages: the system display face at semibold with tight tracking, 17px body, dark grey ink and a blue pill button.
Who it fits
The demo is a fictional phone case brand, NIMBUS, with one product in four colours. The hero carries the depth switch with the swatches, the keyboard and a swipe all driving it; a slow showcase cycles the colours until the visitor takes over. Below it sit Apple style feature tiles, a shop that puts the chosen colour first, and a spec table. All product photography was generated in house as a matched set.
Why it sells
Colour is the decision on a case, a pair of headphones, a bottle or a shoe. When choosing a colour feels like turning the object in your hands, people try more of them and stay longer, and the colour they leave on screen is the one the shop offers first. The effect is light: four images, no video, no 3D engine, so it loads instantly and runs on a phone.
Common questions
Is the case a 3D model?
No. Each colour is one transparent PNG. The depth comes from CSS 3D transforms with perspective and a blur filter that grows as a case moves away from the plane of focus, so it reads as a camera racking focus between real objects without any WebGL.
Why does the leaving case blur as it slides away?
Because that is what a lens does. When the front case slides back to its slot it leaves the focal plane and softens, and the arriving case sharpens as it lands in that plane. The eye reads it as a ring of real objects turning rather than a page transition.
What changes when a colour is chosen?
Everything that should. The background tint, the aura behind the case, the colour name beside the product, the progress counter and the swatch ring all move together, and the shop below reorders itself so the chosen colour leads the row with a Your pick label.
Does it work on a phone?
Yes. The case sits below the words, the waiting colours peek in at the edges, and a swipe or a tap on a swatch changes colour. The shop and the feature tiles stack into one column.