scroll-read-time.tsx

import { useScroll } from 'framer-motion';

const Navbar = () => {
  const scroll = useScroll();
  const [timeRemaining, setTimeRemaining] = React.useState(readTime);

  React.useEffect(() => {
    return scroll.scrollYProgress.onChange((progress) => {
      setTimeRemaining(Math.floor(readTime * (1 - progress)));
    });
  }, []);
  
  return <div>{/* ... */}</div>
}