Work 04
The Fold
About it
An experiment, not a client project. What if the logo was an object? The two planes of the Merova mark stand as sheets of paper under a light. Turn them and they catch the light differently. Look at them head on and they line up exactly into the logo.
Details
- Type
- Interactive experiment
- Built with
- CSS 3D transforms and a little JavaScript. No WebGL, no libraries.
- Input
- Drag, swipe, or the arrow keys
- Weight
- A few kilobytes of code
- Status
- Live in the home page hero
Try it
Fig. 01 The Fold
Two planes form the Merova mark. Drag sideways, or use the left and right arrow keys, to turn them. Press Home, or Line up, to see them line up into the logo. Press End, or Reset, to return to the resting angle of 18 degrees left.
What I did
- Each plane sits at its own depth, scaled to cancel perspective, so the head-on view is the exact logo.
- Light is worked out from the angle, so the paper brightens and darkens as it turns.
- The ground and shadow are drawn flat underneath, which avoids 3D sorting glitches in browsers.
- It works with a keyboard and a screen reader (it's a slider), and stays still for reduced motion.