# Reveal Blur Is Priced by Type Size
**SHOULD** · **ID:** `animations-text-reveal-scales-with-type` · **Category:** animations
**Source:** [animate-text](https://pixelpoint.io/skills/animate-text/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/animations-text-reveal-scales-with-type
> 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
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.
## Rule snippet
```tsx
const HERO = { blurPx: 12, staggerMs: 25, unit: "char" };
const BODY = { blurPx: 6, staggerMs: 15, unit: "word" };
```
## Bad — do not do this
`animations-text-reveal-scales-with-type-bad`
```tsx
import { useState } from 'react';
const HERO = 'Ship faster';
const BODY = 'Every component ships with tokens, tests, and documentation.';
// The reflex: one preset, copy-pasted. The hero numbers (12px blur, 25ms
// stagger, per-character) get applied to body copy without repricing anything.
const BLUR_PX = 12;
const STAGGER_MS = 25;
const DURATION_MS = 900;
export function TextRevealScalesWithTypeBad() {
const [run, setRun] = useState(0);
const shards = (text: string) =>
text.split('').map((char, i) => (
{char}
));
return (
{shards(HERO)}
{shards(BODY)}
{BLUR_PX}px of blur is about two stem widths on the heading but several times the
stem width of 16px body text — the paragraph is not softened, it is erased for most
of the {(DURATION_MS / 1000).toFixed(1)}s it takes each letter to resolve
);
}
```
## Good — do this
`animations-text-reveal-scales-with-type-good`
```tsx
import { Fragment, useState } from 'react';
const HERO = 'Ship faster';
const BODY = 'Every component ships with tokens, tests, and documentation.';
// Two presets, because the blur radius is absolute pixels and the stem width of
// the glyph is not. Below 24px the blur halves and the stagger tightens — and
// the unit coarsens, because smaller type means more units per line.
const HERO_PRESET = { blurPx: 12, staggerMs: 25, durationMs: 900 };
const BODY_PRESET = { blurPx: 6, staggerMs: 15, durationMs: 600 };
export function TextRevealScalesWithTypeGood() {
const [run, setRun] = useState(0);
return (
{/* pre-wrap keeps the space characters that per-character splitting turns
into their own collapsible inline-blocks. */}
{BODY}
{BODY.split(' ').map((word, i, all) => (
// Word gaps live between the tokens so the paragraph can still wrap.
{word}
{i < all.length - 1 ? ' ' : null}
))}
{HERO_PRESET.blurPx}px / {HERO_PRESET.staggerMs}ms per character on the heading,{' '}
{BODY_PRESET.blurPx}px / {BODY_PRESET.staggerMs}ms per word on the body — both stay
legible the whole way through, and the paragraph resolves in a third of the time