useParallax.tsx

import { useTransform, type MotionValue } from "framer-motion";

/**
 * @see https://www.framer.com/motion/scroll-animations/##parallax
 *
 * ```tsx
 * const Image = ({ id }: { id: number }) => {
 * const ref = useRef(null);
 * const { scrollYProgress } = useScroll({ target: ref });
 * const y = useParallax(scrollYProgress, 300);
 *
 * return (
 *   <section>
 *     <div ref={ref}>
 *       <img src={`/${id}.jpg`} alt="A London skyscraper" />
 *     </div>
 *     <motion.h2 style={{ y }}>{`#00${id}`}</motion.h2>
 *     </section>
 *   );
 * }
 * ```
 */
export const useParallax = (
	value: MotionValue<number>,
	distance: number | [start: number, end: number],
) => {
	return useTransform(
		value,
		[0, 1],
		Array.isArray(distance) ? distance : [0, distance],
	);
};