Press kit · Motion

The core is super. The frame is safe.

The orange core is the character. It looks, hops, thinks and sulks. The frame is the promise. It flexes when the core pushes, but the core never gets out. No face, no limbs: all the personality comes from timing and squash.

20 × 20 units

IdleWatching. Follows your cursor, breathes, blinks.

Keys 1–8 play each state. Drag the core and try to pull it out.

The rule

One rule keeps it playful and safe.

The core moves

Up to 4 units in any direction, squashing to half its height. It looks at whatever it's paying attention to.

The frame gives

When the core pushes, the nearest wall stretches and the stroke thins, like a membrane. Then it springs back.

Nothing escapes

Sparks can fly when something ships. The core itself never crosses the frame, in any state, at any size.

Wordmark entrance

For page loads and video bumpers.

The frame draws, the core pops in, then glances over at its name as it appears. About 1.8 seconds.

At real sizes

Quieter when it's small.

Small sizes get a subset: blinks, glances and the thinking loop. Hover or click each one.

Nav · 28 px

ResearchSuper BusinessSuper FamilyProducts

Blinks and follows the cursor. Hover the logo and it hops once. Live in the site header now.

Button · working

The thinking loop replaces a spinner. When the work lands, one hop. Used on the sign-up forms.

App icon · 64 / 32 / 16 px

64 px
32 px
16 px

Icon colors stay fixed on ink. Hover to lock. At 16 px it only blinks.

The crew

One mark per agent.

Each gets a slightly different tempo, so a room full of them feels alive. Click any of them, or run the whole room.

Motion spec

The numbers.

Units are the mark's own 20 × 20 grid, so the numbers hold at any size. Everything moves on springs, which is where the bounce comes from.

PartAllowedNever
CoreMove up to 4 units. Squash between 0.5 and 1.35. Rotate in 90° steps, which reads as rolling.Leave the frame. Change color. Grow a face.
FrameEdges flex up to 4 units when pushed. Stroke 2 units, thinning to 1.3 under stretch and thickening to 2.8 when locked.Rotate. Round its corners. Turn orange.
SpringsLook k 120 · d 14. Core scale k 520 · d 24. Frame k 260 · d 16. Body k 380 · d 22.Linear or ease-in-out tweens.
AmbientBreathe ±3% on a 3-second cycle. Blink every 2.2 to 5.8 seconds, sometimes twice.Blink while thinking or locked.
Under 24 pxBlink, glance, the thinking loop, and one smaller hop on hover.Super, sparks or sleep.
Reduced motionAmbient motion off. States still answer direct input like clicks.Autoplaying loops.
← Back to the press kit