Project: Create a progress bar using useScroll and useTransform hooks from framer motion.

import {
  useScroll,
  useTransform,
  motion,
  useSpring,
} from "framer-motion";
import React from "react";

const App = () => {
  const { scrollYProgress } = useScroll();
  const widthValue = useSpring(
    useTransform(scrollYProgress, [0, 1], ["0%", "100%"])
  );

  return (
    <div className="h-[200vh]">
      <motion.div
        className="fixed top-0 left-0 w-full h-2 bg-red-700"
        style={{
          width: widthValue,
        }}
      ></motion.div>
    </div>
  );
};

export default App;