Skip to lesson
Exit
Motion, Interaction & Prototyping1 / 2

2 min lesson

Animation fundamentals & 60fps

Rebuild the sequence in "Animation fundamentals & 60fps" from memory, ending with the check that proves the outcome.

Step 1 of 2

Smooth motion is a budget problem. You have ~16.7ms per frame at 60fps and the difference between a Design Engineer and a front-end engineer is knowing exactly which CSS properties spend that budget cheaply.

Cursor runs in Electron, a Chromium renderer wrapped in a desktop shell. The browser does the same pipeline work it does on the web: style, layout, paint, composite. Animate the wrong property and you force the whole pipeline to re-run sixty times a second on a window that is already busy rendering a code editor.

THE RENDER PIPELINE PER FRAME

Interactive diagram. Step through it with the Next and Previous controls below, or Tab to a region to read its detail.

diagram: flow

The earlier a property change enters the pipeline, the more downstream work it forces every frame.