Motion Duration Fast
150ms
$ aoe install @community/value-motion-duration-fastProjection
Always in _index.xml · the agent never has to ask for this.
motion-duration-fast [value] v1.0.0
Loaded when retrieval picks the atom as adjacent / supporting.
motion-duration-fast [value] v1.0.0
Constant
150ms
Type
css-duration
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
:root {
--motion-fast: 150ms; /* hover, focus, button press, ripple, color transition */
--motion-base: 250ms; /* default ease for entering/exiting components */
--motion-medium: 350ms; /* drawer slide, modal entrance */
--motion-slow: 500ms; /* page-level transitions, accordion expand */
--easing-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* enter, ease-out */
--easing-in: cubic-bezier(0.4, 0.0, 1.0, 1); /* exit, ease-in */
--easing-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* both ends */
}
/* Hover/focus/press */
.button {
transition:
background-color var(--motion-fast) var(--easing-out),
box-shadow var(--motion-fast) var(--easing-out);
}
/* Reduced motion — kill durations */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-fast: 1ms;
--motion-base: 1ms;
--motion-medium: 1ms;
--motion-slow: 1ms;
}
}
Variants
- Apple HIG: 100-150ms for state changes (button press, switch toggle)
- Material 3: M3 motion tokens — short1: 50ms, short2: 100ms, short3: 150ms, short4: 200ms
- Carbon IBM: fast-01: 70ms, fast-02: 110ms, moderate-01: 150ms
- Linear App: ui-fast: 80ms, ui: 150ms, ui-slow: 280ms
Loaded when retrieval picks the atom as a focal / direct hit.
motion-duration-fast [value] v1.0.0
Constant
150ms
Type
css-duration
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
:root {
--motion-fast: 150ms; /* hover, focus, button press, ripple, color transition */
--motion-base: 250ms; /* default ease for entering/exiting components */
--motion-medium: 350ms; /* drawer slide, modal entrance */
--motion-slow: 500ms; /* page-level transitions, accordion expand */
--easing-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* enter, ease-out */
--easing-in: cubic-bezier(0.4, 0.0, 1.0, 1); /* exit, ease-in */
--easing-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* both ends */
}
/* Hover/focus/press */
.button {
transition:
background-color var(--motion-fast) var(--easing-out),
box-shadow var(--motion-fast) var(--easing-out);
}
/* Reduced motion — kill durations */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-fast: 1ms;
--motion-base: 1ms;
--motion-medium: 1ms;
--motion-slow: 1ms;
}
}
Variants
- Apple HIG: 100-150ms for state changes (button press, switch toggle)
- Material 3: M3 motion tokens — short1: 50ms, short2: 100ms, short3: 150ms, short4: 200ms
- Carbon IBM: fast-01: 70ms, fast-02: 110ms, moderate-01: 150ms
- Linear App: ui-fast: 80ms, ui: 150ms, ui-slow: 280ms
Relations
related: [@community/value-focus-outline-width, @community/value-touch-target-min, @community/type-design-token, @community/rule-cls-budget, @community/anti-pattern-decorative-spinning]
Rationale
150ms is the canonical 'fast' UI motion duration: long enough to be perceived as a transition (>100ms perceptual threshold) and short enough to feel responsive (<200ms Doherty threshold). Apple HIG, Material Design 3, IBM Carbon, and Adobe Spectrum all converge on 100-150ms for hover, focus, and micro-state changes. Going faster (<100ms) skips perception entirely and feels like a glitch; going slower (>200ms) makes hover-state stutter and feels sluggish.
Constant
150ms
Type
css-duration
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Usage
:root {
--motion-fast: 150ms; /* hover, focus, button press, ripple, color transition */
--motion-base: 250ms; /* default ease for entering/exiting components */
--motion-medium: 350ms; /* drawer slide, modal entrance */
--motion-slow: 500ms; /* page-level transitions, accordion expand */
--easing-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* enter, ease-out */
--easing-in: cubic-bezier(0.4, 0.0, 1.0, 1); /* exit, ease-in */
--easing-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* both ends */
}
/* Hover/focus/press */
.button {
transition:
background-color var(--motion-fast) var(--easing-out),
box-shadow var(--motion-fast) var(--easing-out);
}
/* Reduced motion — kill durations */
@media (prefers-reduced-motion: reduce) {
:root {
--motion-fast: 1ms;
--motion-base: 1ms;
--motion-medium: 1ms;
--motion-slow: 1ms;
}
}
Variants
- Apple HIG: 100-150ms for state changes (button press, switch toggle)
- Material 3: M3 motion tokens — short1: 50ms, short2: 100ms, short3: 150ms, short4: 200ms
- Carbon IBM: fast-01: 70ms, fast-02: 110ms, moderate-01: 150ms
- Linear App: ui-fast: 80ms, ui: 150ms, ui-slow: 280ms
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/value-motion-duration-fast/atom.yaml