Bubble Text

---
/**
 * BubbleText — the letter under the cursor swells to the heaviest weight
 * and lifts a little; its neighbours follow at half and a quarter. Letters
 * are split on the server; the neighbours are :hover + * and :has(+ :hover),
 * so it is pure CSS. Needs a variable font for a continuous swell; static
 * families step between the weights they have.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** The text. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Resting weight. */
  min?: number;
  /** Weight under the cursor. */
  max?: number;
  /** Duration in ms. Unset: the preset's --ma-duration. */
  duration?: number;
}

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

<Tag class:list={['ma-bubble', className]} dir="auto" style={vars} {...rest}>
  {text.split(/(\s+)/).map((word) =>
    /^\s+$/.test(word) ? (
      ' '
    ) : (
      <span class="ma-bubble__word" aria-hidden="true">
        {graphemes(word).map((c) => <span class="ma-bubble__char">{c}</span>)}
      </span>
    ),
  )}
  <span class="ma-sr">{text}</span>
</Tag>

<style is:global>
  @layer components {
    :where(.ma-bubble) {
      white-space: pre-wrap;
      font-weight: var(--ma-bubble-min, 400);
    }
    /* a word is one inline-block, so lines break between words, never between letters */
    :where(.ma-bubble__word) {
      display: inline-block;
      white-space: nowrap;
    }
    :where(.ma-bubble__char) {
      display: inline-block;
      font-weight: var(--ma-bubble-min, 400);
      transition:
        font-weight var(--ma-bubble-dur, var(--ma-duration)) var(--ma-ease),
        translate var(--ma-bubble-dur, var(--ma-duration)) var(--ma-ease);
    }
    @media (hover: hover) {
      :where(.ma-bubble__char:hover) {
        font-weight: var(--ma-bubble-max, 800);
        translate: 0 calc(-1 * var(--ma-travel-hover));
        transition-duration: var(--ma-duration-fast);
      }
      /* neighbours: half the swell, then a quarter */
      :where(.ma-bubble__char:hover + .ma-bubble__char),
      :where(.ma-bubble__char:has(+ .ma-bubble__char:hover)) {
        font-weight: calc((var(--ma-bubble-min, 400) + var(--ma-bubble-max, 800)) / 2);
        translate: 0 calc(-0.5 * var(--ma-travel-hover));
        transition-duration: var(--ma-duration-fast);
      }
      :where(.ma-bubble__char:hover + .ma-bubble__char + .ma-bubble__char),
      :where(.ma-bubble__char:has(+ .ma-bubble__char + .ma-bubble__char:hover)) {
        font-weight: calc(var(--ma-bubble-min, 400) + (var(--ma-bubble-max, 800) - var(--ma-bubble-min, 400)) / 4);
        translate: 0 calc(-0.25 * var(--ma-travel-hover));
        transition-duration: var(--ma-duration-fast);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-bubble__char) {
        transition: none;
        translate: 0 0;
      }
    }
  }
</style>