diff --git a/hooks/usePrefersReducedMotion.js b/hooks/usePrefersReducedMotion.js new file mode 100644 index 0000000..02e7d22 --- /dev/null +++ b/hooks/usePrefersReducedMotion.js @@ -0,0 +1,28 @@ +import { useState, useEffect } from "react"; + +const QUERY = "(prefers-reduced-motion: no-preference)"; + +export default function usePrefersReducedMotion() { + // Default to prefers animations, since we don't know what the + // user's preference is on the server. + const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); + useEffect(() => { + const mediaQueryList = window.matchMedia(QUERY); + + // Set the true initial value, now that we're on the client: + setPrefersReducedMotion(!window.matchMedia(QUERY).matches); + + // Register our event listener + const listener = (event) => { + setPrefersReducedMotion(!event.matches); + }; + + mediaQueryList.addEventListener("change", listener); + + return () => { + mediaQueryList.removeEventListener("change", listener); + }; + }, []); + + return prefersReducedMotion; +} diff --git a/pages/index.js b/pages/index.js index ad2dd96..21a9792 100755 --- a/pages/index.js +++ b/pages/index.js @@ -7,6 +7,7 @@ import { Waypoint } from "react-waypoint"; import Slider from "react-slick"; import cbor from "cbor"; import Image from "next/image"; +import usePrefersReducedMotion from "../hooks/usePrefersReducedMotion.js"; export default function Home(props) { const setPagePos = props.setPagePos; @@ -749,14 +750,16 @@ export default function Home(props) { })(); }, [totalIndexed, totalIndexerNodes, uptime]); + const userPrefersReducedMotion = usePrefersReducedMotion(); + var settings = { dots: true, infinite: true, - autoplay: true, - autoplaySpeed: 2000, - speed: 500, - slidesToShow: 4, - slidesToScroll: 1, + autoplay: userPrefersReducedMotion ? false : true, + autoplaySpeed: 3000, + speed: 800, + slidesToShow: 3, + slidesToScroll: 3, responsive: [ { breakpoint: 1024, @@ -770,16 +773,16 @@ export default function Home(props) { { breakpoint: 600, settings: { - slidesToShow: 2, - slidesToScroll: 2, + slidesToShow: 3, + slidesToScroll: 3, initialSlide: 2, }, }, { breakpoint: 480, settings: { - slidesToShow: 1, - slidesToScroll: 1, + slidesToShow: 2, + slidesToScroll: 2, }, }, ], @@ -1072,7 +1075,12 @@ export default function Home(props) {