Obys translation
Reference studyA rebuild of the obys.agency index — three layout modes, a FLIP tumble between them, and a page that never scrolls.
- Owner
- Type
- Year
- Services
Reference study. This rebuilds the experience of obys.agency from scratch, to prove the engineering behind it. None of its code, assets or copy is used, and the design is not presented as original to this studio.
The problem
The first attempt measured the site in a single state and concluded it used one type size. It has three; the largest is parked below the fold behind a mask until hover, so a single-state measurement cannot see it. That build came out with no large type at all.
The approach
Measured again across every mode, every scroll position and every page. Three type sizes on a viewport-derived root, chrome that relocates per mode, a FLIP tumble with rotation through the middle, and an inner track transformed instead of a scrolling document.
In motion
Recorded from the live site. Muted, looping, and paused when it is off screen or when motion is reduced.
On a phone
The same page at 390px. Not the desktop layout scaled down — a recomposition, which is where most websites quietly fail.
The outcome
A study that produced a reusable lesson: screenshot every state before claiming a scale.