Parallax

---
/**
 * Parallax — an element drifts at its own speed as it crosses the viewport.
 *
 * animation-timeline: view() binds a translate to the element's own passage
 * through the scrollport, so the drift is exact, never lags, and costs no
 * scroll listener. Browsers without scroll timelines show it in place.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Element to render. */
  as?: HTMLTag;
  /** Drift as a fraction of the viewport, −1…1. Negative moves against the scroll. */
  speed?: number;
  /** Axis of travel. */
  axis?: 'y' | 'x';
}

const { as: Tag = 'div', speed = 0.3, axis = 'y', class: className, style, ...rest } = Astro.props;
const inline = [`--ma-px-speed:${speed}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-parallax', className]} data-axis={axis === 'x' ? 'x' : undefined} style={inline} {...rest}>
  <slot />
</Tag>

<style is:global>
  @layer components {
    @supports (animation-timeline: view()) {
      :where(.ma-parallax) {
        will-change: translate;
        animation: ma-parallax-y linear both;
      }
      :where(.ma-parallax[data-axis='x']) {
        animation-name: ma-parallax-x;
      }
      /* Separate rule on purpose: lightningcss folds animation-timeline into
         the shorthand, which browsers reject. Distinct selector text keeps them apart. */
      :where(html) :where(.ma-parallax) {
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-parallax) {
        animation: none;
        will-change: auto;
      }
    }
  }

  @keyframes ma-parallax-y {
    from {
      translate: 0 calc(var(--ma-px-speed, 0.3) * 50vh);
    }
    to {
      translate: 0 calc(var(--ma-px-speed, 0.3) * -50vh);
    }
  }
  @keyframes ma-parallax-x {
    from {
      translate: calc(var(--ma-px-speed, 0.3) * 50vw) 0;
    }
    to {
      translate: calc(var(--ma-px-speed, 0.3) * -50vw) 0;
    }
  }
</style>