Motion

The logo comes in like a blind. The floor shape comes down the wall first, folds onto the floor, and the M follows it. In the site bars, this plays one time for each visit. On a page, it plays when half of the logo is on the screen.

On /logo, you can drag the shadow to move the light. When you release it, the light springs back. Only the logo springs have a small bounce. For a full-screen intro, use the page loader.

Interaction

An interaction is a change to something that is already on the screen. It uses a CSS transition, one curve and two speeds. Use 150ms for a change of colour and for a press. Use 250ms for a larger change, as a change of size.

The curve starts fast and settles slowly. Two thirds of the change occurs in the first fifth of the time. Thus the change is complete before your eye gets to it.

When you press a button, it becomes 96% of its size. Never make it smaller than 95%.

Entrance

An entrance is something that arrives. It uses a spring with no bounce, so it slows into its position. A section title rises 20px into its position. The text under it only fades in, because a large block that moves pulls attention away from the words.

The image carousel moves slowly and continuously. It stops when your pointer is on it, and Pause stops it fully. When a person asks for less motion, it does not move.

Usage