Parallax scrolling

import { useRef } from 'react';
import {
  motion,
  useReducedMotion,
  useScroll,
  useTransform
} from 'motion/react';

// Fraction of the scroll speed each far layer moves at. 1 is normal speed.
const SKY_SPEED = 0.2;
const MOUNTAINS_SPEED = 0.5;

const LAYER = 'absolute inset-0 size-full object-cover';

export function ParallaxHero() {
  const ref = useRef<HTMLElement>(null);
  const reduceMotion = useReducedMotion();
  // 0 with the hero's top at the top of the viewport, 1 once it has scrolled out.
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start start', 'end start']
  });
  // Pushing a layer down while the page scrolls up makes it move slower on screen.
  const skyY = useTransform(
    scrollYProgress,
    [0, 1],
    ['0%', `${(1 - SKY_SPEED) * 100}%`]
  );
  const mountainsY = useTransform(
    scrollYProgress,
    [0, 1],
    ['0%', `${(1 - MOUNTAINS_SPEED) * 100}%`]
  );

  return (
    <section ref={ref} className='relative h-screen overflow-hidden'>
      <motion.img
        src='/hero/sky.webp'
        alt=''
        style={reduceMotion ? undefined : { y: skyY }}
        className={LAYER}
      />
      <motion.img
        src='/hero/mountains.webp'
        alt=''
        style={reduceMotion ? undefined : { y: mountainsY }}
        className={LAYER}
      />
      <img src='/hero/foreground.webp' alt='' className={LAYER} />
      <h1 className='relative pt-32 text-center text-5xl font-semibold text-white'>
        Into the mountains
      </h1>
    </section>
  );
}