Glitch Text

---
/**
 * GlitchText — an RGB split and a few jumping slices, every few seconds.
 * The text is painted once; two pseudo-element copies (content: attr) in
 * two colours are clipped to horizontal slices and offset by the hover
 * travel token, on step-end keyframes so nothing tweens — a glitch that
 * eases is a wobble. The burst is the last tenth of the period; the rest
 * of the time the text is clean. Zero JS. Reduced motion: still.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** The text. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Seconds between bursts. */
  period?: number;
  /** Horizontal offset of the split in px. Unset: the preset's --ma-travel-hover. */
  shift?: number;
  /** Skew of the base text during the burst, degrees. */
  skew?: number;
  /** Colours of the two copies. */
  colorA?: string;
  colorB?: string;
}

const { text, as: Tag = 'span', period = 4, shift, skew = 3, colorA = 'oklch(0.65 0.22 25)', colorB = 'oklch(0.72 0.14 210)', class: className, style, ...rest } = Astro.props;
const vars = [`--ma-glitch-period:${period}s`, shift !== undefined && `--ma-glitch-shift:${shift}px`, `--ma-glitch-skew:${skew}deg`, `--ma-glitch-a:${colorA}`, `--ma-glitch-b:${colorB}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-glitch', className]} data-text={text} style={vars} {...rest}>{text}</Tag>

<style is:global>
  @layer components {
    :where(.ma-glitch) {
      position: relative;
      display: inline-block;
      animation: ma-glitch-root var(--ma-glitch-period, var(--ma-dur-ambient)) step-end infinite;
    }
    :where(.ma-glitch)::before,
    :where(.ma-glitch)::after {
      /* paint only: an empty alternative after the slash keeps the two copies out of the element's accessible name, which
         read the text three times. The first line is for engines without that syntax. */
      content: attr(data-text);
      content: attr(data-text) / '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      clip-path: inset(100% 0 0 0);
      animation: ma-glitch-a var(--ma-glitch-period, var(--ma-dur-ambient)) step-end infinite;
    }
    :where(.ma-glitch)::before {
      color: var(--ma-glitch-a);
    }
    :where(.ma-glitch)::after {
      color: var(--ma-glitch-b);
      animation-name: ma-glitch-b;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-glitch) {
        animation: none;
      }
      :where(.ma-glitch)::before,
      :where(.ma-glitch)::after {
        content: none;
        animation: none;
      }
    }
  }

  /* the burst is the last tenth of the period; step-end so every frame is a jump */
  @keyframes ma-glitch-a {
    0%,
    89% {
      clip-path: inset(100% 0 0 0);
      translate: 0 0;
    }
    90% {
      clip-path: inset(8% 0 62% 0);
      translate: var(--ma-glitch-shift, var(--ma-travel-hover)) 0;
    }
    92% {
      clip-path: inset(52% 0 18% 0);
      translate: calc(-1 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
    }
    94% {
      clip-path: inset(24% 0 44% 0);
      translate: var(--ma-glitch-shift, var(--ma-travel-hover)) 0;
    }
    96% {
      clip-path: inset(70% 0 6% 0);
      translate: calc(-0.5 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
    }
    98%,
    100% {
      clip-path: inset(100% 0 0 0);
      translate: 0 0;
    }
  }
  @keyframes ma-glitch-b {
    0%,
    89% {
      clip-path: inset(100% 0 0 0);
      translate: 0 0;
    }
    90% {
      clip-path: inset(60% 0 10% 0);
      translate: calc(-1 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
    }
    92% {
      clip-path: inset(14% 0 66% 0);
      translate: var(--ma-glitch-shift, var(--ma-travel-hover)) 0;
    }
    94% {
      clip-path: inset(40% 0 30% 0);
      translate: calc(-1 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
    }
    96% {
      clip-path: inset(2% 0 82% 0);
      translate: calc(0.5 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
    }
    98%,
    100% {
      clip-path: inset(100% 0 0 0);
      translate: 0 0;
    }
  }
  @keyframes ma-glitch-root {
    0%,
    89% {
      transform: none;
    }
    91% {
      transform: skewX(calc(-1 * var(--ma-glitch-skew, 3deg)));
    }
    93% {
      transform: skewX(var(--ma-glitch-skew, 3deg));
    }
    95%,
    100% {
      transform: none;
    }
  }
</style>