diff --git a/packages/visx-demo/.happo.js b/packages/visx-demo/.happo.js
index 965a998be..05bc2f2f2 100644
--- a/packages/visx-demo/.happo.js
+++ b/packages/visx-demo/.happo.js
@@ -28,6 +28,7 @@ module.exports = {
   targets: {
     'chrome-desktop': new RemoteBrowserTarget('chrome', {
       viewport: '800x552',
+      prefersReducedMotion: true,
     }),
   },
 
diff --git a/packages/visx-demo/happo/gallery.tsx b/packages/visx-demo/happo/gallery.tsx
index 9f0a7ae7f..b17a0b513 100644
--- a/packages/visx-demo/happo/gallery.tsx
+++ b/packages/visx-demo/happo/gallery.tsx
@@ -1,8 +1,5 @@
 import React from 'react';
 import { tiles as examples } from '../src/components/Gallery';
-import AxisTile from '../src/components/Gallery/AxisTile';
-import XYChartTile from '../src/components/Gallery/XYChartTile';
-import { asyncTimeout } from '../.happo-variables.js';
 
 type HappoSnapshot = {
   component: string;
@@ -13,42 +10,13 @@ type HappoSnapshot = {
   };
 };
 
-const specialCases = new Set(['@visx/demo-axis', '@visx/demo-xychart']);
-
-// renders an example with a timeout
-const renderWithTimeout: (
-  Example: React.ReactElement,
-) => HappoSnapshot['variants'][string] = Example => renderInDom => {
-  return new Promise(resolve => {
-    renderInDom(Example);
-    setTimeout(resolve, asyncTimeout);
-  });
-};
-
 const getComponentName = (Example: typeof examples[0]) =>
   Example.packageJson.name || 'missing-name';
 
-const snapshots: HappoSnapshot[] = examples
-  .filter(Example => !specialCases.has(getComponentName(Example)))
-  .map(Example => ({
-    // note: this (reasonably) asserts Examples have unique names
-    component: getComponentName(Example),
-    variants: { default: () => <Example.default /> },
-  }));
+const snapshots: HappoSnapshot[] = examples.map(Example => ({
+  // note: this (reasonably) asserts Examples have unique names
+  component: getComponentName(Example),
+  variants: { default: () => <Example.default /> },
+}));
 
-export default snapshots.concat([
-  // needs timeout for animated axes
-  {
-    component: '@visx/demo-axis',
-    variants: {
-      default: renderWithTimeout(<AxisTile />),
-    },
-  },
-  // needs timeout for animated axes
-  {
-    component: '@visx/demo-xychart',
-    variants: {
-      default: renderWithTimeout(<XYChartTile />),
-    },
-  },
-]);
+export default snapshots;
diff --git a/packages/visx-demo/src/sandboxes/visx-axis/Example.tsx b/packages/visx-demo/src/sandboxes/visx-axis/Example.tsx
index 81fca7cf3..da3c3d804 100644
--- a/packages/visx-demo/src/sandboxes/visx-axis/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-axis/Example.tsx
@@ -2,11 +2,14 @@ import React, { useState, useMemo } from 'react';
 import AreaClosed from '@visx/shape/lib/shapes/AreaClosed';
 import { curveMonotoneX } from '@visx/curve';
 import { scaleUtc, scaleLinear, scaleLog, scaleBand, ScaleInput, coerceNumber } from '@visx/scale';
-import { Orientation, SharedAxisProps, AxisScale } from '@visx/axis';
+import { Axis, Orientation, SharedAxisProps, AxisScale } from '@visx/axis';
+import { GridRows, GridColumns } from '@visx/grid';
 import { AnimatedAxis, AnimatedGridRows, AnimatedGridColumns } from '@visx/react-spring';
 import { getSeededRandom } from '@visx/mock-data';
 import { LinearGradient } from '@visx/gradient';
 import { timeFormat } from 'd3-time-format';
+import { GridRowsProps } from '@visx/grid/lib/grids/GridRows';
+import { GridColumnsProps } from '@visx/grid/lib/grids/GridColumns';
 
 export const backgroundColor = '#da7cff';
 const axisColor = '#fff';
@@ -40,23 +43,51 @@ export type AxisProps = {
   showControls?: boolean;
 };
 
+type AnimationTrajectory = 'outside' | 'center' | 'min' | 'max' | undefined;
+
+type AxisComponent = React.FC<
+  SharedAxisProps<AxisScale> & {
+    animationTrajectory: AnimationTrajectory;
+  }
+>;
+type GridRowsComponent = React.FC<
+  GridRowsProps<AxisScale> & {
+    animationTrajectory: AnimationTrajectory;
+  }
+>;
+type GridColumnsComponent = React.FC<
+  GridColumnsProps<AxisScale> & {
+    animationTrajectory: AnimationTrajectory;
+  }
+>;
+
 export default function Example({
   width: outerWidth = 800,
   height: outerHeight = 800,
   showControls = true,
 }: AxisProps) {
+  // use non-animated components if prefers-reduced-motion is set
+  const prefersReducedMotionQuery = window?.matchMedia('(prefers-reduced-motion: reduce)');
+  const prefersReducedMotion = !prefersReducedMotionQuery || !!prefersReducedMotionQuery.matches;
+  const [useAnimatedComponents, setUseAnimatedComponents] = useState(!prefersReducedMotion);
+
   // in svg, margin is subtracted from total width/height
   const width = outerWidth - margin.left - margin.right;
   const height = outerHeight - margin.top - margin.bottom;
   const [dataToggle, setDataToggle] = useState(true);
-  const [animationTrajectory, setAnimationTrajectory] = useState<
-    'outside' | 'center' | 'min' | 'max'
-  >('center');
+  const [animationTrajectory, setAnimationTrajectory] = useState<AnimationTrajectory>('center');
 
+  // define some types
   interface AxisDemoProps<Scale extends AxisScale> extends SharedAxisProps<Scale> {
     values: ScaleInput<Scale>[];
   }
 
+  const AxisComponent: AxisComponent = useAnimatedComponents ? AnimatedAxis : Axis;
+  const GridRowsComponent: GridRowsComponent = useAnimatedComponents ? AnimatedGridRows : GridRows;
+  const GridColumnsComponent: GridColumnsComponent = useAnimatedComponents
+    ? AnimatedGridColumns
+    : GridColumns;
+
   const axes: AxisDemoProps<AxisScale<number>>[] = useMemo(() => {
     // toggle between two value ranges to demo animation
     const linearValues = dataToggle ? [0, 2, 4, 6, 8, 10] : [6, 8, 10, 12];
@@ -144,7 +175,7 @@ export default function Example({
         <g transform={`translate(${margin.left},${margin.top})`}>
           {axes.map(({ scale, values, label, tickFormat }, i) => (
             <g key={`scale-${i}`} transform={`translate(0, ${i * (scaleHeight + scalePadding)})`}>
-              <AnimatedGridRows
+              <GridRowsComponent
                 // force remount when this changes to see the animation difference
                 key={`gridrows-${animationTrajectory}`}
                 scale={yScale}
@@ -153,7 +184,7 @@ export default function Example({
                 numTicks={dataToggle ? 1 : 3}
                 animationTrajectory={animationTrajectory}
               />
-              <AnimatedGridColumns
+              <GridColumnsComponent
                 // force remount when this changes to see the animation difference
                 key={`gridcolumns-${animationTrajectory}`}
                 scale={scale}
@@ -176,7 +207,7 @@ export default function Example({
                 fill={gridColor}
                 fillOpacity={0.2}
               />
-              <AnimatedAxis
+              <AxisComponent
                 // force remount when this changes to see the animation difference
                 key={`axis-${animationTrajectory}`}
                 orientation={Orientation.bottom}
@@ -208,42 +239,57 @@ export default function Example({
       </svg>
       {showControls && (
         <>
-          <div style={{ fontSize: 11 }}>
-            <strong>animation trajectory</strong>
-            <label>
-              <input
-                type="radio"
-                onChange={() => setAnimationTrajectory('outside')}
-                checked={animationTrajectory === 'outside'}
-              />{' '}
-              outside
-            </label>
-            <label>
-              <input
-                type="radio"
-                onChange={() => setAnimationTrajectory('center')}
-                checked={animationTrajectory === 'center'}
-              />{' '}
-              center
-            </label>
-            <label>
-              <input
-                type="radio"
-                onChange={() => setAnimationTrajectory('min')}
-                checked={animationTrajectory === 'min'}
-              />{' '}
-              min
-            </label>
+          <div style={{ fontSize: 12 }}>
             <label>
               <input
-                type="radio"
-                onChange={() => setAnimationTrajectory('max')}
-                checked={animationTrajectory === 'max'}
+                type="checkbox"
+                onChange={() => setUseAnimatedComponents(!useAnimatedComponents)}
+                checked={useAnimatedComponents}
               />{' '}
-              max
+              enable animation
             </label>
+            &nbsp;&nbsp;&nbsp;
+            {useAnimatedComponents && (
+              <>
+                <strong>animation trajectory</strong>
+                <label>
+                  <input
+                    type="radio"
+                    onChange={() => setAnimationTrajectory('outside')}
+                    checked={animationTrajectory === 'outside'}
+                  />{' '}
+                  outside
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    onChange={() => setAnimationTrajectory('center')}
+                    checked={animationTrajectory === 'center'}
+                  />{' '}
+                  center
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    onChange={() => setAnimationTrajectory('min')}
+                    checked={animationTrajectory === 'min'}
+                  />{' '}
+                  min
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    onChange={() => setAnimationTrajectory('max')}
+                    checked={animationTrajectory === 'max'}
+                  />{' '}
+                  max
+                </label>
+              </>
+            )}
           </div>
-          <button onClick={() => setDataToggle(!dataToggle)}>Update scales</button>
+          {useAnimatedComponents && (
+            <button onClick={() => setDataToggle(!dataToggle)}>Update scales</button>
+          )}
         </>
       )}
     </>
diff --git a/packages/visx-demo/src/sandboxes/visx-pattern/Example.tsx b/packages/visx-demo/src/sandboxes/visx-pattern/Example.tsx
index 644ef17e3..ace500aaa 100644
--- a/packages/visx-demo/src/sandboxes/visx-pattern/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-pattern/Example.tsx
@@ -21,19 +21,21 @@ export type PatternProps = {
   margin?: typeof defaultMargin;
 };
 
-const Patterns: React.FC<{ id: string }>[] = [
+const Patterns: React.FC<{ id: string; prefersReducedMotion?: boolean }>[] = [
   ({ id }) => <PatternLines id={id} height={6} width={6} stroke="black" strokeWidth={1} />,
-  ({ id }) => (
+  ({ id, prefersReducedMotion }) => (
     <CustomPattern id={id} width={10} height={10}>
-      <animateTransform
-        attributeType="xml"
-        attributeName="patternTransform"
-        type="translate"
-        from="0 0"
-        to="0 30"
-        dur="10s"
-        repeatCount="indefinite"
-      />
+      {!prefersReducedMotion && (
+        <animateTransform
+          attributeType="xml"
+          attributeName="patternTransform"
+          type="translate"
+          from="0 0"
+          to="0 30"
+          dur="10s"
+          repeatCount="indefinite"
+        />
+      )}
       <circle cx={5} cy={5} r="3" stroke="none" fill="black" transform-origin="center" />
     </CustomPattern>
   ),
@@ -78,21 +80,23 @@ const Patterns: React.FC<{ id: string }>[] = [
     />
   ),
   ({ id }) => <PatternCircles id={id} height={10} width={10} fill="black" complement />,
-  ({ id }) => {
+  ({ id, prefersReducedMotion }) => {
     const width = 10;
     const height = 10;
 
     return (
       <CustomPattern id={id} width={width} height={height}>
-        <animateTransform
-          attributeType="xml"
-          attributeName="patternTransform"
-          type="translate"
-          from="0 0"
-          to="50 0"
-          dur="10s"
-          repeatCount="indefinite"
-        />
+        {!prefersReducedMotion && (
+          <animateTransform
+            attributeType="xml"
+            attributeName="patternTransform"
+            type="translate"
+            from="0 0"
+            to="50 0"
+            dur="10s"
+            repeatCount="indefinite"
+          />
+        )}
         <path
           d={`M 0 ${height / 2} c ${height / 8} ${-height / 4} , ${(height * 3) / 8} ${-height /
             4} , ${height / 2} 0
@@ -115,6 +119,10 @@ const Patterns: React.FC<{ id: string }>[] = [
 ];
 
 export default function Example({ width, height, margin = defaultMargin }: PatternProps) {
+  // use non-animated components if prefers-reduced-motion is set
+  const prefersReducedMotionQuery = window?.matchMedia('(prefers-reduced-motion: reduce)');
+  const prefersReducedMotion = !prefersReducedMotionQuery || !!prefersReducedMotionQuery.matches;
+
   const numColumns = 3;
   const numRows = Patterns.length / numColumns;
   const columnWidth = Math.max((width - margin.left - margin.right) / numColumns, 0);
@@ -132,7 +140,7 @@ export default function Example({ width, height, margin = defaultMargin }: Patte
           return (
             <React.Fragment key={id}>
               {/** Like SVG <defs />, Patterns are rendered with an id */}
-              <Pattern id={id} />
+              <Pattern id={id} prefersReducedMotion={prefersReducedMotion} />
 
               {/** And are then referenced for a style attribute. */}
               <Bar
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
index 94dc496fd..6ab5cf093 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
@@ -1,23 +1,6 @@
 import React from 'react';
 import { CityTemperature } from '@visx/mock-data/lib/mocks/cityTemperature';
-import {
-  AnimatedAnnotation,
-  AnimatedAreaSeries,
-  AnimatedAreaStack,
-  AnimatedAxis,
-  AnimatedBarGroup,
-  AnimatedBarSeries,
-  AnimatedBarStack,
-  AnimatedGlyphSeries,
-  AnimatedGrid,
-  AnimatedLineSeries,
-  AnnotationCircleSubject,
-  AnnotationConnector,
-  AnnotationLabel,
-  AnnotationLineSubject,
-  Tooltip,
-  XYChart,
-} from '@visx/xychart';
+
 import ExampleControls from './ExampleControls';
 import CustomChartBackground from './CustomChartBackground';
 
@@ -68,6 +51,24 @@ export default function Example({ height }: XYChartProps) {
         theme,
         xAxisOrientation,
         yAxisOrientation,
+
+        // components are animated or not depending on selection
+        Annotation,
+        AreaSeries,
+        AreaStack,
+        Axis,
+        BarGroup,
+        BarSeries,
+        BarStack,
+        GlyphSeries,
+        Grid,
+        LineSeries,
+        AnnotationCircleSubject,
+        AnnotationConnector,
+        AnnotationLabel,
+        AnnotationLineSubject,
+        Tooltip,
+        XYChart,
       }) => (
         <XYChart
           theme={theme}
@@ -81,7 +82,7 @@ export default function Example({ height }: XYChartProps) {
           }}
         >
           <CustomChartBackground />
-          <AnimatedGrid
+          <Grid
             key={`grid-${animationTrajectory}`} // force animate on update
             rows={showGridRows}
             columns={showGridColumns}
@@ -89,54 +90,54 @@ export default function Example({ height }: XYChartProps) {
             numTicks={numTicks}
           />
           {renderBarStack && (
-            <AnimatedBarStack offset={stackOffset}>
-              <AnimatedBarSeries
+            <BarStack offset={stackOffset}>
+              <BarSeries
                 dataKey="New York"
                 data={data}
                 xAccessor={accessors.x['New York']}
                 yAccessor={accessors.y['New York']}
               />
-              <AnimatedBarSeries
+              <BarSeries
                 dataKey="San Francisco"
                 data={data}
                 xAccessor={accessors.x['San Francisco']}
                 yAccessor={accessors.y['San Francisco']}
               />
-              <AnimatedBarSeries
+              <BarSeries
                 dataKey="Austin"
                 data={data}
                 xAccessor={accessors.x.Austin}
                 yAccessor={accessors.y.Austin}
               />
-            </AnimatedBarStack>
+            </BarStack>
           )}
           {renderBarGroup && (
-            <AnimatedBarGroup>
-              <AnimatedBarSeries
+            <BarGroup>
+              <BarSeries
                 dataKey="New York"
                 data={data}
                 xAccessor={accessors.x['New York']}
                 yAccessor={accessors.y['New York']}
                 colorAccessor={colorAccessorFactory('New York')}
               />
-              <AnimatedBarSeries
+              <BarSeries
                 dataKey="San Francisco"
                 data={data}
                 xAccessor={accessors.x['San Francisco']}
                 yAccessor={accessors.y['San Francisco']}
                 colorAccessor={colorAccessorFactory('San Francisco')}
               />
-              <AnimatedBarSeries
+              <BarSeries
                 dataKey="Austin"
                 data={data}
                 xAccessor={accessors.x.Austin}
                 yAccessor={accessors.y.Austin}
                 colorAccessor={colorAccessorFactory('Austin')}
               />
-            </AnimatedBarGroup>
+            </BarGroup>
           )}
           {renderBarSeries && (
-            <AnimatedBarSeries
+            <BarSeries
               dataKey="New York"
               data={data}
               xAccessor={accessors.x['New York']}
@@ -146,7 +147,7 @@ export default function Example({ height }: XYChartProps) {
           )}
           {renderAreaSeries && (
             <>
-              <AnimatedAreaSeries
+              <AreaSeries
                 dataKey="Austin"
                 data={data}
                 xAccessor={accessors.x.Austin}
@@ -154,7 +155,7 @@ export default function Example({ height }: XYChartProps) {
                 fillOpacity={0.4}
                 curve={curve}
               />
-              <AnimatedAreaSeries
+              <AreaSeries
                 dataKey="New York"
                 data={data}
                 xAccessor={accessors.x['New York']}
@@ -162,7 +163,7 @@ export default function Example({ height }: XYChartProps) {
                 fillOpacity={0.4}
                 curve={curve}
               />
-              <AnimatedAreaSeries
+              <AreaSeries
                 dataKey="San Francisco"
                 data={data}
                 xAccessor={accessors.x['San Francisco']}
@@ -173,39 +174,33 @@ export default function Example({ height }: XYChartProps) {
             </>
           )}
           {renderAreaStack && (
-            <AnimatedAreaStack
-              curve={curve}
-              offset={stackOffset}
-              renderLine={stackOffset !== 'wiggle'}
-            >
-              <AnimatedAreaSeries
+            <AreaStack curve={curve} offset={stackOffset} renderLine={stackOffset !== 'wiggle'}>
+              <AreaSeries
                 dataKey="Austin"
                 data={data}
                 xAccessor={accessors.x.Austin}
                 yAccessor={accessors.y.Austin}
                 fillOpacity={0.4}
               />
-
-              <AnimatedAreaSeries
+              <AreaSeries
                 dataKey="New York"
                 data={data}
                 xAccessor={accessors.x['New York']}
                 yAccessor={accessors.y['New York']}
                 fillOpacity={0.4}
               />
-
-              <AnimatedAreaSeries
+              <AreaSeries
                 dataKey="San Francisco"
                 data={data}
                 xAccessor={accessors.x['San Francisco']}
                 yAccessor={accessors.y['San Francisco']}
                 fillOpacity={0.4}
               />
-            </AnimatedAreaStack>
+            </AreaStack>
           )}
           {renderLineSeries && (
             <>
-              <AnimatedLineSeries
+              <LineSeries
                 dataKey="Austin"
                 data={data}
                 xAccessor={accessors.x.Austin}
@@ -213,7 +208,7 @@ export default function Example({ height }: XYChartProps) {
                 curve={curve}
               />
               {!renderBarSeries && (
-                <AnimatedLineSeries
+                <LineSeries
                   dataKey="New York"
                   data={data}
                   xAccessor={accessors.x['New York']}
@@ -221,7 +216,7 @@ export default function Example({ height }: XYChartProps) {
                   curve={curve}
                 />
               )}
-              <AnimatedLineSeries
+              <LineSeries
                 dataKey="San Francisco"
                 data={data}
                 xAccessor={accessors.x['San Francisco']}
@@ -231,7 +226,7 @@ export default function Example({ height }: XYChartProps) {
             </>
           )}
           {renderGlyphSeries && (
-            <AnimatedGlyphSeries
+            <GlyphSeries
               dataKey="San Francisco"
               data={data}
               xAccessor={accessors.x['San Francisco']}
@@ -240,13 +235,13 @@ export default function Example({ height }: XYChartProps) {
               colorAccessor={colorAccessorFactory('San Francisco')}
             />
           )}
-          <AnimatedAxis
+          <Axis
             key={`time-axis-${animationTrajectory}-${renderHorizontally}`}
             orientation={renderHorizontally ? yAxisOrientation : xAxisOrientation}
             numTicks={numTicks}
             animationTrajectory={animationTrajectory}
           />
-          <AnimatedAxis
+          <Axis
             key={`temp-axis-${animationTrajectory}-${renderHorizontally}`}
             label={
               stackOffset == null
@@ -262,7 +257,7 @@ export default function Example({ height }: XYChartProps) {
             tickFormat={stackOffset === 'wiggle' ? () => '' : undefined}
           />
           {annotationDataKey && annotationDatum && (
-            <AnimatedAnnotation
+            <Annotation
               dataKey={annotationDataKey}
               datum={annotationDatum}
               dx={annotationLabelPosition.dx}
@@ -287,7 +282,7 @@ export default function Example({ height }: XYChartProps) {
                   fillOpacity: 0.8,
                 }}
               />
-            </AnimatedAnnotation>
+            </Annotation>
           )}
           {showTooltip && (
             <Tooltip<CityTemperature>
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
index 1c8505793..a37e6c258 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
@@ -9,6 +9,8 @@ import cityTemperature, { CityTemperature } from '@visx/mock-data/lib/mocks/city
 import { GlyphCross, GlyphDot, GlyphStar } from '@visx/glyph';
 import { curveLinear, curveStep, curveCardinal } from '@visx/curve';
 import customTheme from './customTheme';
+import userPrefersReducedMotion from './userPrefersReducedMotion';
+import getAnimatedOrUnanimatedComponents from './getAnimatedOrUnanimatedComponents';
 
 const dateScaleConfig = { type: 'band', paddingInner: 0.3 } as const;
 const temperatureScaleConfig = { type: 'linear' } as const;
@@ -47,7 +49,7 @@ type ProvidedProps = {
     y: Accessors;
     date: Accessor;
   };
-  animationTrajectory: AnimationTrajectory;
+  animationTrajectory?: AnimationTrajectory;
   annotationDataKey: DataKey | null;
   annotationDatum?: CityTemperature;
   annotationLabelPosition: { dx: number; dy: number };
@@ -85,15 +87,18 @@ type ProvidedProps = {
   theme: XYChartTheme;
   xAxisOrientation: 'top' | 'bottom';
   yAxisOrientation: 'left' | 'right';
-};
+} & ReturnType<typeof getAnimatedOrUnanimatedComponents>;
 
 type ControlsProps = {
   children: (props: ProvidedProps) => React.ReactNode;
 };
 
 export default function ExampleControls({ children }: ControlsProps) {
+  const [useAnimatedComponents, setUseAnimatedComponents] = useState(!userPrefersReducedMotion());
   const [theme, setTheme] = useState<XYChartTheme>(darkTheme);
-  const [animationTrajectory, setAnimationTrajectory] = useState<AnimationTrajectory>('center');
+  const [animationTrajectory, setAnimationTrajectory] = useState<AnimationTrajectory | undefined>(
+    'center',
+  );
   const [gridProps, setGridProps] = useState<[boolean, boolean]>([false, false]);
   const [showGridRows, showGridColumns] = gridProps;
   const [xAxisOrientation, setXAxisOrientation] = useState<'top' | 'bottom'>('bottom');
@@ -240,6 +245,7 @@ export default function ExampleControls({ children }: ControlsProps) {
         theme,
         xAxisOrientation,
         yAxisOrientation,
+        ...getAnimatedOrUnanimatedComponents(useAnimatedComponents),
       })}
       {/** This style is used for annotated elements via colorAccessor. */}
       <svg className="pattern-lines">
@@ -743,39 +749,53 @@ export default function ExampleControls({ children }: ControlsProps) {
         </div>
         {/** animation trajectory */}
         <div>
-          <strong>axis + grid animation</strong>
-          <label>
-            <input
-              type="radio"
-              onChange={() => setAnimationTrajectory('center')}
-              checked={animationTrajectory === 'center'}
-            />
-            from center
-          </label>
-          <label>
-            <input
-              type="radio"
-              onChange={() => setAnimationTrajectory('outside')}
-              checked={animationTrajectory === 'outside'}
-            />
-            from outside
-          </label>
-          <label>
-            <input
-              type="radio"
-              onChange={() => setAnimationTrajectory('min')}
-              checked={animationTrajectory === 'min'}
-            />
-            from min
-          </label>
           <label>
             <input
-              type="radio"
-              onChange={() => setAnimationTrajectory('max')}
-              checked={animationTrajectory === 'max'}
+              type="checkbox"
+              onChange={() => setUseAnimatedComponents(!useAnimatedComponents)}
+              checked={useAnimatedComponents}
             />
-            from max
+            use animated components
           </label>
+
+          {useAnimatedComponents && (
+            <>
+              &nbsp;&nbsp;&nbsp;
+              <strong>axis + grid animation</strong>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => setAnimationTrajectory('center')}
+                  checked={animationTrajectory === 'center'}
+                />
+                from center
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => setAnimationTrajectory('outside')}
+                  checked={animationTrajectory === 'outside'}
+                />
+                from outside
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => setAnimationTrajectory('min')}
+                  checked={animationTrajectory === 'min'}
+                />
+                from min
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  onChange={() => setAnimationTrajectory('max')}
+                  checked={animationTrajectory === 'max'}
+                />
+                from max
+              </label>
+            </>
+          )}
         </div>
       </div>
       <style jsx>{`
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/getAnimatedOrUnanimatedComponents.ts b/packages/visx-demo/src/sandboxes/visx-xychart/getAnimatedOrUnanimatedComponents.ts
new file mode 100644
index 000000000..63084c6fd
--- /dev/null
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/getAnimatedOrUnanimatedComponents.ts
@@ -0,0 +1,73 @@
+import {
+  // animated
+  AnimatedAnnotation,
+  AnimatedAreaSeries,
+  AnimatedAreaStack,
+  AnimatedAxis,
+  AnimatedBarGroup,
+  AnimatedBarSeries,
+  AnimatedBarStack,
+  AnimatedGlyphSeries,
+  AnimatedGrid,
+  AnimatedLineSeries,
+
+  // not animated
+  Annotation,
+  AreaSeries,
+  AreaStack,
+  Axis,
+  BarGroup,
+  BarSeries,
+  BarStack,
+  GlyphSeries,
+  Grid,
+  LineSeries,
+
+  // no animated equivalents
+  AnnotationCircleSubject,
+  AnnotationConnector,
+  AnnotationLabel,
+  AnnotationLineSubject,
+  Tooltip,
+  XYChart,
+} from '@visx/xychart';
+
+export default function getAnimatedOrUnanimatedComponents(animated?: boolean) {
+  return animated
+    ? {
+        Annotation: AnimatedAnnotation,
+        AreaSeries: AnimatedAreaSeries,
+        AreaStack: AnimatedAreaStack,
+        Axis: AnimatedAxis,
+        BarGroup: AnimatedBarGroup,
+        BarSeries: AnimatedBarSeries,
+        BarStack: AnimatedBarStack,
+        GlyphSeries: AnimatedGlyphSeries,
+        Grid: AnimatedGrid,
+        LineSeries: AnimatedLineSeries,
+        AnnotationCircleSubject,
+        AnnotationConnector,
+        AnnotationLabel,
+        AnnotationLineSubject,
+        Tooltip,
+        XYChart,
+      }
+    : {
+        Annotation,
+        AreaSeries,
+        AreaStack,
+        Axis,
+        BarGroup,
+        BarSeries,
+        BarStack,
+        GlyphSeries,
+        Grid,
+        LineSeries,
+        AnnotationCircleSubject,
+        AnnotationConnector,
+        AnnotationLabel,
+        AnnotationLineSubject,
+        Tooltip,
+        XYChart,
+      };
+}
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/userPrefersReducedMotion.ts b/packages/visx-demo/src/sandboxes/visx-xychart/userPrefersReducedMotion.ts
new file mode 100644
index 000000000..6f9ac04b3
--- /dev/null
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/userPrefersReducedMotion.ts
@@ -0,0 +1,4 @@
+export default function userPrefersReducedMotion() {
+  const prefersReducedMotionQuery = window?.matchMedia('(prefers-reduced-motion: reduce)');
+  return !prefersReducedMotionQuery || !!prefersReducedMotionQuery.matches;
+}