Reveal Blur Is Priced by Type Size
SHOULD: Reprice a text reveal for the type size it lands on. Hero (48px+): blur up to 12px, 25ms stagger, per-character. Body (<24px): blur 6px, 15ms stagger, per-word. Never copy a hero preset onto body copy — an absolute blur radius that softens a 5px stem erases a 1.5px one.
A 12px reveal blur that reads as premium on a 48px hero erases 16px body text — halve the blur and the stagger with the type
const HERO = { blurPx: 12, staggerMs: 25, unit: "char" };
const BODY = { blurPx: 6, staggerMs: 15, unit: "word" };Bad
Good
Why it matters
Blur radius is in absolute pixels; the stroke width of a glyph is not. On a 48px headline the stems are roughly 5px wide, so a 12px blur displaces each edge by about two stem widths — the letter is soft but still a letter, which is exactly the Apple-keynote effect the spec is after. Drop the same 12px onto 16px body text whose stems are nearer 1.5px and the glyph is gone: not blurred, erased, for most of the 900ms it takes to resolve.
The catalog therefore halves both knobs below 24px, blur to 6 and stagger to 15, and that pairing is deliberate — smaller type means more units per line, so the cascade has to tighten as well. IMPORTANT — 12px is over the ≤8px ceiling in performance-ibelick-no-blur-animation, and it is licensed rather than exempt: that rule prices radius, AREA and duration together, and a hero title is one short strip of text animating once, small in two of the three variables.
Body text is where you lose both arguments at the same time — you are over the performance threshold and under the legibility one. The 300ms ceiling in animations-emil-duration-budget does not bind a 900ms hero reveal either, because that rule exempts marketing and explanatory motion as content; it binds again the moment the effect is applied to interface text like a label, a table cell, or a toast.