parallax-partial.tsx

const Parallax = ({ children, offset = 50, className }: ParallaxProps): JSX.Element => {
  const prefersReducedMotion = usePrefersReducedMotion();
  const [elementTop, setElementTop] = useState(0);
  const [clientHeight, setClientHeight] = useState(0);
  const ref = useRef(null);

  const { scrollY } = useViewportScroll();

  const initial = elementTop - clientHeight;
  const final = elementTop + Math.abs(offset);

  const yRange = useTransform(scrollY, [initial, final], [offset, -offset]);
  const x = useSpring(yRange, { stiffness: 400, damping: 90 });

  useEffect(() => {
    const onResize = () => {
      const element = ref.current;
      if (!element) return;
      setElementTop(element.getBoundingClientRect().top + window.scrollY || window.pageYOffset);
      setClientHeight(window.innerHeight);
    }