Fill Text

---
/**
 * FillText — a statement that fills in as it is read: the words start faint and take their full colour in reading
 * order, line after line, while the block crosses the viewport. One inline span with a two-colour gradient clipped to
 * the text; a scroll-driven timeline moves the gradient's edge from the end of the last line to the start of the
 * first, so the fill follows the lines as they wrap, whatever the width. Zero JavaScript.
 *
 * Where scroll-driven animation is missing, and under reduced motion, the text is simply full colour.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'p'> {
  /** Element to render. */
  as?: HTMLTag;
  /** The statement; the default slot wins. */
  text?: string;
  /** The colour the words start at; unset, the text colour at 18 % over the ground. */
  faint?: string;
  /** Where in the block's crossing the fill starts and ends, as animation-range values. */
  start?: string;
  end?: string;
}

const { as: Tag = 'p', text, faint, start = 'entry 90%', end = 'cover 58%', class: className, style, ...rest } = Astro.props;
const vars = [faint && `--ma-fill-faint:${faint}`, `--ma-fill-start:${start}`, `--ma-fill-end:${end}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-fill', className]} style={vars} {...rest}><span class="ma-fill__run">{Astro.slots.has('default') ? <slot /> : text}</span></Tag>

<style is:global>
  @layer components {
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        :where(.ma-fill__run) {
          /* the fill, not the colour: color stays the text's, so currentColor in the gradient is the text colour */
          -webkit-text-fill-color: transparent;
          background-image: linear-gradient(90deg, currentColor 50%, var(--ma-fill-faint, color-mix(in oklab, currentColor 18%, transparent)) 50%);
          background-size: 200% 100%;
          background-position: 100% 0;
          background-repeat: no-repeat;
          -webkit-background-clip: text;
          background-clip: text;
          animation: ma-fill-sweep linear both;
        }
        /* the timeline in a rule of its own, with other selector text: lightningcss folds a timeline written beside
           the animation shorthand into it, and the shorthand then resets it (the cost ladder's trap) */
        :where(.ma-fill .ma-fill__run) {
          animation-timeline: view();
          animation-range: var(--ma-fill-start, entry 90%) var(--ma-fill-end, cover 58%);
        }
      }
    }
  }
  @keyframes ma-fill-sweep {
    to { background-position: 0 0; }
  }
</style>