The sorting task produces Amber one pound, Green three, Blue four in actual list order. A static page choice always suppresses optional movement; otherwise the page follows the system preference. Sort and Restore update the same result regardless of whether motion is allowed.
Work through the example
Select Sort lightest first to reorder the list and read the summary. Select Always static, restore the original order, then sort again: the result is unchanged and stationary. Use system mode respects a reduction request; it cannot force movement on. A preference change updates the effective mode without replaying the sort.
Use the media preference for both CSS and any JavaScript animation. Keep duration short and animate only after an explicit user action when allowed. Stop active nonessential movement if the preference changes, leaving final DOM order intact. Motion is an optional explanation layer; the names, weights and numbering must carry the result on their own.
Start with a complete stationary result
Make the list readable before adding motion. Each box needs its color name in text, its weight, and a position number. Color alone cannot tell the reader which box moved. The initial sequence is Blue, Amber, Green; the sorted weights are 1, 3, and 4 pounds.
Use Sort lightest first and Restore original order buttons. Both update the actual list order and the explanatory sentence. The final DOM order should agree with what the person sees, rather than leaving the source unchanged and merely shifting visual positions.
Treat the sample weights as supplied exercise data. This page does not infer how to load a real vehicle or decide whether a package is safe to carry. Its task is to make one sorting operation understandable.
Make motion an optional layer
The media query (prefers-reduced-motion: reduce) detects a preference for minimizing nonessential motion. Its other value, no-preference, means no such preference has been expressed through that setting. It is not permission to add unlimited movement.
For this exercise, start with stationary updates and enable a short 180-millisecond Web Animations API animation through Element.animate() only when the system allows motion and the page’s static choice is off. Keep essential information outside the animation. The reduced-motion CSS rule protects CSS animations and transitions; it does not cancel this JavaScript-created effect.
JavaScript that animates positions also needs the preference. Read it with matchMedia and check the current result before starting an animation. If the setting changes while the page is open, the JavaScript preference handler calls stop() to cancel active Web Animations API animations and update the mode indicator, leaving the current final order in place.
Offer a local static choice without overriding the system
Use Always static to keep the page stationary regardless of the system setting, and Use system mode to follow the current media preference. Do not offer a switch that forces motion on for someone who has requested reduction.
Show the effective mode in plain text: "Static: system preference," "Static: page choice," or "Motion allowed by system setting." This text explains the example's decision. It does not diagnose the reader or claim that every browser presents settings in the same place.
Avoid automatically replaying the sort when a preference changes. Someone changing a setting should not trigger another animation as a side effect. Wait for the next explicit sort or restore action, and make repeated clicks settle on one correct order.
Recreate this example
Build one self-contained responsive HTML example titled “prefers-reduced-motion: explain the stationary result” for readers completing the stated task. Return the complete HTML with embedded CSS and JavaScript. Use no remote fonts, libraries, images, requests, account connections, or saved-state claims.
Use Blue 4 lb, Amber 1 lb and Green 3 lb in a numbered DOM list with text names and weights. Sort lightest first gives Amber 1 lb, Green 3 lb, Blue 4 lb; Restore resets. Buttons Always static and Use system mode; effective static if page choice or matchMedia reduced-motion reduce. Never override reduction to force motion. Use optional 180 ms user-started per-item Element.animate() effects only when allowed. The JavaScript preference handler cancels active effects through stop(); the CSS rule protects CSS animations and transitions separately. Preserve final DOM order. No autoplay. Summary sentence always communicates full order. Media change updates mode, no replay. Native screen/device preference and visual motion checks separate from script tests.
Use a packing-order list with weights, effective motion mode and optional user-requested short movement design with a compact header. Keep the actual sample data, controls, and useful default result visible early on a 360px-wide screen. Use readable text at least 16px, generous paragraph spacing, strong contrast, semantic labels, visible keyboard focus, and wrapping source blocks. Stack records on narrow screens rather than forcing a wide table.
Wire each action to an explicit type=button click handler using element selectors; the host permits scripts but blocks form submission. Update the visible result when the described action occurs. Show specific error feedback for invalid or missing input and clear stale feedback after dependent inputs change. Use plain text when displaying user values.
Scripted order and preference wiring do not establish native visual comfort or device/assistive behavior. Keep the source fixture and worked teacher or developer example distinct from actual user records. Include the domain-specific explanation and next check beside the result. Provide no fake download, send, deployment, approval, or persistence button. Everything operates locally for the current page session.
Review the prepared copy in NOS
Try both system reduction and the page’s static choice before accepting the sort interaction. For a prepared behavior explanation, NOS can render the HTML and allow eligible static mode notes to be revised visually. Confirm actual motion and final reading order in the intended browser.