Animation Duration
Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards.…
$ prime install @community/check-animation-duration Projection
Always in _index.xml · the agent never has to ask for this.
AnimationDuration [check] v1.0.0
Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards. Also flags linear easing on interactive elements.
Loaded when retrieval picks the atom as adjacent / supporting.
AnimationDuration [check] v1.0.0
Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards. Also flags linear easing on interactive elements.
signature: (css: string, context?: object) -> CheckResult predicate: // Animation/transition durations must fall within tasteful UI ranges: // - Micro-interactions (hover, focus, button press): 100–200ms // - State transitions (open/close, expand): 200–400ms // - Entrance/exit (page, modal): 300–600ms // - Anything > 800ms is suspect for UI feedback. // - Anything > 3s for non-decorative motion is a vestibular hazard. decls = parseCSS(css).filter(d => d.property === 'transition-duration' || d.property === 'animation-duration' || d.property === 'transition' || d.property === 'animation' ) for d in decls: durations = extractDurations(d.value) // returns array of ms for ms in durations: if ms === 0: continue if ms < 80: yield { selector: d.selector, prop: d.property, value: d.value, ms, fail: 'too-fast', range: '80-200ms for micro' } else if ms > 800 && ms <= 3000: // Acceptable for entrance animations only — but flag if applied to interactive feedback if /:hover|:focus|:active|button|input/i.test(d.selector): yield { selector: d.selector, prop: d.property, ms, fail: 'too-slow-interactive', max: 400 } else if ms > 3000: yield { selector: d.selector, prop: d.property, ms, fail: 'vestibular-hazard', max: 3000, severity: 'high' }
// Easing check — linear easing on UI interactions feels mechanical easing = extractEasing(d.value) if easing === 'linear' && /:hover|:focus|button/.test(d.selector): yield { selector: d.selector, fail: 'linear-easing-on-interactive', remedy: 'use cubic-bezier or ease-out', severity: 'warn' }
Validates
@community/rule-animation-duration
Severity
medium
Failure Message Template
Animation '{prop}' on '{selector}' is {ms}ms — {fail}. Recommended range: {range}. Adjust duration token --duration-* to a standard scale (150ms / 250ms / 400ms).
Evaluation Method
automated
Tools
- postcss
- regex
False Positive Rate
medium
Loaded when retrieval picks the atom as a focal / direct hit.
AnimationDuration [check] v1.0.0
Validates animation/transition durations fall within tasteful UI ranges (100–200ms micro, 200–400ms state, 300–600ms entrance) and flags durations > 3s as potential vestibular hazards. Also flags linear easing on interactive elements.
signature: (css: string, context?: object) -> CheckResult predicate: // Animation/transition durations must fall within tasteful UI ranges: // - Micro-interactions (hover, focus, button press): 100–200ms // - State transitions (open/close, expand): 200–400ms // - Entrance/exit (page, modal): 300–600ms // - Anything > 800ms is suspect for UI feedback. // - Anything > 3s for non-decorative motion is a vestibular hazard. decls = parseCSS(css).filter(d => d.property === 'transition-duration' || d.property === 'animation-duration' || d.property === 'transition' || d.property === 'animation' ) for d in decls: durations = extractDurations(d.value) // returns array of ms for ms in durations: if ms === 0: continue if ms < 80: yield { selector: d.selector, prop: d.property, value: d.value, ms, fail: 'too-fast', range: '80-200ms for micro' } else if ms > 800 && ms <= 3000: // Acceptable for entrance animations only — but flag if applied to interactive feedback if /:hover|:focus|:active|button|input/i.test(d.selector): yield { selector: d.selector, prop: d.property, ms, fail: 'too-slow-interactive', max: 400 } else if ms > 3000: yield { selector: d.selector, prop: d.property, ms, fail: 'vestibular-hazard', max: 3000, severity: 'high' }
// Easing check — linear easing on UI interactions feels mechanical easing = extractEasing(d.value) if easing === 'linear' && /:hover|:focus|button/.test(d.selector): yield { selector: d.selector, fail: 'linear-easing-on-interactive', remedy: 'use cubic-bezier or ease-out', severity: 'warn' }
Validates
@community/rule-animation-duration
Severity
medium
Failure Message Template
Animation '{prop}' on '{selector}' is {ms}ms — {fail}. Recommended range: {range}. Adjust duration token --duration-* to a standard scale (150ms / 250ms / 400ms).
Evaluation Method
automated
Tools
- postcss
- regex
False Positive Rate
medium
Validates
@community/rule-animation-duration
Severity
medium
Failure Message Template
Animation '{prop}' on '{selector}' is {ms}ms — {fail}. Recommended range: {range}. Adjust duration token --duration-* to a standard scale (150ms / 250ms / 400ms).
Evaluation Method
automated
Tools
- postcss
- regex
False Positive Rate
medium
Source
prime-system/examples/frontend-design/primes/compiled/@community/check-animation-duration/atom.yaml