Micro Interaction Css
Five reusable pure-CSS micro-interaction recipes: button press (asymmetric timing), checkbox stroke-dashoffset check, toggle switch, input focus ring, and form shake on invalid submission.
$ aoe install @community/pattern-micro-interaction-cssProjection
Always in _index.xml · the agent never has to ask for this.
MicroInteractionCss [pattern] v1.0.0
Five reusable pure-CSS micro-interaction recipes: button press (asymmetric timing), checkbox stroke-dashoffset check, toggle switch, input focus ring, and form shake on invalid submission.
Loaded when retrieval picks the atom as adjacent / supporting.
MicroInteractionCss [pattern] v1.0.0
Five reusable pure-CSS micro-interaction recipes: button press (asymmetric timing), checkbox stroke-dashoffset check, toggle switch, input focus ring, and form shake on invalid submission.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Recipes
- Button press: scale(0.97) on :active with asymmetric transition — press 80ms ease-in, release 200ms ease-out
- Checkbox: SVG path with stroke-dashoffset 24→0 on :checked, 200ms ease-out
- Toggle switch: translate X on :checked with cubic-bezier(0.34,1.56,0.64,1) — slight overshoot for 'snap' feel
- Input focus ring: outline width 0→2px with clip-path circle expand, 150ms
- Form shake: @keyframes shake with translate(-6px) → (6px) × 3, 300ms — fires via .is-invalid class on submit
Css Tokens
- Press duration: 80ms (down) / 200ms (up)
- Focus ring: 2px solid oklch(65% 0.2 260), offset 2px
- Shake amplitude: ±6px, duration 300ms
- Toggle overshoot: cubic-bezier(0.34, 1.56, 0.64, 1)
Loaded when retrieval picks the atom as a focal / direct hit.
MicroInteractionCss [pattern] v1.0.0
Five reusable pure-CSS micro-interaction recipes: button press (asymmetric timing), checkbox stroke-dashoffset check, toggle switch, input focus ring, and form shake on invalid submission.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Recipes
- Button press: scale(0.97) on :active with asymmetric transition — press 80ms ease-in, release 200ms ease-out
- Checkbox: SVG path with stroke-dashoffset 24→0 on :checked, 200ms ease-out
- Toggle switch: translate X on :checked with cubic-bezier(0.34,1.56,0.64,1) — slight overshoot for 'snap' feel
- Input focus ring: outline width 0→2px with clip-path circle expand, 150ms
- Form shake: @keyframes shake with translate(-6px) → (6px) × 3, 300ms — fires via .is-invalid class on submit
Css Tokens
- Press duration: 80ms (down) / 200ms (up)
- Focus ring: 2px solid oklch(65% 0.2 260), offset 2px
- Shake amplitude: ±6px, duration 300ms
- Toggle overshoot: cubic-bezier(0.34, 1.56, 0.64, 1)
Relations
related: [@community/pattern-button-press-feedback, @community/rule-animation-duration, @community/constraint-reduced-motion, @community/check-reduced-motion-required, @community/check-focus-visible]
Rationale
Micro-interactions provide physical feedback that confirms user actions. Pure CSS implementations have zero JS overhead and respect the browser's native rendering pipeline.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Recipes
- Button press: scale(0.97) on :active with asymmetric transition — press 80ms ease-in, release 200ms ease-out
- Checkbox: SVG path with stroke-dashoffset 24→0 on :checked, 200ms ease-out
- Toggle switch: translate X on :checked with cubic-bezier(0.34,1.56,0.64,1) — slight overshoot for 'snap' feel
- Input focus ring: outline width 0→2px with clip-path circle expand, 150ms
- Form shake: @keyframes shake with translate(-6px) → (6px) × 3, 300ms — fires via .is-invalid class on submit
Css Tokens
- Press duration: 80ms (down) / 200ms (up)
- Focus ring: 2px solid oklch(65% 0.2 260), offset 2px
- Shake amplitude: ±6px, duration 300ms
- Toggle overshoot: cubic-bezier(0.34, 1.56, 0.64, 1)
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/pattern-micro-interaction-css/atom.yaml