Skip to content
SkillCodex
Menu

Reduced motion and fallback

Reduced motion and fallback

Reduced motion honors a user's preference for less movement. A fallback preserves the same information when motion is disabled or unavailable.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r1
Sources
3 sources
Status
Published
Read the sources

You may have searched for: stop motion but keep the resultrespect reduced motion settingsno animation alternative

All phrasings
Save and share

Recognize

Documented cost and limits

DOM rendering with transform or opacity through Web Animations API, with no added animation dependency, Canvas or WebGL. The module is requested on Load demo. The spring prepares 121 points once; the browser then controls playback. Continuous shimmer keeps consuming resources until paused or unmounted.

These properties can avoid layout work; they guarantee neither GPU compositing nor smooth playback on low-end devices. Battery, GPU and real-device performance remain unmeasured. Static state and text remain the reference when the system reduces motion or the API is missing.

web.dev · rendering cost · MDN · Web Animations API

Motion & Effects

Try it

Does motion explain a change, report state, or only decorate?

Reduced motion and fallback

Shared trial context

An item moves, changes state or waits for content. Which information must survive without motion?

Reduced motion and fallback

Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.

Force the static fallback, then play the action. The destination and status remain identical. The system preference always wins, including when it changes during playback.

What this example shows

Pause freezes a running animation; reduced motion replaces it with a static result. A fallback also covers missing browser APIs and failed loading.

Which fits your need?

Reduced motion and fallback

Provide a static result for every essential action, respecting system settings and an explicit local opt-out.

Easing

Make a short positional change easier to follow with a predictable duration.

Which component will you use here?
Difference and sources

