For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/foundations/motion.md.
A3S UI
  • English
  • next

      • Motion

      Motion explains state change without delaying work. A3S UI uses short transitions for hover, focus, navigation, and resizable layouts; it does not use decorative page animation.

      Live previewHTML · CSS · JavaScript
      A3S
      Resource motion160ms lift and boundary

      Durations

      DurationUse
      120msColor and focus feedback
      160–180msCard lift, navigation reveal, small layout changes
      200–240msDialog or drawer entry

      Easing

      Use standard ease for reversible interface feedback. Use ease-out for surfaces entering the viewport and ease-in when they leave. Continuous pointer interactions such as Split Pane resizing update without transition.

      Reduced motion

      Components with nonessential transform or layout transitions disable them under prefers-reduced-motion: reduce. Products must not rely on animation alone to explain state.