Flip

Consultancy and prototyping of complex masked web page with differing designs either side of the angled, dividing line. For Norwegian design consultancy, Flip. Concept by Ole M Ødegaard.
Screen recording showing a working example of the Flip "mask" interaction concept

Flip was a Norwegian design consultancy (now defunct), and this was a consulting and prototyping engagement built around a concept from Ole M Ødegaard: an angled dividing line splitting the page in two, with hand-drawn versions of every element on one side and the finished designs on the other. Move the mouse and the line moves with it, dragging the mask across the whole page in real time.

Built with CSS masking, the effect is deceptively simple in concept and considerably harder to get right in practice, keeping every element perfectly aligned across both versions of the page, with the mask tracking smoothly and the angle staying consistent regardless of scroll position or viewport size.

It's an unusual brief, and one of the more interesting effects I've built. I haven't seen this particular technique implemented live anywhere else.