Tracing Beam

---
/**
 * TracingBeam — a line beside an article fills as it is read, a dot at its
 * head. Zero JS: one registered percentage animates on the article's own
 * view() timeline over its `contain` range, and both the fill's height and
 * the head's position read that one value. Without scroll timelines, and
 * under reduced motion, the line is full and still. Correct for an article
 * shorter than the viewport too: the range then runs from fully visible at
 * the bottom to fully visible at the top.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  as?: HTMLTag;
  /** Beam colour. */
  color?: string;
  /** Gutter the line lives in, any CSS length. */
  offset?: string;
  /** Line width in px. */
  width?: number;
  /** animation-range on the article's view timeline. */
  range?: string;
}

const { as: Tag = 'div', color = 'var(--ma-ink)', offset = '2.5rem', width = 2, range = 'contain 0% contain 100%', class: className, style, ...rest } = Astro.props;
const vars = [`--ma-trace-c:${color}`, `--ma-trace-gutter:${offset}`, `--ma-trace-w:${width}px`, `--ma-trace-range:${range}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-trace', className]} style={vars} {...rest}>
  <div class="ma-trace__rail" aria-hidden="true">
    <span class="ma-trace__line"></span>
    <span class="ma-trace__fill"></span>
    <span class="ma-trace__head"></span>
  </div>
  <div class="ma-trace__body"><slot /></div>
</Tag>

<style is:global>
  @property --ma-trace-p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 100%;
  }

  @layer components {
    :where(.ma-trace) {
      position: relative;
      display: grid;
      grid-template-columns: var(--ma-trace-gutter, 2.5rem) minmax(0, 1fr);
    }
    :where(.ma-trace__rail) {
      position: relative;
      grid-column: 1;
      grid-row: 1;
    }
    :where(.ma-trace__body) {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }
    :where(.ma-trace__line),
    :where(.ma-trace__fill) {
      position: absolute;
      top: 0;
      left: calc(50% - var(--ma-trace-w, 2px) / 2);
      width: var(--ma-trace-w, 2px);
      border-radius: 999px;
    }
    :where(.ma-trace__line) {
      height: 100%;
      background: var(--ma-edge);
    }
    :where(.ma-trace__fill) {
      height: var(--ma-trace-p, 100%);
      background: linear-gradient(to bottom, color-mix(in srgb, var(--ma-trace-c, var(--ma-ink)) 35%, transparent), var(--ma-trace-c, var(--ma-ink)));
    }
    :where(.ma-trace__head) {
      position: absolute;
      top: var(--ma-trace-p, 100%);
      left: 50%;
      width: calc(var(--ma-trace-w, 2px) * 5);
      height: calc(var(--ma-trace-w, 2px) * 5);
      translate: -50% -50%;
      border-radius: 50%;
      background: var(--ma-trace-c, var(--ma-ink));
      box-shadow: 0 0 0 calc(var(--ma-trace-w, 2px) * 2) color-mix(in srgb, var(--ma-trace-c, var(--ma-ink)) 22%, transparent);
    }
    @supports (animation-timeline: view()) {
      :where(.ma-trace) {
        animation: ma-trace linear both;
        animation-range: var(--ma-trace-range, contain 0% contain 100%);
      }
      /* the timeline in its own rule, so a minifier cannot fold it into the shorthand */
      :where(html) :where(.ma-trace) {
        animation-timeline: view();
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-trace) {
        animation: none;
      }
    }
  }

  @keyframes ma-trace {
    from {
      --ma-trace-p: 0%;
    }
    to {
      --ma-trace-p: 100%;
    }
  }
</style>