The Colour Morph
One garment in two colours. Pick the other one and the model morphs across the room to the far side, the layout mirrors, and the pager card wears the colour waiting next.
The Colour Morph is a product page for one garment in two perfect colours. The room is a quiet gallery, a huge serif word ghosted into the wall, sizes on the left, photographs on the right. Pick the other colour and the model does not fade into a new photo, he travels: stretching into the move, dissolving into the new colour mid air, and landing on the far side of the room while the words and price cross over behind him.
How it works
The page is a quiet gallery room that never changes its light: a huge serif word ghosted into the wall, a size rail on the left, the photographs in a column on the right, and one model in the middle. Each colour owns a side of the room, navy on the left and oxblood on the right. Choosing the other colour sends the model travelling: he stretches into the motion, blurs with the speed, and dissolves into the new colour mid flight before landing sharp on the opposite side, while the name, story and price cross over to the side he left. The only element that changes colour is the pager card at the bottom, which always wears the tint of the colour waiting next. The three photographs at the side hold the rest of the set, the garment laid flat, the back and a second angle, and any of them can take the stage with a click.
Who it fits
Built here for a fictional menswear label, it suits any product that ships in a small number of considered colours: knitwear and shirting, leather goods, eyewear, watches, furniture fabrics. It wants exactly one hero product with photography per colour, and it rewards restraint, two or three colourways beat ten.
Why it sells
Most colour pickers treat the decision as a thumbnail swap, which sells nothing. Giving each colour its own side of the room turns the choice into a place the visitor stands, and the morph in between gives the product the weight of a real object being carried across to them. Because the room never changes, the garment stays the only thing that does.
Recommended for
- Menswear and knitwear brands
- Two colour hero products
- Considered single product pages
- Premium basics
Common questions
What happens when the other colour is picked?
The model crosses the screen in one continuous move, dissolving from the current colour into the new one mid flight and landing on the opposite side. The words, price and sizes mirror to the other side at the same time, so the layout itself remembers which colour is on stage.
Why does the background never change?
Keeping the room constant makes the swap read as theatre rather than a page reload, and it keeps every colour honest under the same light. The tinted pager card at the bottom carries the colour signal instead, always showing the colour waiting next.
What are the photographs on the side for?
They are the rest of the set for the colour on stage: the garment laid flat, the back, and a second angle. Clicking one trades it with the photo on stage, so the whole set can be inspected without leaving the page.
Does this work with more than two colours?
Two colours give the cleanest version because each owns a side of the room. For three or more, the same morph travel works with the layout holding still, or paired with a swatch row. The motion language stays identical either way.