Skill Wiki
Easing Curves
Canonical easing + duration token set as CSS custom properties. Drop into :root and reference everywhere — eliminates the magic-number cubic-bezier copy-paste that plagues most codebases.…
$ prime install @impeccable/template-easing-curvesProjection
Always in _index.xml · the agent never has to ask for this.
EasingCurves [template] v1.0.0
Canonical easing + duration token set as CSS custom properties. Drop into :root and reference everywhere — eliminates the magic-number cubic-bezier copy-paste that plagues most codebases. Six curves cover 95% of UI motion needs.
Loaded when retrieval picks the atom as adjacent / supporting.
EasingCurves [template] v1.0.0
Canonical easing + duration token set as CSS custom properties. Drop into :root and reference everywhere — eliminates the magic-number cubic-bezier copy-paste that plagues most codebases. Six curves cover 95% of UI motion needs.
Language
css
Body
<style>
:root {
/* Easing curves — pick by intent, not aesthetics */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Confident exit; default for entrances */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard; balanced */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Playful overshoot; toasts, tooltips */
--ease-decel: cubic-bezier(0, 0, 0.2, 1); /* Decelerate; arriving content */
--ease-accel: cubic-bezier(0.4, 0, 1, 1); /* Accelerate; departing content */
--ease-linear: linear; /* Progress bars only — never UI */
/* Duration scale — tighter at the bottom */
--duration-instant: 80ms; /* Press feedback */
--duration-fast: {DURATION_FAST};
--duration-base: {DURATION_BASE};
--duration-slow: {DURATION_SLOW};
--duration-slower: 600ms; /* Page-level transitions */
}
/* Reduced motion: collapse all durations to 0 — preserve token names */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 0ms;
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
--duration-slower: 0ms;
}
}
</style>
<!-- Usage:
.button { transition: background var(--duration-fast) var(--ease-out); }
.modal { transition: opacity var(--duration-slow) var(--ease-decel); }
.toast { animation: toast-in var(--duration-base) var(--ease-spring); }
-->
Usage Notes
- Pick easing by intent: ease-out for entrances, ease-accel for exits, ease-spring for playful UI.
- Never use linear for UI — it reads as mechanical. Reserve for progress bars / loading rings.
- Override duration tokens to 0ms inside reduced-motion — keeps consumer code identical, just instant.
- Pair every transition rule with both a duration var AND an easing var; raw 'cubic-bezier(...)' inline is a smell.
- If you need a 7th curve you probably need a redesign — most apps overuse easing variation.
Tested In
- Chrome 120+
- Firefox 121
- Safari 17
Accessibility
- prefers-reduced-motion zeroes all duration tokens — no JS needed at consumer site.
- No animation runs against user preference; transitions still fire instantly so layout stays correct.
Loaded when retrieval picks the atom as a focal / direct hit.
EasingCurves [template] v1.0.0
Canonical easing + duration token set as CSS custom properties. Drop into :root and reference everywhere — eliminates the magic-number cubic-bezier copy-paste that plagues most codebases. Six curves cover 95% of UI motion needs.
Language
css
Body
<style>
:root {
/* Easing curves — pick by intent, not aesthetics */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Confident exit; default for entrances */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard; balanced */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Playful overshoot; toasts, tooltips */
--ease-decel: cubic-bezier(0, 0, 0.2, 1); /* Decelerate; arriving content */
--ease-accel: cubic-bezier(0.4, 0, 1, 1); /* Accelerate; departing content */
--ease-linear: linear; /* Progress bars only — never UI */
/* Duration scale — tighter at the bottom */
--duration-instant: 80ms; /* Press feedback */
--duration-fast: {DURATION_FAST};
--duration-base: {DURATION_BASE};
--duration-slow: {DURATION_SLOW};
--duration-slower: 600ms; /* Page-level transitions */
}
/* Reduced motion: collapse all durations to 0 — preserve token names */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 0ms;
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
--duration-slower: 0ms;
}
}
</style>
<!-- Usage:
.button { transition: background var(--duration-fast) var(--ease-out); }
.modal { transition: opacity var(--duration-slow) var(--ease-decel); }
.toast { animation: toast-in var(--duration-base) var(--ease-spring); }
-->
Usage Notes
- Pick easing by intent: ease-out for entrances, ease-accel for exits, ease-spring for playful UI.
- Never use linear for UI — it reads as mechanical. Reserve for progress bars / loading rings.
- Override duration tokens to 0ms inside reduced-motion — keeps consumer code identical, just instant.
- Pair every transition rule with both a duration var AND an easing var; raw 'cubic-bezier(...)' inline is a smell.
- If you need a 7th curve you probably need a redesign — most apps overuse easing variation.
Tested In
- Chrome 120+
- Firefox 121
- Safari 17
Accessibility
- prefers-reduced-motion zeroes all duration tokens — no JS needed at consumer site.
- No animation runs against user preference; transitions still fire instantly so layout stays correct.
Source
prime-system/examples/frontend-design/primes/compiled/@impeccable/template-easing-curves/atom.yaml