Reduced Motion
An operating-system preference signaling that animation should be minimized, for real medical reasons.
Reduced motion is a user preference, exposed to the web as the prefers-reduced-motion media query, indicating that the person wants animation minimized. It exists because motion can trigger nausea, dizziness, and migraine in people with vestibular disorders — it is an accessibility requirement, not a taste setting.
Honoring it means degrading to a static end state, not to a faster animation. Content must still arrive; it simply arrives without the movement. An entrance that begins at zero opacity and is revealed by a suppressed animation leaves the content invisible — the failure mode that makes reduced-motion support worse than none.
Two implementation notes.
Animation libraries commonly offer a global reduced-motion setting, but such settings often exempt opacity as inherently motion-safe. That is reasonable for a fade and wrong for a looping pulse, which is exactly the kind of repeated movement the preference is about — so a looping effect must check the preference itself rather than relying on the global.
Test environments frequently emulate the preference by default, which means every animation assertion in an automated run is exercising the reduced path. A story asserting that something animates can only assert the settled end state, and asserting an identity transform means matching the explicit identity matrix rather than the absence of a transform.
See also15
Staggered Animation
Offsetting the start of sibling animations so a group reveals in sequence.
Design & Interface9 connections
contenteditable
The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.
Web Platform12 connections
Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Design & Interface23 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface44 connections
Component Story
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
Testing & Verification17 connections
Easing
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
Design & Interface16 connections
Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Design & Interface22 connections
Progressive Enhancement
Building so the core experience works without scripts, with richer behavior layered on top.
Web Platform26 connections
Focus Management
Deliberately controlling which element receives keyboard focus as an interface changes.
Design & Interface28 connections
Stacking Context
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
Design & Interface21 connections
Accordion
A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.
Design & Interface12 connections
Carousel
A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.
Design & Interface10 connections
Web Animations API
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.
Web Platform10 connections
Glassmorphism
An interface style of translucent, blurred panels that let the content behind them show through like frosted glass, recurring across operating systems since the 2000s and repeatedly criticized for hurting legibility.
Design & Interface9 connections
Skeleton Screen
A gray outline of the layout shown while content loads, so the page feels faster and doesn't jump when the real content arrives.
Design & Interface11 connections
Linked from16
- AccessibilityDesign & Interface
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
- AccordionDesign & Interface
A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.
- Assist ModePlay & Games
Difficulty and accessibility settings offered as separate, combinable toggles instead of one difficulty slider.
- CarouselDesign & Interface
A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- Component StoryTesting & Verification
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Game FeelPlay & Games
The perceptual layer between input and simulation, and the tuning that makes a control scheme read as responsive.
- Motion DesignDesign & Interface
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
- Progress IndicatorDesign & Interface
Spinners, progress bars, and step counters that tell people a system is working and how long is left, which changes how long a wait feels more than how long it is.
- requestAnimationFrameWeb Platform
The browser callback that runs once per display frame just before paint, which is the right clock for visual work and stops entirely when nothing is being displayed.
- Skeleton ScreenDesign & Interface
A gray outline of the layout shown while content loads, so the page feels faster and doesn't jump when the real content arrives.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.
- Toast NotificationDesign & Interface
A brief, non-blocking message that slides in to confirm an action or report a background event, then disappears on its own.
- View TransitionsWeb Platform
A browser API that animates between two states of a page, or between two pages, by snapshotting the old and new views and morphing between them.
- Web Animations APIWeb Platform
A browser interface that exposes the engine behind CSS animations and transitions to JavaScript, giving scripts animations they can pause, reverse, seek, and await, while still running smoothly off the main thread.