Parallax

/* Markup: <section class="hero">
             <div class="layer layer-back" aria-hidden="true">…</div>
             <div class="hero-content">…</div>
           </section> */
.hero {
  position: relative;
  /* Moved layers never paint below the hero or make the page taller. */
  overflow: clip;
  /* The open top, where the layers show above the content. */
  padding-top: 40vh;
  view-timeline: --hero block;
}

.layer {
  position: absolute;
  inset: 0; /* the hero's height, so 100% in the keyframes is the hero too */
  pointer-events: none;
  will-change: transform;
}

/* Speed ratio: the layer moves ratio x the scroll. Set only here; the JS tab reads it. */
.layer-back { --ratio: 0.4; }

/* In front, at full speed. Opaque, so it slides over the layers. */
.hero-content {
  position: relative;
  background: var(--surface, #fff);
}

/* House rule: parallax drops the speed difference under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Same test as the JS tab, which sets data-fallback when it takes over. */
  @supports (animation-timeline: scroll()) {
    html:not([data-fallback]) .layer {
      /* The shorthand resets animation-timeline, so it comes first. linear
         maps progress 1:1; both holds the ends outside the range. */
      animation: parallax linear both;
      animation-timeline: --hero;
      /* 0: the hero's top at the viewport top. 1: its bottom there. */
      animation-range: exit-crossing;
    }
  }
}

/* The layer scrolls with the hero; pushing it down (1 - ratio) of the
   scroll leaves it moving ratio x the scroll on screen. */
@keyframes parallax {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc((1 - var(--ratio)) * 100%), 0); }
}

// Load at the end of `<body>`: the hero exists, and the test runs before it paints.
// Same test as the CSS @supports, so the two routes never both run.
const supported = CSS.supports('animation-timeline', 'scroll()')
const hero = document.querySelector('.hero')

if (hero && !supported) {
  document.documentElement.dataset.fallback = ''
  const layers = [...hero.querySelectorAll('.layer')]
  // The ratio lives in the CSS (--ratio), so both routes share one value.
  const ratios = layers.map((l) => parseFloat(getComputedStyle(l).getPropertyValue('--ratio')))
  // House rule: parallax drops the speed difference under reduced motion.
  const reduce = matchMedia('(prefers-reduced-motion: reduce)')
  let frame = 0

  const render = () => {
    frame = 0
    // Read every frame, never cached: resizes and late content change it.
    const box = hero.getBoundingClientRect()
    // Pixels the hero has scrolled past the viewport top, 0 to its height.
    const n = Math.min(Math.max(-box.top, 0), box.height)
    layers.forEach((layer, i) => {
      layer.style.transform = `translate3d(0, ${n * (1 - ratios[i])}px, 0)`
    })
  }
  const schedule = () => {
    if (!frame) frame = requestAnimationFrame(render)
  }

  // Follows the setting live: listeners and transforms only while motion is allowed.
  const arm = () => {
    if (reduce.matches) {
      removeEventListener('scroll', schedule)
      removeEventListener('resize', schedule)
      cancelAnimationFrame(frame)
      frame = 0
      for (const layer of layers) layer.style.transform = ''
    } else {
      addEventListener('scroll', schedule, { passive: true })
      addEventListener('resize', schedule)
      render()
    }
  }
  reduce.addEventListener('change', arm)
  arm()
}

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

// Speed ratios: a layer moves ratio x the scroll; the content moves 1x.
const BACK = 0.4
// Pushing a layer down (1 - ratio) of the hero's height leaves it moving ratio x the scroll.
const shift = (ratio: number) => `${(1 - ratio) * 100}%`
const layer = 'pointer-events-none absolute inset-0 will-change-transform'

type Props = {
  back: ReactNode
  children: ReactNode
}

export function ParallaxHero({ back, children }: Props) {
  const ref = useRef<HTMLElement>(null)
  // 0: the hero's top at the viewport top. 1: its bottom there.
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start start', 'end start'],
  })
  const backY = useTransform(scrollYProgress, [0, 1], ['0%', shift(BACK)])
  // House rule: parallax drops the speed difference under reduced motion.
  const reduce = useReducedMotion()
  return (
    // pt-[40vh]: the open top, where the layers show above the content.
    <section ref={ref} className="relative overflow-clip pt-[40vh]">
      <motion.div aria-hidden className={layer} style={reduce ? undefined : { y: backY }}>
        {back}
      </motion.div>
      {/* In front, at full speed: opaque, so it slides over the layers. */}
      <div className="relative bg-[var(--surface,#fff)]">{children}</div>
    </section>
  )
}