Framer Motion - Project 4

import { motion, useInView } from "framer-motion";
import { useEffect, useRef } from "react";

const url =
  "https://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg";
const a = new Audio(url);

export default function App() {
  const ref = useRef(null);
  const isInView = useInView(ref, { amount: 0.1 });

  useEffect(() => {
    if (isInView) {
      a.preload = "auto";

      // start (must be called after a user gesture in many browsers)
      a.play()
        .then(() => {
          console.log("playing");
        })
        .catch((err) => {
          console.error("play failed:", err);
        });
    }
  }, [isInView]);
  return (
    <div className="h-[250vh] p-12">
      <div className="h-[150vh]"></div>

      <motion.div
        ref={ref}
        className="w-[300px] h-[300px] bg-blue-500 mx-auto"
        initial={{
          rotate: 0,
          scale: 0.5,
        }}
        whileInView={{
          rotate: 30,
          scale: 1.5,
        }}
        viewport={{
          amount: 0.5,
        }}
        transition={{ duration: 1 }}
      ></motion.div>
    </div>
  );
}