Pause freezes a running animation; reduced motion replaces it with a static result. A fallback also covers missing browser APIs and failed loading.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Trigger

    The control that opens or reveals the surface.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Motion & Effects

      Reduced motion and fallback belongs to this comparison group.

    • Do not confuse

      Easing

      Choose Reduced motion and fallback if you need the same result without movement. Choose Easing if you need a fixed-duration pace.

      Compare this pair
    • Do not confuse

      Spring animation

      Choose Reduced motion and fallback if you need the same result without movement. Choose Spring animation if you need a damped physical response.

      Compare this pair
    • Do not confuse

      State transition

      Choose Reduced motion and fallback if you need the same result without movement. Choose State transition if you need persistent state feedback.

      Compare this pair
    • Do not confuse

      Skeleton shimmer

      Choose Reduced motion and fallback if you need the same result without movement. Choose Skeleton shimmer if you need optional loading decoration.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: reduced motion and fallback

    • stop motion but keep the result
    • respect reduced motion settings
    • no animation alternative
    • static fallback for a moving element
    • disable a demo animation
    • same information without movement

    Choose

    Use it when

    • Provide a static result for every essential action, respecting system settings and an explicit local opt-out.

    Avoid it when

    • Never override the system preference with a demo toggle or remove useful state information along with the movement.

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Play the normal example, then enable the static fallback and repeat it.

      Expected result

      Both versions communicate the same destination and status, including when movement is absent.

    2. 2. Do this

      Enable reduced motion in your device settings while the example is playing.

      Expected result

      The interface respects the system preference without requiring a page reload or a local animation toggle.

    3. 3. Do this

      Use Play and Reset from the keyboard with reduced motion enabled, then inspect Pause.

      Expected result

      Play and Reset stay usable with visible focus; Pause is unavailable when nothing is moving, and text still explains the result.

    Full contract
    1. 1The result is readable with no animation
    2. 2Pause, system reduction and fallback work during playback
    3. 3Unmount cancels effects and listeners
    4. 4Only transform or opacity changes; device cost remains unmeasured

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Reduced motion and fallback without breaking its behavior

    # Implement Reduced motion and fallback in your agent
    
    ## Objective
    Implement Reduced motion and fallback for this verified behavior: Reduced motion honors a user's preference for less movement. A fallback preserves the same information when motion is disabled or unavailable.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Reduced motion and fallback matches the need before writing code.
    
    ## Required behavior
    - A live region announces new status only when the update is important and not already focused.
    - Pointer, Enter, or Space activation runs one named action exactly once.
    
    ## States to cover
    - Ready — Static initial state
    - Running — The optional effect runs
    - Paused — Playback is frozen
    - Result — Persistent result with no motion required
    
    ## Accessibility
    - ARIA role: button + checkbox + status
    - The primary control or named region for Reduced motion and fallback has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Focus stays on the activated control. Reset restores focus to its button.
    - Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
    - Announce state changes with concise text, never animation frames. Decorative graphics stay hidden from assistive technology.
    - Tab reaches every control
    - Enter or Space activates buttons; Space toggles the static fallback checkbox
    
    ## When not to use
    - Never override the system preference with a demo toggle or remove useful state information along with the movement.
    
    ## Acceptance criteria
    - The result is readable with no animation
    - Pause, system reduction and fallback work during playback
    - Unmount cancels effects and listeners
    - Only transform or opacity changes; device cost remains unmeasured
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Reduced motion and fallback on a real journey

    # Verify Reduced motion and fallback after implementation
    
    ## Objective
    Audit the Reduced motion and fallback implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:91634ef1c539a201a1f8d248f9122c332c14dc3f80eb18af59fd8481629fa261

    Diagnose a problem

    Find and fix the Reduced motion and fallback defect

    # Debug Reduced motion and fallback in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Reduced motion and fallback.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - The result is readable with no animation
    - Pause, system reduction and fallback work during playback
    - Unmount cancels effects and listeners
    - Only transform or opacity changes; device cost remains unmeasured
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Reduced motion and fallback fix

    # Prevent the Reduced motion and fallback regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Reduced motion and fallback with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:0ae1fb0ebceead239dd55a33e97006d3107428671081cf691731b3e52525bcc6

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:90f96c984b7774889b9dba48c4dc2d8c1db63f227f927a8bce5888d568d24932

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    button, label, input[type=checkbox] and decorative div

    NativeNative browser animation demo, not a new ARIA widget. Static content remains usable.

    Technical details

    Behaviors

    • Announce meaningful changes

      A live region announces new status only when the update is important and not already focused.

    • Run an action

      Pointer, Enter, or Space activation runs one named action exactly once.

    States

    • Ready

      Static initial state

    • Running

      The optional effect runs

    • Paused

      Playback is frozen

    • Result

      Persistent result with no motion required

    State transitions

    • Ready → Running

      Activate Play when motion is available

    • Running → Paused

      Activate Pause

    • Running → Result

      Finish or activate static fallback

    Test scenarios

    Context
    Provide a static result for every essential action, respecting system settings and an explicit local opt-out.
    Mission
    Force the static fallback, then play the action. The destination and status remain identical. The system preference always wins, including when it changes during playback.
    Primary state
    Reduced motion honors a user's preference for less movement. A fallback preserves the same information when motion is disabled or unavailable.
    Edge case
    System reduction or an unavailable animation API gives the same static information. No data operation depends on playback.

    Visual signals

    • A bounded specimen with a visible start and result
    • Text remains readable without movement

    Behavioral signals

    • Force the static fallback, then play the action. The destination and status remain identical. The system preference always wins, including when it changes during playback.
    • Starts only on request; pause and static fallback remain available

    Accessibility

    Role
    button + checkbox + status
    Accessible name
    The primary control or named region for Reduced motion and fallback has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    Focus stays on the activated control. Reset restores focus to its button.
    Dismissal
    Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
    Scroll
    Activating the control with Space does not scroll the page, and feedback appears without moving focus or causing an unexpected jump.
    Announcement
    Announce state changes with concise text, never animation frames. Decorative graphics stay hidden from assistive technology.
    Keyboard
    • Tab reaches every control
    • Enter or Space activates buttons; Space toggles the static fallback checkbox

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • button, label, input[type=checkbox] and decorative div

      implementationKind
      custom
      nativeElement
      button, label, input[type=checkbox] and decorative div
      ariaPattern
      native controls and status text
      radixPrimitive
      Not applicable
      shadcnRecipe
      Not applicable
      runtimeDependency
      Not applicable
      packageName
      Not applicable
      exportName
      Not applicable
      exactVersion
      Not applicable
      status
      exception
      sourceId
      source-ui-motion-waapi
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Native browser animation demo, not a new ARIA widget. Static content remains usable.

      Verify binding source

    Sources

    • prefers-reduced-motion
      sourceId
      source-ui-motion-reduction
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:49 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:573fe46ee27fed249d9c39e910a2a6c258cee26527e90554ba5b02eba1496fbf
      status
      verified

      Claim covered: Reduced motion and fallback: User motion preferences and a static alternative.

    • Web Animations API
      sourceId
      source-ui-motion-waapi
      kind
      documentation
      canonicalUrl
      https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
      publisher
      MDN
      sourceRevision
      Wed, 16 Sep 2026 01:08:41 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:b030cde49d8dbf6294ab507e29a03d53591011c9bd11ca2d48d87182a0abd50b
      status
      verified

      Claim covered: Reduced motion and fallback: Browser animation playback, pause and cancellation.

    • High-performance animations
      sourceId
      source-ui-motion-performance
      kind
      documentation
      canonicalUrl
      https://web.dev/articles/animations-guide?hl=de
      publisher
      Google web.dev
      sourceRevision
      Tue, 06 Oct 2020 07:00:00 GMT
      consultedAt
      2026-09-16
      license
      Not stated
      contentDigest
      sha256:2f4492e9ba7b3679936eac2f1f1e6e42dcde7fc65bf29cf6f848d076df224acd
      status
      verified

      Claim covered: Reduced motion and fallback: Transform and opacity rendering costs; compositor eligibility is not a performance guarantee.