Behavior comparison
Reduced motion and fallback vs Skeleton shimmer
Decisive difference
Reduced motion and fallback addresses the same result without movement; Skeleton shimmer addresses optional loading decoration. They can be combined when both needs apply.
Choice criteria, links and sources
- Reduced motion and fallbackChoose Reduced motion and fallback if you need the same result without movement.Open entry Reduced motion and fallback
- Skeleton shimmerChoose Skeleton shimmer if you need optional loading decoration.Open entry Skeleton shimmer
See the nine dimensionsSee the sources
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.
Skeleton shimmer
Static preview: state and result remain readable without motion. Activate the demo to compare the parameter, pause and try the fallback.
Compare 1200 and 2400 ms per sweep. Speed changes the decoration, not the load. Show content completes this local simulation; no network request is made.
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.
Skeleton shimmer
Demonstrate a loading placeholder with reserved space and persistent Loading text.
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 sourcesParts 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.
Decision
Family question
Does motion explain a change, report state, or only decorate?
Three criteria to choose
- Use case
Reduced motion and fallback
Provide a static result for every essential action, respecting system settings and an explicit local opt-out.
Skeleton shimmer
Demonstrate a loading placeholder with reserved space and persistent Loading text.
- Interactivity
Reduced motion and fallback
Adjust one parameter for the same result without movement; pause or use a static result.
Skeleton shimmer
Adjust one parameter for optional loading decoration; pause or use a static result.
- Mobile behavior
Reduced motion and fallback
Native touch controls; system motion reduction always wins.
Skeleton shimmer
Native touch controls; system motion reduction always wins.
Nine dimensions
- Trigger
Reduced motion and fallback
Explicit activation to demonstrate the same result without movement.
Skeleton shimmer
Explicit activation to demonstrate optional loading decoration.
- Modality
Reduced motion and fallback
Non-modal; surrounding content stays usable.
Skeleton shimmer
Non-modal; surrounding content stays usable.
- Placement
Reduced motion and fallback
Inside a bounded specimen; no page-level decoration.
Skeleton shimmer
Inside a bounded specimen; no page-level decoration.
- Interactivity
Reduced motion and fallback
Adjust one parameter for the same result without movement; pause or use a static result.
Skeleton shimmer
Adjust one parameter for optional loading decoration; pause or use a static result.
- Focus
Reduced motion and fallback
Focus stays on the activated control. Reset restores focus to its button.
Skeleton shimmer
Focus stays on the activated control. Reset restores focus to its button.
- Dismissal
Reduced motion and fallback
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
Skeleton shimmer
Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners.
- Accessible role
Reduced motion and fallback
button + checkbox + status
Skeleton shimmer
button + select + checkbox + status
- Use case
Reduced motion and fallback
Provide a static result for every essential action, respecting system settings and an explicit local opt-out.
Skeleton shimmer
Demonstrate a loading placeholder with reserved space and persistent Loading text.
- Mobile behavior
Reduced motion and fallback
Native touch controls; system motion reduction always wins.
Skeleton shimmer
Native touch controls; system motion reduction always wins.
| Dimension | Reduced motion and fallbackReduced motion and fallback | Skeleton shimmerSkeleton shimmer |
|---|---|---|
| Trigger | Explicit activation to demonstrate the same result without movement. | Explicit activation to demonstrate optional loading decoration. |
| Modality | Non-modal; surrounding content stays usable. | Non-modal; surrounding content stays usable. |
| Placement | Inside a bounded specimen; no page-level decoration. | Inside a bounded specimen; no page-level decoration. |
| Interactivity | Adjust one parameter for the same result without movement; pause or use a static result. | Adjust one parameter for optional loading decoration; pause or use a static result. |
| Focus | Focus stays on the activated control. Reset restores focus to its button. | 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. | Pause freezes playback; static fallback cancels it. Leaving the specimen cancels its animation and removes listeners. |
| Accessible role | button + checkbox + status | button + select + checkbox + status |
| Use case | Provide a static result for every essential action, respecting system settings and an explicit local opt-out. | Demonstrate a loading placeholder with reserved space and persistent Loading text. |
| Mobile behavior | Native touch controls; system motion reduction always wins. | Native touch controls; system motion reduction always wins. |