Motion and accessibility

Motion should explain a change without delaying it. Models update immediately; the presentation catches up.

Component behavior

• Dialogs and drawers use separate entrance and exit timings. Focus returns to the opener.
• Selects and menus use Reka's keyboard behavior and collision handling.
• Lists, table rows, pagination, avatar groups, combobox results, and toasts animate through AutoAnimate with Forza keyframes instead of its default fade. New items rise in from a blur, items added in the same frame cascade, moved items spring into their new slot, and removed items leave in the opposite direction. Leaving rows are inert immediately.
• useForzaMotion({ preset, stagger, duration, disabled }) gives the same behavior to your own containers. Presets are rise (lists), slide (stacks entering from an edge) and pop (chips and avatars). forzaMotionPlugin is exported for direct AutoAnimate use.
• Menus, selects, and comboboxes cascade their rows open. Tabs slide their panel in the direction of travel.
• Stats count up when they scroll into view. Meters grow on mount, and a sheen passes once per value change. Steppers fill their rule like a progress bar.
• Primary buttons catch a glint on hover. Switches stretch while pressed. Radios ripple once when checked. Badges and avatars can pulse for live state.
• Carousels use Embla, explicit controls, and no autoplay.
• Tabs and segmented controls animate their selection indicator.

Forza honors prefers-reduced-motion, including preference changes while the page is open. AutoAnimate is not attached, CSS animations and transitions are removed, and stats render their final value without counting. The landing uses GSAP separately. It is never a runtime dependency of the component package.

Your responsibilities

Supply meaningful labels and titles. Keep stable IDs. Announce asynchronous results. Restore focus when your app removes a focused item. Do not rely on color alone. Put essential instructions outside tooltips.

Automated browser and axe checks help catch regressions. They do not replace testing with a screen reader, touch input, zoom, and actual content. No WCAG certification is claimed.

Scroll behavior

The site keeps native scrolling, with themed visible scrollbars. Desktop scenes respond to scroll position; narrow screens use explicit controls. Decorative sequences do not lock scrolling. Modal overlays lock the background only while open.