Scroll Scrub

---
/**
 * ScrollScrub — bind any transform to scroll position, zero JS.
 *
 * Reveal answers "appear when seen"; this answers "move exactly as I
 * scroll": translate, scale, rotate and opacity go from the given start
 * values to neutral across a range of the element's own view timeline.
 * Without scroll timelines the element shows its end state.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Element to render. */
  as?: HTMLTag;
  /** Start x offset in px. */
  x?: number;
  /** Start y offset in px. */
  y?: number;
  /** Start scale. */
  scale?: number;
  /** Start rotation in degrees. */
  rotate?: number;
  /** Start opacity. */
  opacity?: number;
  /** Start tilt on the X axis in degrees — the "container scroll" look. Adds perspective to the element itself. */
  rotateX?: number;
  /** Perspective in px, used with rotateX. */
  perspective?: number;
  /** animation-range of the element's view timeline. */
  range?: string;
}

const { as: Tag = 'div', x = 0, y = 0, scale = 1, rotate = 0, opacity = 1, rotateX, perspective = 1200, range = 'entry 0% cover 40%', class: className, style, ...rest } = Astro.props;
const inline = [`--ma-ss-x:${x}px`, `--ma-ss-y:${y}px`, `--ma-ss-scale:${scale}`, `--ma-ss-rotate:${rotate}deg`, `--ma-ss-opacity:${opacity}`, `--ma-ss-range:${range}`, rotateX !== undefined && `--ma-ss-rx:${rotateX}deg`, rotateX !== undefined && `--ma-ss-p:${perspective}px`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-scrub', className]} data-tilt={rotateX !== undefined ? '' : undefined} style={inline} {...rest}>
  <slot />
</Tag>

<style is:global>
  @layer components {
    @supports (animation-timeline: view()) {
      :where(.ma-scrub) {
        will-change: translate, scale, rotate, opacity;
        animation: ma-scrub linear both;
        animation-range: var(--ma-ss-range, entry 0% cover 40%);
      }
      :where(html) :where(.ma-scrub) {
        animation-timeline: view();
      }
      /* rotateX: the 3D pair on the same element — perspective() and rotateX() in one transform, no wrapper */
      :where(.ma-scrub[data-tilt]) {
        animation-name: ma-scrub-tilt;
        will-change: translate, scale, rotate, opacity, transform;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-scrub) {
        animation: none;
        will-change: auto;
      }
    }
  }

  @keyframes ma-scrub-tilt {
    from {
      translate: var(--ma-ss-x, 0px) var(--ma-ss-y, 0px);
      scale: var(--ma-ss-scale, 1);
      rotate: var(--ma-ss-rotate, 0deg);
      opacity: var(--ma-ss-opacity, 1);
      transform: perspective(var(--ma-ss-p, 1200px)) rotateX(var(--ma-ss-rx, 0deg));
    }
    to {
      translate: 0 0;
      scale: 1;
      rotate: 0deg;
      opacity: 1;
      transform: perspective(var(--ma-ss-p, 1200px)) rotateX(0deg);
    }
  }
  @keyframes ma-scrub {
    from {
      translate: var(--ma-ss-x, 0px) var(--ma-ss-y, 0px);
      scale: var(--ma-ss-scale, 1);
      rotate: var(--ma-ss-rotate, 0deg);
      opacity: var(--ma-ss-opacity, 1);
    }
    to {
      translate: 0 0;
      scale: 1;
      rotate: 0deg;
      opacity: 1;
    }
  }
</style>