Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

animationsanimate-text

A Stagger Below One Frame Is Not a Stagger

MUST

MUST: Never set a per-unit stagger below ~16ms. One frame at 60Hz is 16.7ms, so a smaller delay quantizes multiple units onto the same paint and the cascade renders as a flash — you ship N elements and N animations for nothing. Hold the 16ms floor even though a 120Hz panel could resolve less, or the effect differs between displays. Floor 16ms, per-unit 22–95ms by unit type, total under 500ms.

Per-unit delays under ~16ms quantize onto the same frame — the cascade flattens into a flash no matter what number you typed

// bad — 8ms is half a frame; letters 1-2 start together
const STAGGER_MS = 8;
// good — clears the frame floor, total stays under the 500ms ceiling
const STAGGER_MS = 24; // >= 16.7ms (one frame at 60Hz)
// if units * STAGGER_MS > 500, coarsen the unit — do not shrink the delay

Bad

Good

Why it matters

The catalog's floor is not taste, it is the refresh rate. At 60Hz a frame is 16.7ms, so an 8ms stagger means the first two units begin on the same frame and the browser physically cannot render the difference you asked for. The cascade does not get subtler, it disappears — you pay the full cost of splitting the string, shipping N elements and N animations, and get a flash.

That is why the catalog's tightest per-character stagger is 22ms and its stated floor is 16ms, one frame. The tempting objection is that a 120Hz panel halves the frame to 8ms and would render it: that makes the situation worse, not better, because the effect then differs between the reviewer's laptop and the user's phone. Hold 16ms regardless of the display.

The other end of the window is animations-lottie-stagger-budget's 500ms total ceiling, and the pair defines the whole usable range: N units must fit between one frame each and half a second overall. When N is large enough that those two constraints cross, the answer is a coarser unit (animations-text-split-granularity), never a smaller delay. Distinct from animations-frame-budget, which is about how much WORK fits inside a frame — this is about the smallest DELAY a frame can express.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.