← All work
Case study · Product motion

Dex Loader

Dex is an AI agent that handles IT support and admin work in Microsoft 365. When a company connects it, Dex spends a few minutes discovering their IT environment. I designed the loader for that wait, built from the Dex logo, and a tiny version of it for the chat.

Client
Dex
Role
Motion design
Scope
Logo loader · chat loader
Year
2026

The brief

Discovery runs while the user waits in onboarding, so the loader is one of the first things people see in Dex. The team wanted it to come from the logo, plus a second version small enough to sit next to a line of text in the chat.

The Dex logo is made of square blocks, so I looked at pixel art and 8-bit interfaces, where motion moves in clear steps instead of smooth glides.

Reference: pixel smiley and heart
Reference: pixel sparkles

References

The logo loader

The loader takes the Dex logo apart and puts it back together. A single block splits along a diagonal, the blocks assemble into the logo, and then they turn into app icons one at a time while discovery runs. At the end the logo turns black again and collapses back to one block, so the loop has no visible seam.

It runs at 12 frames per second, so the blocks move in visible steps, like pixel art. Each block holds still, then snaps to its next position.

One block split along a diagonalFrames 0–9One block splits
Blocks assembling into the Dex logoFrames 10–23The logo assembles
Coloured blocks streaming into the logoFrames 24–85Colour streams in
The logo in full colourFrames 86–97Full colour
The logo collapsing back to one blockFrames 98–109Back to one block

The chat loader

A second version for the chat, small enough to sit next to a line of text. It does the same thing with nine blocks on an 8 by 8 pixel canvas, so it still reads at the size of a letter.

64px
24px
8px, actual
SpecValue
frame rate12 fps
easingcubic-bezier(1, 0, 0, 1) · hold, then snap
logo loader600 × 400 · 110 frames · 9.2s loop
chat loader8 × 8 px · 9 blocks · a move every ~0.46s
formatLottie

In the product

Recorded in Dex’s onboarding: the logo loader fills the left panel while discovery runs, and the chat loader sits next to “Dexing…”.

Dex onboarding: discovered application policies Dex onboarding: apps connected Dex onboarding: 7 apps connected successfully

Screens from the onboarding flow

Outcome

Dex shipped both loaders in its onboarding. The recordings above are from the product.

ShippedIn Dex’s onboarding
2Loaders from one logo
12 fpsStepped, pixel-style motion