Every Frame Perfect

While exploring the intricacies of Wayland, I encountered a philosophy that resonated deeply with me:

“A stated goal of Wayland is ‘every frame is perfect’.”

While the authors of Wayland were referring to the technical complexities of modern GPU stacks and the need for tighter control, this principle is equally applicable to User Interface (UI) design.

The Golden Rule of UI

The litmus test for a polished interface is simple: ~~If it looks okay at the end, it's fine.~~ If you take a screenshot of your application at any random millisecond, that frame must make logical sense.

Why Does This Matter?

Users do not have access to your source code; they cannot see your elegant abstractions or your optimized algorithms. Therefore, the UI is the sole proxy they use to judge the overall quality of the software.

$\text{Perceived Quality} \propto \text{UI Polish}$

If the interface is meticulously crafted, the user assumes the developers had the discipline and time to iron out the underlying code. Conversely, sloppy visuals suggest sloppy logic.

Common Pitfalls to Avoid

To achieve "perfect frames," developers should eliminate:

White Flashes: Sudden blank screens during transitions.
State Mismatches: For example, one UI element claiming 1 update available while another simultaneously displays Checking for updates....
Janky Animations: Transitions that look great at the start and end but collapse in the middle.

The Anatomy of a Bad Animation

A UI can appear flawless in its static states, yet feel "off" during the transition. If you suspect something is weird, it usually is.

When we apply the "screenshot rule" to the middle of an animation, the flaws become obvious.

Frame State	Visual Logic	Verdict
Start	Element A is at Position 1	✅ Perfect
Middle	Element A is teleporting or warping	❌ Broken
End	Element A is at Position 2	✅ Perfect

Real-World Examples of "Imperfect" Frames

Safari: In some views, placeholder text moves from the center, but the cursor animates from the left. While not catastrophic, it creates a subconscious feeling that the components are out of sync.
Apple Photos: When toggling between Crop and Adjust modes, the image snaps instantly, but the crop border animates. This creates a false impression that the image itself is subtly shifting.

When Technology "Outsmarts" the Programmer

Sometimes, animations are meant to guide the user, but they end up causing confusion. I've seen cases where a simple task—moving a rectangle from point A to point B—results in a bizarre, erratic movement.

This usually happens because of a technical limitation in the chosen architecture (like the DOM). I call this: "The technology has outsmarted the programmer."

// Example of a "clunky" transition logic
function moveElement(el) {
  // Instead of a smooth linear interpolation, 
  // the dev uses a series of awkward state jumps
  el.style.left = "10px"; 
  setTimeout(() => { el.style.left = "50px"; }, 100);
  // This creates "imperfect frames" in between
}

The result is a sequence of frames that are fascinating to watch specifically because they are so wrong.

Final Checklist for UI Polish

Before shipping a feature, run through this task list:

No flickering or white flashes between screens.
All UI labels are synchronized in real-time.
Animations are smooth when viewed at 0.25x speed.
Every intermediate frame passes the "screenshot test."

The takeaway: Do not just obsess over the destination (the end state) and the origin (the start state). Pay obsessive attention to everything in between.

As a final example of this phenomenon, consider the unprovoked zoom animation found in the Preview app...

About the Author I write about the intersection of programming and UI design. I also provide consulting services for Clojure (web, backend, Datomic, DataScript, and performance optimization).