The Turn

A name that reads the same in a mirror

pOqpOq is a doubled word: pOq, then pOq again. Said out loud it's a sound, pock pock, like a knock on a door or a ball bouncing. Held up to a mirror it still reads the same, because p and q swap places in a reflection and the round O sits on the hinge. That visual echo is a big part of why we chose the name.

The name also has two spellings. The brand is pOqpOq, with big O's. The address you type is poqpoq.com, all lowercase. The turn teaches both without a word of explanation. At rest the logo reads poqp🦊q: a true lowercase o, then the fox as the second o. When it turns, the fox swaps to the left and the small o springs up into the big O, p🦊qpOq. On the way home the big O lands on the left and shrinks back into a small o.

Why we didn't just flip it

The obvious way to mirror something on a web page is a single CSS transform. We tried it in the study, and it had two problems. The fox turned with it, so every nod and head tilt played the wrong way round. Faces played backwards feel wrong even when you can't say why. And in our typeface a mirrored p is close to a q but not quite the same letter, which you notice at rest.

So the logo squeezes shut to nothing, swaps sides with real letters at the midpoint, and opens again with a little overshoot. It reads as a turn, the letters stay real, and the fox keeps facing the way it faces.

The beats

This is classic squash and stretch. The shrink lands with two hops, a big one and a small one. That's the name's own sound: pock, pock. Tap any frame to open it in the player.

The grow: the small o springs into the big O

The shrink: the O lands on the left and the word comes home

The pop we hid

A shrunken capital O is not the same shape as a lowercase o. Its stroke is thinner and its hole is bigger. In the first version the O shrank, came to rest, and then swapped to the real o, and you could see the hole snap. It was caught on the first review.

The fix is an old animator's trick: change the drawing during the most extreme pose, when the eye is following the motion. The swap now happens on the flattest frame of the squash, and on the way back at the bottom of the crouch. Here are the two frames either side of the shrink's swap. The letter changes, and the motion values are identical:

// [offset, font size (em), lift (em), scaleX, scaleY]
// phase a ends: a capital O, shrunk to small-o height, squashed flat
[1,   0.74, 0, 1.32, 0.64]
// phase b begins: a true lowercase o, the very same squash
[0,   1,    0, 1.32, 0.64]

A test pins that rule, so the pop can't sneak back in.

Symmetry, with a wink

The fox follows the same idea as the letters. Every face is drawn as a left half reflected into a right half. The wink is the one deliberate break in the mirror, and it's the face the logo shows when it wants to look like itself.

House rules

• The first turn comes 6–10 seconds after the page opens, then one every 20–40 seconds.
• Click the letters to make it turn yourself.
• If your system asks for reduced motion, the logo stays still at rest.
• The still that shows before the app loads is a faint watermark, so the live logo gets the entrance.

How these frames were made

Screenshots taken in real time can't keep up with 60 frames a second, so frames go missing and the timing smears. Instead we loaded the shipped wordmark code on a plain page and ran it on a virtual clock. A fake clock drives the timers, and every animation is paused the moment it's created, then stepped by hand one sixtieth of a second at a time. We also pinned the fox's random moods for the capture. On the first try it pulled an angry face right after the laugh. The first draft of this page also played at about twice the real speed, because the fake clock kept ticking in real time between steps. Now the clock is frozen and only moves when we step it, so the whole shrink takes its true 1.7 seconds.