Split Flap

---
/**
 * SplitFlap — a departures board. Every character is a cell whose letter is
 * a CSS counter on a registered integer: the integer transitions from blank
 * to the target letter's index in the charset, so the glyph is rewritten one
 * step at a time until it locks, and a flap on the cell turns once per step.
 * Composes Reveal for the scroll trigger; zero script of its own. The server
 * HTML carries the final text (.ma-sr + counters at their targets).
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';
import Reveal from './Reveal.astro';

interface Props extends HTMLAttributes<'span'> {
  /** The text. Boards are uppercase: letters are uppercased, characters outside the set render as ?. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Milliseconds per character step (one flap). Unset: the preset's --ma-stagger. */
  step?: number;
  /** Milliseconds between neighbouring cells starting. Unset: the preset's --ma-stagger-tight. */
  stagger?: number;
  /** Delay in ms before the first cell. */
  delay?: number;
  /** Play once and stay. */
  once?: boolean;
  /** Fraction visible to trigger. */
  threshold?: number;
}

const { text, as = 'span', step, stagger, delay, once, threshold, class: className, style, ...rest } = Astro.props;

// Index 0 is blank; the @counter-style below lists the same symbols in the same order.
const SET = ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-/+&?!';
// one cell per grapheme, not per code point: an emoji with a skin tone is one ? on the board, not two
const cells = Array.from(new Intl.Segmenter().segment(text), (g) => g.segment).map((c) => {
  const i = SET.indexOf(c.toUpperCase());
  return { c, to: c === ' ' ? -1 : i >= 0 ? i : SET.indexOf('?') };
});
const vars = [step !== undefined && `--ma-flap-step:${step}ms`, stagger !== undefined && `--ma-flap-stagger:${stagger}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
// dir="auto": the board is a flex row, which follows the page's direction, so on a right-to-left page it spelled its
// text back to front. The board takes its direction from its own text instead.
---

<Reveal as={as} from="none" delay={delay} once={once} threshold={threshold} class={['ma-flap', className].filter(Boolean).join(' ')} dir="auto" style={vars || undefined} {...rest}>
  {cells.map(({ to }, i) => (to < 0 ? <span class="ma-flap__gap" aria-hidden="true"></span> : <span class="ma-flap__cell" aria-hidden="true" style={`--ma-flap-to:${to};--ma-i:${i}`}><b class="ma-flap__top"></b><b class="ma-flap__bot"></b><b class="ma-flap__flap"></b></span>))}
  <span class="ma-sr">{text}</span>
</Reveal>

<style is:global>
  @property --ma-flap-n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
  }

  @layer components {
    /* the charset, in the same order as the server's SET — value 0 is the blank */
    @counter-style ma-flap-set {
      system: fixed 0;
      symbols: ' ' 'A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O' 'P' 'Q' 'R' 'S' 'T' 'U' 'V' 'W' 'X' 'Y' 'Z' '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' ':' '.' '-' '/' '+' '&' '?' '!';
    }
    :where(.ma-flap) {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.08em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    :where(.ma-flap__gap) {
      width: 0.5em;
    }
    :where(.ma-flap__cell) {
      position: relative;
      display: inline-grid;
      min-width: 1em;
      height: 1.3em;
      padding-inline: 0.1em;
      perspective: 6em;
      --ma-flap-n: var(--ma-flap-to, 0);
      /* counter-set, not counter-reset: WebKit paints a stale glyph for siblings when a counter-reset value changes through a transition (found in 7B) */
      counter-set: ma-flap var(--ma-flap-n);
      /* linear on purpose: an integer ramp, so every character step takes the same time */
      transition: --ma-flap-n calc(var(--ma-flap-to, 0) * var(--ma-flap-step, var(--ma-stagger))) linear calc(var(--ma-r-delay, 0ms) + var(--ma-i, 0) * var(--ma-flap-stagger, var(--ma-stagger-tight)));
    }
    /* the hinge */
    :where(.ma-flap__cell)::after {
      content: '';
      position: absolute;
      inset: 50% 0 auto 0;
      height: 1px;
      background: var(--ma-glow);
      pointer-events: none;
    }
    :where(.ma-flap__top),
    :where(.ma-flap__bot),
    :where(.ma-flap__flap) {
      grid-area: 1 / 1;
      display: grid;
      place-items: center;
      font-weight: inherit;
      border-radius: 0.12em;
      background: var(--ma-edge);
    }
    :where(.ma-flap__top)::before,
    :where(.ma-flap__bot)::before,
    :where(.ma-flap__flap)::before {
      content: counter(ma-flap, ma-flap-set);
      white-space: pre;
    }
    :where(.ma-flap__top),
    :where(.ma-flap__flap) {
      clip-path: inset(0 0 50% 0);
    }
    :where(.ma-flap__bot) {
      clip-path: inset(50% 0 0 0);
    }
    :where(.ma-flap__flap) {
      transform-origin: 50% 50%;
      backface-visibility: hidden;
    }
    /* Under the JS gate the cells start blank and step to their letter once Reveal marks the board in view; the flap turns once per step. */
    :where([data-ma-js] .ma-flap:not(.ma-in) .ma-flap__cell) {
      --ma-flap-n: 0;
      transition: none;
    }
    :where(.ma-flap.ma-in .ma-flap__flap) {
      animation: ma-flap-turn var(--ma-flap-step, var(--ma-stagger)) var(--ma-ease-in) calc(var(--ma-r-delay, 0ms) + var(--ma-i, 0) * var(--ma-flap-stagger, var(--ma-stagger-tight))) var(--ma-flap-to, 0);
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-flap__cell) {
        transition: none;
      }
      :where(.ma-flap.ma-in .ma-flap__flap) {
        animation: none;
      }
    }
    /* Print: every cell at its letter. A board printed before it scrolled into view was a row of blank cells. */
    @media print {
      :where(.ma-flap .ma-flap__cell) {
        --ma-flap-n: var(--ma-flap-to, 0);
        transition: none;
      }
      :where(.ma-flap .ma-flap__flap) {
        animation: none;
      }
    }
  }

  @keyframes ma-flap-turn {
    from {
      transform: rotateX(0);
    }
    to {
      transform: rotateX(-90deg);
    }
  }
</style>