Scroll Expand

---
/**
 * ScrollExpand — an image that starts narrow and rounded and opens to the
 * full width as it scrolls into view, zero JS. Nothing about the layout
 * changes: the element is full width from the start and a clip-path inset
 * (with its rounding) shrinks it, animated on the element's own view()
 * timeline; the content underneath scales up a touch for depth. Without
 * scroll timelines, and under reduced motion, it is simply full width.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  as?: HTMLTag;
  /** Starting width as a fraction of the full width, 0.2–1. */
  from?: number;
  /** Starting corner radius, any CSS length; it eases to `radiusEnd`. */
  radius?: string;
  radiusEnd?: string;
  /** Starting scale of the content inside. */
  scale?: number;
  /** animation-range on the element's view timeline. */
  range?: string;
}

const { as: Tag = 'div', from = 0.6, radius = '2rem', radiusEnd = '0px', scale = 0.92, range = 'entry 0% cover 45%', class: className, style, ...rest } = Astro.props;
const inset = ((1 - Math.max(0.2, Math.min(from, 1))) / 2) * 100;
const vars = [`--ma-expand-inset:${inset}%`, `--ma-expand-r:${radius}`, `--ma-expand-r-end:${radiusEnd}`, `--ma-expand-scale:${scale}`, `--ma-expand-range:${range}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-expand', className]} style={vars} {...rest}>
  <div class="ma-expand__inner"><slot /></div>
</Tag>

<style is:global>
  @layer components {
    :where(.ma-expand) {
      display: block;
      overflow: clip;
    }
    :where(.ma-expand__inner) {
      display: block;
      transform-origin: 50% 50%;
    }
    :where(.ma-expand__inner > img),
    :where(.ma-expand__inner > picture > img),
    :where(.ma-expand__inner > video) {
      display: block;
      width: 100%;
      height: auto;
    }
    @supports (animation-timeline: view()) {
      :where(.ma-expand) {
        animation: ma-expand linear both;
        animation-range: var(--ma-expand-range, entry 0% cover 45%);
      }
      :where(.ma-expand__inner) {
        animation: ma-expand-inner linear both;
        animation-range: var(--ma-expand-range, entry 0% cover 45%);
      }
      /* the timeline in its own rule: a minifier folds it into the animation shorthand otherwise, and the shorthand cannot carry it */
      :where(html) :where(.ma-expand),
      :where(html) :where(.ma-expand__inner) {
        animation-timeline: view();
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-expand),
      :where(.ma-expand__inner) {
        animation: none;
      }
    }
  }

  @keyframes ma-expand {
    from {
      clip-path: inset(0 var(--ma-expand-inset, 20%) round var(--ma-expand-r, 2rem));
    }
    to {
      clip-path: inset(0 0 round var(--ma-expand-r-end, 0px));
    }
  }
  @keyframes ma-expand-inner {
    from {
      scale: var(--ma-expand-scale, 0.92);
    }
    to {
      scale: 1;
    }
  }
</style>