One motion personality

Express one personality through shared easing and duration tokens.

improve-animationsAUDIT.md · Cohesion & tokens

Motion should match the product's personality — playful can be bouncier, a dashboard stays crisp. Mismatched personality across components is a finding.

Severity: LOWSkill rule catalog

improve-animationsAUDIT.md · Cohesion & tokens

Curves and durations should live as shared tokens. Five hand-typed cubic-beziers that almost match is a consolidation finding.

Hunt for: one bouncy component in a crisp app

find-animation-opportunitiesSKILL.md · Recon

existing easing/duration tokens (suggestions must extend these, not invent parallel ones), and the product's personality — a crisp dashboard earns fewer and subtler suggestions than a playful consumer app.

Workflow step 1Skill rule catalog

From improve-animations: token drift is a LOW finding.

One bouncy dropdown

Play the sequence, or use either dashboard yourself.

Dropdown bounce 0.5

Dropdown's own springFinding

Revenue

Collected: $184,220
Open AR: $41,905

transform 1060ms spring(bounce 0.5)

All on tokensGood

Revenue

Collected: $184,220
Open AR: $41,905

transform 200ms var(--ease-out)

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 200ms;
}
.tabs-thumb, .menu, .toast {
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

Five curves that almost match

Run it, consolidate, run again. Try slow motion.

Consolidate to token

As foundFinding

finish spread 70ms

Overlaidhand-typed --ease-out

Same kit, two personalities

Play both, then tune Playful. Components only read tokens.

Playful bounce 0.3 Playful duration 300ms

Crisp · financeNo bounce · 180ms

--motion-ease: var(--ease-out);
--motion-duration: 180ms;

Playful · consumer appBounce 0.3 · 300ms

.switch-thumb, .heart svg, .menu {
  transition: transform var(--motion-duration) var(--motion-ease),
              opacity var(--motion-duration) var(--ease-out);
}
[data-personality="crisp"]   { --motion-ease: var(--ease-out); --motion-duration: 180ms; }
[data-personality="playful"] { --motion-ease: var(--ease-spring); }

Why it matters

When one component springs and the rest glide, it reads as a bug.

Pros

One edit retunes the whole product.
Grep finds every animation by token.
New motion stays consistent by default.

Cons

LOW severity: fixes nothing a user reports.
Different jobs need different curves; merge only true duplicates.
An app-wide curve swap changes feel everywhere at once.