# Motion Check Verify that a selected page's animations, transitions, and interactions are consistent, purposeful, performant, and safe for users who prefer reduced motion. ## Instructions ### Before checking - Inspect the existing page, its effects, variants, transitions, and component interactions without changing them. - Read the Settings block first and use it as the source of truth. - Preview the page at every breakpoint, since effects can be set or overridden per breakpoint. - List every animated layer before judging it, so the report covers the full inventory. ### Consistency - Check durations against the duration scale and maximum duration. - Check easing and spring values against the defaults. Flag one-off curves. - Check appear effects for the same offset, opacity, and direction across similar elements. - Check stagger delays and total stagger length for lists and grids. - Check that hover and press states use the set scale values and the same transition across buttons, cards, and links. - Check that component variants use consistent transitions between states. - Flag effects that are not in the allowed effect types, and any blocked effect types. ### Purpose - Check that each animation supports a purpose: guiding attention, confirming an action, showing a relationship, or revealing content in order. - Flag decorative motion that competes with the primary message or the primary call to action. - Check the overall motion density against the motion level setting. - Check that the same element is not animated twice by stacked effects (e.g. appear plus scroll transform plus hover on one layer). ### Loading and visibility - Check the above-the-fold policy: the hero headline and primary action should be visible within the set time. - Flag important content that starts invisible and depends on an effect to appear, especially headings and body text. - Check that scroll-triggered content still appears when the user jumps via anchor links, fast scrolling, or browser find. - Check that animations do not cause layout shift. Prefer transform and opacity over animating width, height, padding, or position in layout. - Check that nothing animates from outside the viewport in a way that creates horizontal overflow. ### Performance - Flag expensive effects: blur, backdrop blur, large shadows, and filters on large or many layers. - Check scroll transforms and parallax for smoothness on mobile, and against the parallax max offset. - Count effects triggering at the same moment on load and flag excessive concurrency. - Check that tickers, videos, and loops pause or stop when not visible where supported. ### Interaction and devices - Check that no information or action is only available on hover, since touch devices have no hover. - Check that press states give feedback on touch. - Check that hover effects do not shift surrounding layout. - Check that overlays, menus, and modals open and close with consistent transitions. ### Safety and reduced motion - Check behavior with the operating system's reduce motion setting turned on. Compare against the reduced motion policy. - Where the effect's reduced-motion behavior cannot be confirmed from settings, mark it as needs manual review and test it on a device. - Check that auto-playing content longer than 5 seconds (tickers, carousels, looping videos) can be paused, stopped, or hidden. - Check for flashing: nothing should flash more than three times per second. - Check that large parallax or zooming effects are avoidable, since they can trigger vestibular discomfort. ### Scope limits - Do not audit layout, typography, CMS, SEO, or the full accessibility of the page beyond the motion-related items above. - Do not propose new animations unless asked. Removing or simplifying motion is a valid recommendation. - Do not apply fixes unless explicitly requested. When fixing, change only the listed effect values and preview every breakpoint afterward. ## Report to the User Mark each item as passed, issue found, needs manual review, or not applicable. Start with the motion inventory: each animated layer, its effect type, trigger, duration, and easing. Then report issues with the layer, breakpoint, current value, expected value from Settings, impact, and recommended next step. End with: - Items that need testing on a real device with reduced motion on. - Any settings that were inferred rather than provided. - The top three fixes by impact.