Designing interactions around a laptop hinge

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.

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:

1. Input: what movement or device state is available?
2. Mapping: how does that input become a position, amount, or visual parameter?
3. 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.

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.