add 'prefers-reduced-motion' for home page

Author: torinmb

src/components/Home.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
     <!-- <sp-three-vue class="canvas1" :shaderParkCode="spCode" :sculptureParams="backgroundParams" ref="canvas1" :enableZoom="false" /> -->
-    <sp-three-vue class="background-canvas" :shaderParkCode="spCode3" :sculptureParams="backgroundParams" :enableZoom="false" />
+    <sp-three-vue class="background-canvas" :shaderParkCode="spCode3" :sculptureParams="backgroundParams" :enableZoom="false" :pause="pause" />
     <section class="container split-container hero">
         <br/>
         <a href="https://www.npmjs.com/package/shader-park-core"><h4>shader-park-core</h4></a>
@@ -110,6 +110,7 @@ import {spCode2, spCode3} from '../helpers/front-page-sculp1.js';
 export default {
 	data: function() {
 		return {
+            pause: false,
             spCode: spCode2(),
             spCode3: spCode3(),
 			featuredSculptures: null,
@@ -159,9 +160,14 @@ export default {
             } else {
                 console.log('coudcaskdjhf no canvas')
             }
-            document.addEventListener('scroll', () => {
-                this.backgroundParams.scroll = this.backgroundParams.scroll*.98 + window.pageYOffset/window.innerHeight*.02;
-            }, false);
+
+            const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            if (mediaQuery && mediaQuery.matches) {
+                this.pause = true;
+            }
+            mediaQuery.addEventListener('change', () => {
+                this.pause = mediaQuery.matches;
+            });
             /*
             function resizeCanvasToDisplaySize(canvas) {
                 // look up the size the canvas is being displayed

src/components/SpThreeVue.vue

@@ -18,6 +18,7 @@ export default {
     props: {
         // canvasWidth: { type: String, default: '100vw' },
         hoverInterpolation: { type: Number, default: .98 },
+        pause: { type: Boolean, default: false},
         clickInterpolation: { type: Number, default: .98 },
         scrollInterpolation: { type: Number, default: .98 },
         shaderParkCode: {type: [Function, String], default: 'sphere(.5);'},
@@ -90,6 +91,9 @@ export default {
         },
         mouseDown1() {
             this.state.click = 1.0;
+        },
+        playToggle() {
+            this.pause = !this.pause;
         }
     },
     mounted() {
@@ -146,13 +150,18 @@ export default {
                 this.$emit('beginRender');
                 this.animationId = requestAnimationFrame( render );
                 if('time' in this.sculptureParams) {
-                    this.sculptureParams.time += 0.01;
+                    if(!this.pause) {
+                        this.sculptureParams.time += 0.01;
+                    }
                 } else {
                     this.sculptureParams.time = 0;
                 }
-                this.sculptureParams.click =  this.sculptureParams.click*this.clickInterpolation + this.state.click*(1.0-this.clickInterpolation);
-                this.sculptureParams.hover =  this.sculptureParams.hover*this.hoverInterpolation + this.state.hover*(1.0-this.hoverInterpolation);
-                this.sculptureParams.scroll =  this.sculptureParams.scroll*this.scrollInterpolation + window.pageYOffset/window.innerHeight*(1.0-this.scrollInterpolation);
+                
+                    this.sculptureParams.click =  this.sculptureParams.click*this.clickInterpolation + this.state.click*(1.0-this.clickInterpolation);
+                    this.sculptureParams.hover =  this.sculptureParams.hover*this.hoverInterpolation + this.state.hover*(1.0-this.hoverInterpolation);
+                if(!this.pause) {
+                    this.sculptureParams.scroll =  this.sculptureParams.scroll*this.scrollInterpolation + window.pageYOffset/window.innerHeight*(1.0-this.scrollInterpolation);
+                }
                 
                 // this.state.currClick = this.state.currClick*.98 + this.state.click*.02;