Designing interactions around a laptop hinge
The input was already there. It just needed a response.
UnfoldMyMacThe lidis the input.
A laptop hinge is an unusually good invitation to think about interaction. It already moves for a reason. It has a physical range. And the person using it does not need to learn a new gesture.
UnfoldMyMac began around that possibility: connect desktop effects to the MacBook lid. The app now includes lid effects, dynamic wallpapers, and creative scenes, with a native Swift, AppKit, and Metal implementation.
In short
- A hinge already moves for a reason, so it can drive an effect without a new gesture to learn.
- Think about the interaction in three parts: input, mapping and presentation.
- Show people what each effect responds to, and treat a running effect as something with a lifecycle.
Begin with the physical relationship
When an effect responds to a hinge, the relationship between movement and image matters more than an elaborate animation. If the lid moves a little, the visual response should make that movement understandable. If the lid stops, the effect should not seem to continue on an unrelated schedule.
That is a different design problem from a timed transition. A transition has a beginning and an end chosen by software. A physical input can reverse halfway through, pause, or arrive in small, uneven updates. The visual system needs a meaningful state for all of those moments.
A useful model of the interaction
I think about the experience in three parts:
- Input: what movement or device state is available?
- Mapping: how does that input become a position, amount, or visual parameter?
- Presentation: how does the result appear without fighting the desktop?
Separating those questions makes the behaviour easier to reason about. A rendering change need not redefine the input. A different device capability need not mean inventing a new visual language.
This is a design model, rather than a claim that every effect uses the same implementation. The UnfoldMyMac source has the details of the current native app.
Try the physical relationship.
Drag the lid vertically. Flick to finish the movement. The artwork keeps playing behind the curtains, just as it does in the original website demo.
Drag down to close. Flick up to open. The curtains follow your hand.
Live wallpapers from UnfoldMyMac. The counters in the artwork are examples.
Let people see what a design does
A still image explains appearance, but it does not explain an interaction. A person choosing a lid effect needs to understand the relationship to movement. A person choosing a wallpaper needs to know whether it reacts to a different input or behaves independently.
So the UnfoldMyMac library has to show a preview and say what each effect responds to. The question is not simply “Do I like this picture?” It is also “Do I want my desktop to behave like this?”
Motion has a lifecycle
A delightful effect is still a running system. It has resources to manage and moments when it is no longer visible. Its behaviour around closing, reopening, and changing context is part of the design.
That concern carries into this portfolio. The machine has short responses to a person’s selection, and the page remains useful without them.
Follow the small question
What interested me was noticing a control already present in the object, rather than adding another to a screen. Following that question led from a laptop hinge into native rendering and a collection of effects.
Talk to me on LinkedIn