Page Transition

---
/**
 * PageTransition — the page-level motion Astro's <ClientRouter /> makes
 * possible and nothing else on the web can do this cheaply: wrap a region,
 * give it a name, and it animates between pages. Zero JS of its own; the
 * router is Astro's. Presets are keyframes in this file, resolved through
 * the active preset's curve and duration, so page motion matches the rest.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';
import type { TransitionAnimationValue, TransitionDirectionalAnimations } from 'astro';
import { fade, slide } from 'astro:transitions';

type Preset = 'fade' | 'slide' | 'rise' | 'zoom' | 'wipe' | 'scope' | 'morph' | 'none';

interface Props extends HTMLAttributes<'div'> {
  /** transition:name — the same name on both pages pairs the elements. */
  name?: string;
  /** How the region enters and leaves. `morph` is the shared-element morph the browser draws itself. */
  preset?: Preset;
  /** Element to render. */
  as?: HTMLTag;
}

const { name, preset = 'rise', as: Tag = 'div', class: className, ...rest } = Astro.props;

const own = (kind: 'rise' | 'zoom' | 'wipe' | 'scope'): TransitionDirectionalAnimations => {
  // scope: the old page stays in view, sinking and dimming for the whole entrance, so its exit runs on the entrance duration
  const out = { name: `ma-vt-${kind}-out`, duration: kind === 'scope' ? 'var(--ma-duration)' : 'var(--ma-duration-fast)', easing: 'var(--ma-ease-out)', fillMode: 'both' as const };
  const inn = { name: `ma-vt-${kind}-in`, duration: 'var(--ma-duration)', easing: 'var(--ma-ease)', fillMode: 'both' as const };
  return { forwards: { old: out, new: inn }, backwards: { old: { ...out, name: `ma-vt-${kind}-in`, direction: 'reverse' as const }, new: { ...inn, name: `ma-vt-${kind}-out`, direction: 'reverse' as const } } };
};

const animate: TransitionAnimationValue =
  preset === 'fade' ? fade({ duration: 'var(--ma-duration)' }) : preset === 'slide' ? slide({ duration: 'var(--ma-duration)' }) : preset === 'morph' ? 'initial' : preset === 'none' ? 'none' : own(preset);
---

{
  name ? (
    <Tag class:list={['ma-page', className]} transition:name={name} transition:animate={animate} {...rest}>
      <slot />
    </Tag>
  ) : (
    <Tag class:list={['ma-page', className]} transition:animate={animate} {...rest}>
      <slot />
    </Tag>
  )
}

<style is:global>
  @layer components {
    :where(.ma-page) {
      display: block;
    }
    @media (prefers-reduced-motion: reduce) {
      /* Astro's router already drops view-transition animations under reduced motion. */
      :where(.ma-page) {
        animation: none;
      }
    }
  }

  @keyframes ma-vt-rise-in {
    from {
      opacity: 0;
      translate: 0 var(--ma-travel-section, 48px);
    }
  }
  @keyframes ma-vt-rise-out {
    to {
      opacity: 0;
      translate: 0 calc(var(--ma-travel-section, 48px) * -0.5);
    }
  }
  @keyframes ma-vt-zoom-in {
    from {
      opacity: 0;
      scale: 0.96;
    }
  }
  @keyframes ma-vt-zoom-out {
    to {
      opacity: 0;
      scale: 1.03;
    }
  }
  @keyframes ma-vt-wipe-in {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  @keyframes ma-vt-wipe-out {
    from {
      clip-path: inset(0 0 0 0);
    }
    to {
      clip-path: inset(0 0 0 100%);
    }
  }
  /* scope: the old page sinks and dims behind, the new one rises as a sheet in front */
  @keyframes ma-vt-scope-in {
    from {
      translate: 0 100%;
    }
    to {
      translate: 0 0;
    }
  }
  @keyframes ma-vt-scope-out {
    from {
      scale: 1;
      opacity: 1;
    }
    to {
      scale: 0.92;
      opacity: 0.35;
    }
  }
</style>