The site’s character.
Three tracks, one kept.
The lab shows how we explore before we build. First exploration: the character of this site, from three animated sketches to the one that now accompanies the reading of the home page.
The manifesto explains; the home page had to show it.
A small machine, drawn from the G and M of the monogram, assembled by hands and then building in turn. The human stays abstract: just hands.
Before putting one on the home page, we animated three, end to end, to compare them gesture by gesture.
The three tracks, at the same pace.
The four moments arrive at the same time in all three scenes: the hands, the awakening, the action, the end. A way to compare the gestures, moment by moment.
SAME PACEEach track speeds up or slows down to reach its key poses at the same time as the others.
A. The G wakes up
The G is the machine. The M is what it builds.
- Two hands set a G on the page’s line. It is still inert.
- An eye lights up in its hollow. It straightens up and looks at the page.
- It moves forward in small hops. Its bar stretches like an arm, grabs a block and sets it down: a page element builds up.
- At the bottom of the page, it sets the last blocks down: they form an M next to it. GM is complete.
The simplest and the most endearing. Risk: a ball with an eye can turn into a mascot.
ANIMATION21.0 s loop, 122 elementary steps. Without animation, the scene shows frame 02, “An eye lights up”.
FRAME 02Step 11 of 44: It looks at the page
The scenario, step by step
Player shortcuts: K or Space play and pause, J and L one second, , and . frame by frame, 1 to 4 key poses.
B. The G on the M
The M is the body and legs. The G is the head.
- Two hands set a G on an upright M. Two still letters.
- The eye lights up in the G: the head wakes up. The M rises on its legs.
- It walks from one section to the next, rocking from one foot to the other. The bar of the G serves as an arm to carry a block.
- It stops at the bottom of the page, in front of what it has built, and looks at the visitor.
The most of a character. Risk: the walk needs the most care to look neither mechanical nor comic.
ANIMATION15.8 s loop, 70 elementary steps. Without animation, the scene shows frame 02, “The head wakes up”.
FRAME 02Step 12 of 35: It looks at the page
The scenario, step by step
Player shortcuts: K or Space play and pause, J and L one second, , and . frame by frame, 1 to 4 key poses.
C. The pieces
The monogram as a kit: the G, two legs and a V (the M cut apart). The hands assemble the machine piece by piece.
- On the page, pieces lie on the line: a G, two legs and a V.
- The hands assemble them: the legs first, then the V between them, then the G on top.
- With the last piece in place, an eye lights up. The machine builds in turn, as in track B.
- At the end, it comes apart and its pieces pack into GM: the machine becomes the logo again.
The best opening story: the human builds the machine. Risk: it is B with a longer opening, so the longest to animate.
ANIMATION20.6 s loop, 79 elementary steps. Without animation, the scene shows frame 03, “It lights up”.
FRAME 03Step 17 of 31: It lights up
The scenario, step by step
Player shortcuts: K or Space play and pause, J and L one second, , and . frame by frame, 1 to 4 key poses.
Track B, the G on the M.
The most alive, the one whose walk demands the most care. It now accompanies the reading of the home page: in each section, it walks in along the line that closes it and makes its gesture, once, at its own pace.
- 01Opening: it wakes up
- 02What we do: three blocks
- 03Work: four cards
- 04Technology: plugged into the line
- 05Manifesto: it looks up
- 06Contact: it packs into GM
One rig, key poses, lists of steps.
A single rig draws every frame. Each animation is a list of steps that passes exactly through its key poses; a test checks it on every change.
Motion stays decorative: the text reads without it, and without JavaScript. It stops if your system asks to reduce motion, and the engine only loads when a scene needs it.
3 tracks · 12 key poses · 271 steps · 6 scenes on the home page
What shall we build?
Software, a website, an application or a training: tell us what you want to do.
Write to us directly by email.