Stroke Draw

---
/**
 * StrokeDraw — the outline of a headline draws itself, then the fill comes
 * in. -webkit-text-stroke cannot be drawn as a stroke, so the text is an
 * SVG <text>, one <tspan> per character, each stroked with a dash longer
 * than any glyph's outline and offset to zero on a per-index delay; the
 * fill fades in once the stroke has landed. pathLength is not defined for
 * <text> in any engine, so the dash is em-based. Composes Reveal for the
 * trigger; zero script of its own. The server HTML holds the final text.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';
import Reveal from './Reveal.astro';

interface Props extends HTMLAttributes<'span'> {
  /** The text — one line. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Stroke width, relative to a 100-unit font size (2 ≈ 2% of the cap height). */
  width?: number;
  /** Dash length per glyph in em; the outline of any glyph must fit inside it. */
  dash?: number;
  /** Stroke colour. */
  color?: string;
  /** Fill after the stroke. false leaves the outline. */
  fill?: boolean;
  /** Draw duration per glyph in ms. Unset: the preset's --ma-duration-slow. */
  duration?: number;
  /** Delay between neighbouring glyphs in ms. Unset: the preset's --ma-stagger. */
  step?: number;
  /** Delay in ms before the first glyph. */
  delay?: number;
  /** Play once and stay. */
  once?: boolean;
  /** Fraction visible to trigger. */
  threshold?: number;
}

const { text, as = 'span', width = 2, dash = 5, color = 'currentColor', fill = true, duration, step, delay, once, threshold, class: className, style, ...rest } = Astro.props;

// Advance widths in em, rough Inter metrics: enough to size the viewBox; textLength then justifies the spacing.
const advance = (c: string) => (c === ' ' ? 0.28 : /[ilj.,'!|:;]/.test(c) ? 0.3 : /[frt1I\[\]()]/.test(c) ? 0.38 : /[mwMW]/.test(c) ? 0.9 : /[A-Z0-9]/.test(c) ? 0.68 : 0.56);
const FS = 100;
// one tspan per grapheme, not per code point: a combining accent in a tspan of its own is drawn apart from its letter
const chars = Array.from(new Intl.Segmenter().segment(text), (g) => g.segment);
const w = Math.round(chars.reduce((n, c) => n + advance(c), 0) * FS);
const h = Math.round(FS * 1.25);
const vars = [`--ma-stroke-w:${width}`, `--ma-stroke-dash:${dash}em`, `--ma-stroke-color:${color}`, !fill && '--ma-stroke-fill:transparent', duration !== undefined && `--ma-stroke-dur:${duration}ms`, step !== undefined && `--ma-stroke-step:${step}ms`, typeof style === 'string' ? style : '']
  .filter(Boolean)
  .join(';');
---

<Reveal as={as} from="none" delay={delay} once={once} threshold={threshold} class={['ma-stroke', className].filter(Boolean).join(' ')} style={vars} {...rest}>
  <svg class="ma-stroke__svg" viewBox={`0 0 ${w} ${h}`} aria-hidden="true">
    <text x="0" y={FS} font-size={FS} textLength={w} lengthAdjust="spacing">{chars.map((c, i) => <tspan class="ma-stroke__glyph" style={`--ma-i:${i}`}>{c}</tspan>)}</text>
  </svg>
  <span class="ma-sr">{text}</span>
</Reveal>

<style is:global>
  @layer components {
    :where(.ma-stroke) {
      display: block;
    }
    /* direction: ltr. The line is laid out on the server from x = 0 with textLength, which is a left-to-right layout;
       under a right-to-left page the text started at 0 and ran off the left edge (or reordered its punctuation). */
    :where(.ma-stroke__svg) {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
      direction: ltr;
      font-family: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
    }
    :where(.ma-stroke__glyph) {
      fill: var(--ma-stroke-fill, currentColor);
      stroke: var(--ma-stroke-color, currentColor);
      stroke-width: var(--ma-stroke-w, 2);
      stroke-linejoin: round;
      stroke-linecap: round;
      paint-order: stroke;
      stroke-dasharray: var(--ma-stroke-dash, 5em);
      stroke-dashoffset: 0;
      transition:
        stroke-dashoffset var(--ma-stroke-dur, var(--ma-duration-slow)) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-i, 0) * var(--ma-stroke-step, var(--ma-stagger))),
        fill var(--ma-duration) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-i, 0) * var(--ma-stroke-step, var(--ma-stagger)) + var(--ma-stroke-dur, var(--ma-duration-slow)));
    }
    /* Under the JS gate the outlines start undrawn and unfilled; Reveal's .ma-in lets the transitions run. */
    :where([data-ma-js] .ma-stroke:not(.ma-in) .ma-stroke__glyph) {
      stroke-dashoffset: var(--ma-stroke-dash, 5em);
      fill: transparent;
      transition: none;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-stroke__glyph) {
        transition: none;
      }
    }
    /* Print: drawn and filled. A headline printed before it scrolled into view was an empty box. */
    @media print {
      :where(.ma-stroke .ma-stroke__glyph) {
        stroke-dashoffset: 0;
        fill: var(--ma-stroke-fill, currentColor);
        transition: none;
      }
    }
  }
</style>