Text Roll

---
/**
 * TextRoll — a label rolls up into a copy of itself on hover, one letter
 * after another. Two copies of the text are stacked in one grid cell and
 * clipped; each character translates by its own height on a per-index
 * delay, so the roll runs left to right. Zero JS. Hover on the element or
 * on the link or button that contains it.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** The text. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Delay between neighbouring characters in ms. Unset: the preset's --ma-stagger-tight. */
  step?: number;
  /** Per-character duration in ms. Unset: the preset's --ma-duration. */
  duration?: number;
}

const { text, as: Tag = 'span', step, duration, class: className, style, ...rest } = Astro.props;
// graphemes, not code points: an emoji with a skin tone or a letter with a combining accent rolls as one character
const chars = Array.from(new Intl.Segmenter().segment(text), (g) => g.segment);
const vars = [step !== undefined && `--ma-roll-step:${step}ms`, duration !== undefined && `--ma-roll-dur:${duration}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
// dir="auto": the characters are inline-blocks, which bidi orders by the page's direction, so Latin text on a
// right-to-left page rolled back to front. The element takes its direction from its own text instead.
---

<Tag class:list={['ma-roll', className]} dir="auto" style={vars || undefined} {...rest}>
  <span class="ma-roll__line" aria-hidden="true">{chars.map((c, i) => <span class="ma-roll__char" style={`--ma-i:${i}`}>{c}</span>)}</span>
  <span class="ma-roll__line ma-roll__line--next" aria-hidden="true">{chars.map((c, i) => <span class="ma-roll__char" style={`--ma-i:${i}`}>{c}</span>)}</span>
  <span class="ma-sr">{text}</span>
</Tag>

<style is:global>
  @layer components {
    :where(.ma-roll) {
      display: inline-grid;
      overflow: clip;
      line-height: 1.15;
      vertical-align: bottom;
    }
    :where(.ma-roll__line) {
      grid-area: 1 / 1;
      white-space: pre;
    }
    :where(.ma-roll__char) {
      display: inline-block;
      transition: translate var(--ma-roll-dur, var(--ma-duration)) var(--ma-ease);
      transition-delay: calc(var(--ma-i, 0) * var(--ma-roll-step, var(--ma-stagger-tight)));
    }
    :where(.ma-roll__line--next .ma-roll__char) {
      translate: 0 100%;
    }
    @media (hover: hover) {
      :where(.ma-roll:hover .ma-roll__line .ma-roll__char),
      :where(:is(a, button, label):hover .ma-roll .ma-roll__line .ma-roll__char) {
        translate: 0 -100%;
      }
      :where(.ma-roll:hover .ma-roll__line--next .ma-roll__char),
      :where(:is(a, button, label):hover .ma-roll .ma-roll__line--next .ma-roll__char) {
        translate: 0 0;
      }
    }
    :where(:is(a, button):focus-visible .ma-roll .ma-roll__line .ma-roll__char) {
      translate: 0 -100%;
    }
    :where(:is(a, button):focus-visible .ma-roll .ma-roll__line--next .ma-roll__char) {
      translate: 0 0;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-roll__char) {
        transition: none;
      }
    }
  }
</style>