The project

We designed and built Hangar, a concept e-commerce page centred on a single bomber jacket available in five colours. The goal was to treat colour selection as a full-page experience rather than a row of thumbnail swatches.

The problem

Colour pickers that don't show you the colour

Most product pages treat colour as a metadata choice. You click a dot, the image swaps, and nothing else on the page acknowledges that anything changed. The jacket looks different but the page doesn't, so the colourway never gets its own moment.

We wanted each colour to feel like its own page — background, lighting, and atmosphere shifting together — without actually building five separate pages or losing the sense that it's one product.

The carousel

Recession, not rotation

The layout isn't a traditional carousel. Items sit on a perspective recession line toward a vanishing point in the upper right. Each step back is shorter than the last and each item scales down geometrically, so the queue converges instead of marching off the screen. The third jacket is deliberately cropped by the viewport edge.

The entire queue is driven by a single animated value. Scale, position, stacking order, shadow intensity and blur are all derived from it, so advancing by one step moves everything together without sequencing separate animations.

The turn

Two frames, not a 3D model

Each jacket exists as two photographs: a three-quarter angle used while it's in the queue, and a straight-on front view used when it reaches the hero position. The swap happens after the jacket has arrived and settled, not during travel, so it reads as the jacket turning to face you rather than as a crossfade.

A few degrees of real CSS perspective rotation run underneath the opacity change. Without that, even a well-eased dissolve reads flat. The rotation gives the eye something to track.

Page colour

The background is part of the product

Each colourway carries a lifted tint derived from the jacket's own dominant colour. When a jacket reaches centre, the base layer transitions and a fixed radial glow and vignette sit on top as neutral alpha overlays. This means only one CSS property animates per change, while the lighting structure stays intact across all five.

The text colour flips automatically based on the background's luminance, so the page stays legible without per-colour overrides.

Details

Grain, shadow, parallax, progress

A noise overlay breaks gradient banding and stops the background reading as a flat fill. Contact shadows under each jacket scale with depth and adjust opacity per colourway so they survive on both dark and light backgrounds.

Pointer parallax is weighted by queue depth — the hero swings while background items barely move, which is what makes the layout read as space rather than as a flat composition. A slow idle float keeps the queue alive between transitions.

The swatch row doubles as the autoplay clock. The progress ring around the active colour is the timer itself, not a separate animation running alongside it, so the two can never drift apart.