@moonarc/core 0.1.0

package/src/components/VanishInput.astro

@@ -0,0 +1,240 @@
+---
+/**
+ * VanishInput — placeholders that take turns, and text that blurs away on
+ * submit. A native <input> inside your form; the `placeholder` attribute
+ * carries the first suggestion (what a screen reader and a page without
+ * CSS get) and an aria-hidden overlay cycles through the rest: one
+ * registered number runs 0 → 1 over the whole cycle and each suggestion
+ * computes its own on/off from it (the AnimatedList technique), so the
+ * entrances and exits are transitions on the preset curve and no keyframe
+ * knows how many there are. The overlay hides on focus and once there is a
+ * value. The vanish is a small script listening for `submit` on
+ * `document`: when your handler has called preventDefault() (a fetch), the
+ * value is copied into one span per character, each blurs, rises and fades
+ * on the stagger token, the input is cleared, and the spans go once the
+ * animation ends. When nothing prevented the default the page is about to
+ * leave and the script does nothing.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'placeholder'> {
+  /** Suggestions shown in turn; the first is the placeholder attribute. */
+  placeholders: string[];
+  name?: string;
+  /** Text-like types only: the characters must be visible to vanish. */
+  type?: 'text' | 'email' | 'search' | 'url';
+  /** Visible label as <label for>. Without it, pass aria-label. */
+  label?: string;
+  /** The input's id and the label's for. Unset, unique per render. */
+  id?: string;
+  /** Off by default, so the browser's suggestion list does not cover the hints; yours replaces it (one attribute either way). */
+  autocomplete?: string | null;
+}
+
+const { placeholders, name = 'q', type = 'text', label, id, autocomplete = 'off', class: className, style, ...rest } = Astro.props;
+const list = placeholders.length ? placeholders : ['Type here'];
+// unique per render, not per name: two waitlist forms on one page both name their field "email"
+const inputId = id ?? `ma-vanish-${name}-${Math.random().toString(36).slice(2, 7)}`;
+const vars = [`--ma-vanish-n:${list.length}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+{label && <label class="ma-vanish__label" for={inputId}>{label}</label>}
+<span class:list={['ma-vanish', className]} style={vars} data-ma-vanish>
+  <input id={inputId} class="ma-vanish__input" type={type} name={name} placeholder={list[0]} autocomplete={autocomplete} {...rest} />
+  {list.length > 1 && (
+    <span class="ma-vanish__cycle" aria-hidden="true">
+      {list.map((p, i) => <span class="ma-vanish__hint" style={`--ma-vanish-i:${i}`}>{p}</span>)}
+    </span>
+  )}
+  <span class="ma-vanish__ghost" aria-hidden="true"></span>
+</span>
+
+<style is:global>
+  @property --ma-vanish-t {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+  @keyframes ma-vanish-cycle {
+    from {
+      --ma-vanish-t: 0;
+    }
+    to {
+      --ma-vanish-t: 1;
+    }
+  }
+  @keyframes ma-vanish-out {
+    to {
+      opacity: 0;
+      translate: 0 calc(var(--ma-travel-enter) * -1);
+      filter: blur(6px);
+    }
+  }
+  @layer components {
+    :where(.ma-vanish) {
+      /* one suggestion per slot; the whole cycle is n slots, on the ambient duration doubled */
+      --ma-vanish-slot: calc(var(--ma-dur-ambient) * 2);
+      position: relative;
+      display: inline-grid;
+      inline-size: 100%;
+      color: inherit;
+    }
+    :where(.ma-vanish__label) {
+      display: block;
+      margin-block-end: 0.5em;
+      font-size: 0.875em;
+    }
+    :where(.ma-vanish__input) {
+      grid-area: 1 / 1;
+      inline-size: 100%;
+      margin: 0;
+      padding: 0.7em 1em;
+      border: 1px solid var(--ma-edge);
+      /* a pill unless you say otherwise: set --ma-vanish-radius on the component or any ancestor */
+      border-radius: var(--ma-vanish-radius, 999px);
+      background: var(--ma-panel);
+      color: inherit;
+      font: inherit;
+      line-height: 1.4;
+      appearance: none;
+      -webkit-appearance: none;
+      transition: border-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-vanish__input:focus-visible) {
+      outline: 2px solid var(--ma-ink);
+      outline-offset: 2px;
+    }
+    /* the vanish empties a required field in the submit dispatch itself, so a form that is sending or has sent (done, or
+       exists: already on the list) is not an error. The red is a hook: a caller on a coloured ground sets
+       --ma-vanish-invalid to a colour that keeps 3 : 1 there */
+    :where(.ma-vanish__input:user-invalid:not(form[data-pending] *, form[data-state='done'] *, form[data-state='exists'] *)) {
+      border-color: var(--ma-vanish-invalid, #e0563f);
+    }
+    :where(.ma-vanish__input:disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    /* secondary text at --ma-dim through the colour: opacity is what shows and hides the placeholder and the hints */
+    :where(.ma-vanish__input)::placeholder {
+      color: color-mix(in oklab, var(--ma-ink) calc(var(--ma-dim, 0.7) * 100%), transparent);
+      opacity: 1;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    /* while the overlay cycles the native placeholder is invisible; on focus, or with a value, it is the other way round */
+    :where(.ma-vanish:has(.ma-vanish__cycle) .ma-vanish__input:not(:focus):placeholder-shown)::placeholder {
+      opacity: 0;
+    }
+    :where(.ma-vanish__cycle) {
+      grid-area: 1 / 1;
+      display: grid;
+      align-items: center;
+      padding: 0.7em 1em;
+      border: 1px solid transparent;
+      line-height: 1.4;
+      color: color-mix(in oklab, var(--ma-ink) calc(var(--ma-dim, 0.7) * 100%), transparent);
+      overflow: clip;
+      pointer-events: none;
+      animation: ma-vanish-cycle calc(var(--ma-vanish-n) * var(--ma-vanish-slot)) linear infinite;
+    }
+    :where(.ma-vanish__hint) {
+      /* the slot on now: k = floor(t × n); this one is on when k = i — a square, so no abs(): 1 − (k − i)² is 1 at k = i and ≤ 0 elsewhere */
+      --ma-vanish-k: round(down, var(--ma-vanish-t) * var(--ma-vanish-n));
+      --ma-vanish-on: clamp(0, 1 - (var(--ma-vanish-k) - var(--ma-vanish-i)) * (var(--ma-vanish-k) - var(--ma-vanish-i)), 1);
+      grid-area: 1 / 1;
+      white-space: nowrap;
+      overflow: clip;
+      text-overflow: ellipsis;
+      opacity: var(--ma-vanish-on);
+      translate: 0 calc((1 - var(--ma-vanish-on)) * var(--ma-travel-hover) * 2);
+      transition:
+        opacity var(--ma-duration) var(--ma-ease-out),
+        translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-vanish:has(.ma-vanish__input:focus) .ma-vanish__cycle),
+    :where(.ma-vanish:has(.ma-vanish__input:not(:placeholder-shown)) .ma-vanish__cycle) {
+      opacity: 0;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    /* the vanish: one span per character over the field, blurred away on the exit curve, staggered on the tight token */
+    :where(.ma-vanish__ghost) {
+      grid-area: 1 / 1;
+      display: flex;
+      align-items: center;
+      padding: 0.7em 1em;
+      border: 1px solid transparent;
+      line-height: 1.4;
+      white-space: pre;
+      overflow: clip;
+      pointer-events: none;
+    }
+    :where(.ma-vanish__ghost > i) {
+      font-style: normal;
+      animation: ma-vanish-out var(--ma-duration) var(--ma-ease-in) calc(var(--ma-vanish-i) * var(--ma-stagger-tight)) both;
+    }
+    /* while the characters leave, the field shows nothing of its own — no placeholder, no cycle — so the exit is the only thing moving */
+    :where(.ma-vanish[data-vanish] .ma-vanish__input)::placeholder,
+    :where(.ma-vanish[data-vanish] .ma-vanish__cycle) {
+      opacity: 0;
+    }
+    @media (forced-colors: active) {
+      :where(.ma-vanish__input) {
+        border-color: ButtonText;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-vanish__cycle) {
+        animation: none;
+        display: none;
+      }
+      :where(.ma-vanish:has(.ma-vanish__cycle) .ma-vanish__input:not(:focus):placeholder-shown)::placeholder {
+        opacity: 1;
+      }
+      :where(.ma-vanish__ghost > i) {
+        animation-duration: var(--ma-duration-fast);
+        animation-delay: 0s;
+        filter: none;
+        translate: 0 0;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount, prefersReducedMotion } from '../lib/runtime';
+
+  onMount<HTMLElement>('[data-ma-vanish]', (box, { signal }) => {
+    const input = box.querySelector('input')!;
+    const ghost = box.querySelector<HTMLElement>('.ma-vanish__ghost')!;
+    // on document, bubbling: it runs after every listener on the form itself, whatever the registration order, so defaultPrevented is final
+    document.addEventListener(
+      'submit',
+      (e) => {
+        if (e.target !== input.form || !e.defaultPrevented || !input.value) return;
+        if (prefersReducedMotion()) {
+          input.value = '';
+          return;
+        }
+        ghost.replaceChildren(
+          ...[...input.value].map((ch, i) => {
+            const s = document.createElement('i');
+            s.textContent = ch;
+            s.style.setProperty('--ma-vanish-i', String(i));
+            return s;
+          }),
+        );
+        input.value = '';
+        box.setAttribute('data-vanish', '');
+        const last = ghost.lastElementChild!;
+        last.addEventListener(
+          'animationend',
+          () => {
+            ghost.replaceChildren();
+            box.removeAttribute('data-vanish');
+          },
+          { once: true },
+        );
+      },
+      { signal },
+    );
+  });
+</script>

package/src/components/VanishInput.meta.ts

@@ -0,0 +1,41 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'VanishInput',
+  slug: 'vanish-input',
+  title: 'Vanish Input',
+  description: 'Placeholders that take turns, and text that blurs away on submit. A native input in your form: the first suggestion is the placeholder attribute, the rest cycle in an aria-hidden overlay driven by one registered number, so their entrances are transitions on the preset curve. A small script listens for submit on the document and, only when your handler prevented the default, splits the value into characters that rise and blur out on the stagger token.',
+  summary: 'An input whose placeholders take turns and whose text blurs away on submit, inside your own form.',
+  category: 'ui',
+  tier: 'B',
+  trigger: ['click', 'always'],
+  support: { baseline: 'newly', needs: ['property', 'has', 'css-math'], fallback: 'without @property or round() only the first placeholder shows; without :has() the native placeholder shows through the overlay' },
+  readout: '<VanishInput placeholders={hints} name="email">',
+  usage: `<form data-waitlist>\n  <VanishInput type="email" name="email" label="Email" autocomplete="email" placeholders={['you@studio.example', 'Join 2,398 on the list', 'No spam, one mail at launch']} required />\n  <button type="submit">Join</button>\n</form>\n\n<script>\n  // your handler prevents the navigation: that is what starts the vanish\n  document.querySelector('[data-waitlist]').addEventListener('submit', (e) => {\n    e.preventDefault();\n    fetch('/api/waitlist', { method: 'POST', body: new FormData(e.currentTarget) });\n  });\n</script>`,
+  props: [
+    { name: 'placeholders', type: 'string[]', description: 'Suggestions shown in turn. The first is the placeholder attribute, the one a screen reader announces and a page without CSS shows.' },
+    { name: 'name', type: 'string', default: "'q'", description: 'Form field name.' },
+    { name: 'type', type: "'text' | 'email' | 'search' | 'url'", default: "'text'", description: 'Text-like types only: the characters must be visible to vanish, so password is not one of them.' },
+    { name: 'label', type: 'string', description: 'Visible label as <label for>. Without it, pass aria-label.' },
+    { name: 'id', type: 'string', default: 'unique per render', description: 'The input\'s id, and the label\'s for. Unset, ma-vanish- with the name and a random suffix, so two forms on one page with a field of the same name never share an id. Yours wins.' },
+    { name: 'autocomplete', type: 'string', default: "'off'", description: 'Off by default, so the browser\'s suggestion list does not cover the cycling hints. Yours replaces it (the input carries one autocomplete attribute either way), so a waitlist field passes autocomplete="email".' },
+    { name: '--ma-vanish-radius', type: 'CSS length (custom property)', default: '999px', description: 'The field\'s corner radius, a pill by default. Set it in a rule or style on the component or any ancestor, e.g. var(--ma-radius-md, 0.5rem) to follow a theme\'s radius.' },
+    { name: '--ma-vanish-invalid', type: 'CSS colour (custom property)', default: '#e0563f', description: 'The border of a field the reader left invalid (:user-invalid). Set it in a rule or style on the component or any ancestor that knows its ground: a red that keeps 3 : 1 against it (WCAG 1.4.11), e.g. the theme\'s --destructive mixed with the ground\'s text on a coloured panel, where the fixed red falls to 2 : 1.' },
+  ],
+  reducedMotion: 'No cycle (the first placeholder stands), and on submit the field simply clears.',
+  clientRouter: 'Bound through the shared runtime; the document listener is removed before a swap and set again after it.',
+  craft: [
+    'The placeholder attribute is real and carries the first suggestion: assistive tech reads it, a page without CSS shows it, and :placeholder-shown keeps working. The cycling copies are an overlay a screen reader never meets.',
+    'The cycle is one registered number 0 → 1 over n slots; each suggestion computes k = round(down, t × n) and is on when k equals its index, through a clamped square so abs() is not needed. Because on/off is a computed value, opacity and translate are transitions on the preset curve, and the keyframes are the same for three suggestions or ten.',
+    'The submit listener is on the document, in the bubbling phase, on purpose: listeners on the form run in registration order, so a listener there could run before your handler and read defaultPrevented too early. On the document it always runs after everything on the form. It never calls preventDefault() itself: a form without a handler navigates as it should.',
+    'The vanish is CSS: one span per character, each with its index as a custom property, blur + rise + fade on the exit curve, delayed by index on the tight stagger token. The script only builds the spans, clears the field and removes them on animationend.',
+    'A handler that prevents the default after an await is too late for the animation (the event has finished dispatching). This is stated here rather than worked around.',
+    'The hints and the placeholder are secondary text at --ma-dim, like every other secondary text in the library, and the dimming is in the colour (the ink mixed toward transparent in oklab) and not in opacity, because opacity is what shows and hides them.',
+    'The error border is :user-invalid, so it never shows before the reader has typed or submitted, and not while the field\'s form carries data-pending, data-state="done" or data-state="exists": the vanish empties a required field inside the submit dispatch, and an address that is being sent, has been, or was already on the list, is not an error. A field outside a form, or in a form without those attributes, keeps the red border as usual. The red is --ma-vanish-invalid when set: a fixed hue cannot keep 3 : 1 on every ground, so a caller on a coloured panel gives its own.',
+  ],
+  related: ['prompt-input', 'typewriter', 'stateful-button'],
+  intents: ['placeholders and vanish effect', 'input with rotating placeholder', 'text vanishes on submit', 'animated placeholder input', 'search input hints cycle', 'waitlist input animation'],
+  replaces: ['PlaceholdersAndVanishInput (Aceternity)', 'VanishInput (Cult UI)'],
+  // the waitlist field (7G step 0b): a visible label, the caller's autocomplete — one attribute, email — and an id per render
+  fixture: { props: { name: 'email', type: 'email', label: 'Email', autocomplete: 'email', placeholders: ['Fixture content for VanishInput', 'Second hint'] }, expect: 'Fixture content for VanishInput' },
+} satisfies ComponentMeta;

package/src/components/VideoDialog.astro

@@ -0,0 +1,230 @@
+---
+/**
+ * VideoDialog — a poster with a play button that opens the video in a
+ * dialog. The trigger is an invoker, so the dialog opens without any
+ * script; `morph` grows it out of the poster (Dialog morph). The script is
+ * what a dialog cannot do on its own: a file plays when it opens and stops
+ * when it closes; an embed's src is set when the dialog opens and blanked
+ * when it closes, so an iframe never loads behind a closed dialog and never
+ * keeps talking after it. Measured in phase 7D: a closed dialog does not
+ * stop sound, in any engine. `tracks` are the file's captions; without
+ * JavaScript an embed's frame holds a link to the player instead.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import Dialog from './Dialog.astro';
+
+interface Track {
+  src: string;
+  /** Language of the track (BCP 47), e.g. 'en'. */
+  srclang: string;
+  label?: string;
+  kind?: 'captions' | 'subtitles' | 'descriptions' | 'chapters';
+  default?: boolean;
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Dialog id; unique per page. */
+  id: string;
+  /** A video file (several formats as an array: webm, mp4), or with `embed` the URL of a player page (YouTube, Vimeo, …). */
+  src: string | string[];
+  poster: string;
+  /** src is an iframe URL. */
+  embed?: boolean;
+  /** Grow out of the poster and back into it on a view transition. */
+  morph?: boolean;
+  /** Dialog title, for the embed's name and the dialog's. */
+  title?: string;
+  /** Accessible name of the play button. */
+  label?: string;
+  /** CSS aspect ratio of the poster and the player. */
+  ratio?: string;
+  /** Text tracks for a file (WebVTT): captions, subtitles, descriptions. */
+  tracks?: Track[];
+  /** Add the inline click handler for browsers without invoker commands. */
+  polyfill?: boolean;
+}
+
+const { id, src, poster, embed = false, morph = false, title = 'Video', label = 'Play video', ratio = '16 / 9', tracks = [], polyfill = false, class: className, style, ...rest } = Astro.props;
+const sources = Array.isArray(src) ? src : [src];
+const type = (u: string) => (/\.webm(\?|$)/.test(u) ? 'video/webm' : /\.mp4(\?|$)/.test(u) ? 'video/mp4' : undefined);
+const inline = [`--ma-vdialog-ratio:${ratio}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+const triggerAttrs = { command: 'show-modal', commandfor: id };
+---
+
+<div class:list={['ma-vdialog', className]} data-ma-vdialog data-embed={embed ? '' : undefined} style={inline} {...rest}>
+  <button type="button" class="ma-vdialog__thumb" aria-label={label} {...triggerAttrs}>
+    <img class="ma-vdialog__poster" src={poster} alt="" draggable="false" />
+    <span class="ma-vdialog__play" aria-hidden="true">
+      <svg viewBox="0 0 24 24" width="22" height="22"><path d="M8 5.5v13l11-6.5z" fill="currentColor" /></svg>
+    </span>
+  </button>
+  <Dialog id={id} morph={morph} polyfill={polyfill} class="ma-vdialog__dialog" aria-label={title}>
+    <Fragment slot="trigger" />
+    <div class="ma-vdialog__frame">
+      {embed ? (
+        <>
+          <iframe class="ma-vdialog__media" data-src={sources[0]} title={title} allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+          <noscript><a class="ma-vdialog__link" href={sources[0]}>{title}</a></noscript>
+        </>
+      ) : (
+        <video class="ma-vdialog__media" poster={poster} controls playsinline preload="none">
+          {sources.map((u) => <source src={u} type={type(u)} />)}
+          {tracks.map((t) => <track src={t.src} srclang={t.srclang} label={t.label} kind={t.kind ?? 'captions'} default={t.default} />)}
+        </video>
+      )}
+    </div>
+  </Dialog>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-vdialog__thumb) {
+      position: relative;
+      display: block;
+      width: 100%;
+      aspect-ratio: var(--ma-vdialog-ratio, 16 / 9);
+      padding: 0;
+      border: 1px solid var(--ma-edge);
+      border-radius: 1rem;
+      overflow: clip;
+      background: var(--ma-ink);
+      cursor: pointer;
+      isolation: isolate;
+    }
+    :where(.ma-vdialog__thumb:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 3px;
+    }
+    :where(.ma-vdialog__poster) {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      scale: 1;
+      transition: scale var(--ma-dur-gentle) var(--ma-ease);
+    }
+    :where(.ma-vdialog__thumb:hover .ma-vdialog__poster) {
+      scale: 1.03;
+    }
+    /* the play button, with a ring breathing behind it on the ambient duration */
+    :where(.ma-vdialog__play) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: grid;
+      place-items: center;
+      width: 4rem;
+      height: 4rem;
+      border-radius: 999px;
+      background: var(--ma-panel);
+      color: var(--ma-ink);
+      box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.6);
+      translate: -50% -50%;
+      transition: scale var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-vdialog__play)::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: var(--ma-panel);
+      opacity: 0.5;
+      animation: ma-vdialog-ring var(--ma-dur-ambient) var(--ma-ease-out) infinite;
+    }
+    :where(.ma-vdialog__play svg) {
+      position: relative;
+      margin-left: 0.15em;
+    }
+    :where(.ma-vdialog__thumb:hover .ma-vdialog__play),
+    :where(.ma-vdialog__thumb:focus-visible .ma-vdialog__play) {
+      scale: 1.08;
+    }
+    /* the dialog is the player: no padding, the frame's ratio, an ink ground */
+    :where(.ma-vdialog) .ma-dialog {
+      width: min(92vw, 64rem);
+      max-width: none;
+      overflow: clip;
+      background: var(--ma-ink);
+    }
+    :where(.ma-vdialog) .ma-dialog__panel {
+      padding: 0;
+    }
+    :where(.ma-vdialog) .ma-dialog__close button {
+      background: var(--ma-panel);
+      color: var(--ma-ink);
+      opacity: 0.9;
+    }
+    :where(.ma-vdialog__frame) {
+      position: relative;
+      aspect-ratio: var(--ma-vdialog-ratio, 16 / 9);
+      background: var(--ma-ink);
+    }
+    /* without JavaScript an embed has no src: the frame links to the player instead */
+    :where(.ma-vdialog__link) {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      padding: 1rem;
+      color: var(--ma-panel);
+      text-align: center;
+    }
+    :where(.ma-vdialog__media) {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      background: var(--ma-ink);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-vdialog__poster),
+      :where(.ma-vdialog__play) {
+        transition: none;
+        scale: 1;
+      }
+      :where(.ma-vdialog__play)::before {
+        animation: none;
+        opacity: 0;
+      }
+    }
+  }
+
+  @keyframes ma-vdialog-ring {
+    from {
+      scale: 1;
+      opacity: 0.5;
+    }
+    to {
+      scale: 1.7;
+      opacity: 0;
+    }
+  }
+</style>
+
+<script>
+  import { onMount } from '../lib/runtime';
+
+  onMount<HTMLElement>('[data-ma-vdialog]', (root, { signal }) => {
+    const dialog = root.querySelector('dialog') as HTMLDialogElement;
+    const media = dialog.querySelector<HTMLVideoElement | HTMLIFrameElement>('.ma-vdialog__media')!;
+    const video = media instanceof HTMLVideoElement ? media : null;
+    // opening: a file plays inside the click, a user gesture the browser honours. One task later the dialog is open, or
+    // opening (a morph in flight sets html[data-ma-vt]); if neither, the click opened nothing (no invoker commands, no
+    // polyfill) and nothing may play behind the closed dialog. An embed gets its src then, never while the dialog is shut.
+    const start = () => {
+      video?.play().catch(() => {});
+      setTimeout(() => {
+        if (!dialog.open && !document.documentElement.hasAttribute('data-ma-vt')) stop();
+        else if (!video) media.setAttribute('src', media.dataset.src!);
+      });
+    };
+    // closing: a file pauses; an embed is blanked so it stops loading and talking
+    const stop = () => {
+      if (video) video.pause();
+      else media.setAttribute('src', 'about:blank');
+    };
+    for (const t of document.querySelectorAll<HTMLElement>(`[commandfor="${dialog.id}"][command="show-modal"]`)) t.addEventListener('click', start, { signal });
+    dialog.addEventListener('close', stop, { signal });
+    signal.addEventListener('abort', stop);
+  });
+</script>

package/src/components/VideoDialog.meta.ts

@@ -0,0 +1,40 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'VideoDialog',
+  slug: 'video-dialog',
+  title: 'Video Dialog',
+  description: 'A poster with a breathing play button that opens the video in a dialog: a file with native controls, or an embed. The dialog is Dialog (native, invoker-opened, optionally morphing out of the poster); the script does what a closed dialog will not: play on open, pause on close, and for an embed set the iframe src on open and blank it on close so nothing loads or keeps playing behind a closed dialog.',
+  summary: 'A video poster with a play button that opens the video in a dialog, and pauses and unloads it on close.',
+  category: 'ui',
+  tier: 'B',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['dialog', 'command'], fallback: 'without invoker commands the poster needs polyfill to open the dialog, and plays nothing until it does; without JavaScript a file plays with its native controls and an embed\'s frame is a link to the player' },
+  readout: '<VideoDialog morph>',
+  usage: `<VideoDialog id="demo" src={['/demo.webm', '/demo.mp4']} poster="/demo.jpg" title="Product demo" morph tracks={[{ src: '/demo.en.vtt', srclang: 'en', label: 'English' }]} />\n\n<!-- an embed: the iframe gets its src only while the dialog is open -->\n<VideoDialog id="talk" embed src="https://www.youtube-nocookie.com/embed/xyz?autoplay=1" poster="/talk.jpg" title="The talk" />`,
+  props: [
+    { name: 'id', type: 'string', description: 'Dialog id; unique per page.' },
+    { name: 'src', type: 'string | string[]', description: 'A video file (an array is several formats, webm then mp4), or with embed the URL of a player page.' },
+    { name: 'poster', type: 'string', description: 'The poster, on the trigger and under the file player.' },
+    { name: 'embed', type: 'boolean', default: 'false', description: 'src is an iframe URL. Its src is set when the dialog opens and blanked when it closes.' },
+    { name: 'morph', type: 'boolean', default: 'false', description: 'Grow out of the poster and return to it (Dialog morph).' },
+    { name: 'title', type: 'string', default: "'Video'", description: 'Name of the dialog and the iframe.' },
+    { name: 'label', type: 'string', default: "'Play video'", description: 'Accessible name of the play button.' },
+    { name: 'ratio', type: 'string', default: "'16 / 9'", description: 'Aspect ratio of the poster and the player.' },
+    { name: 'tracks', type: "{ src: string; srclang: string; label?: string; kind?: 'captions' | 'subtitles' | 'descriptions' | 'chapters'; default?: boolean }[]", default: '[]', description: 'WebVTT text tracks for a file, rendered as <track> (kind defaults to captions). An embed brings its own.' },
+    { name: 'polyfill', type: 'boolean', default: 'false', description: 'Inline the invoker click handler (403 B raw) for browsers without command / commandfor.' },
+  ],
+  reducedMotion: 'The play ring stands still and the poster does not scale; the dialog opens with the 150 ms cross-fade (no morph).',
+  clientRouter: 'Bound through the shared runtime; the video is paused (or the embed blanked) before the swap.',
+  craft: [
+    'The trigger is an invoker button, so the dialog opens with zero script and the file plays with its native controls; the script adds play-on-open because the click is a user gesture the browser will honour. One task after the click it looks again: a dialog that neither opened nor is morphing open (no invoker commands, no polyfill) stops the file at once, so nothing plays behind a closed dialog.',
+    'A closed dialog is display: none, and display: none stops nothing: a video keeps its sound, an iframe keeps its player. Measured in three engines before this was written; the close handler exists because of it.',
+    'An embed gets its src only while the dialog is open: no third-party player loads on a page that merely shows a poster, and blanking on close is the only way to stop a player you do not control.',
+    'The play button breathes on the ambient duration with a ring scaling out behind it. A still poster with a live button reads as "this plays" from across the room.',
+    'morph is the Dialog\'s: the poster is the box that opens, and it closes back into it.',
+  ],
+  related: ['dialog', 'hover-video', 'lightbox', 'browser-frame'],
+  intents: ['video modal', 'play video in dialog', 'hero video popup', 'youtube embed modal astro', 'video lightbox', 'poster with play button opens video'],
+  replaces: ['HeroVideoDialog (Magic UI)', 'VideoModal (Cult UI)', 'Dialog + video (shadcn / Radix)'],
+  fixture: { props: { id: 'ma-fixture-vdialog', src: '/x.mp4', poster: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 4 3%22%3E%3Crect width=%224%22 height=%223%22 fill=%22%23888%22/%3E%3C/svg%3E', label: 'Fixture content for VideoDialog' }, expect: 'Fixture content for VideoDialog' },
+} satisfies ComponentMeta;

package/src/components/WeightWave.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * WeightWave — a wave of weight rolls through the letters, zero JS.
+ *
+ * Each character animates font-weight on its own delay. Needs a variable
+ * font with a weight axis to be continuous; static families step between
+ * the weights they have. Widths change with weight, so use it on a line
+ * you want to breathe, not in a paragraph.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** The text. */
+  text: string;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Lightest weight. */
+  min?: number;
+  /** Heaviest weight. */
+  max?: number;
+  /** Seconds per full wave at one character. */
+  duration?: number;
+  /** Delay between neighbouring characters, ms. */
+  step?: number;
+}
+
+const { text, as: Tag = 'span', min = 300, max = 800, duration = 2.4, step = 80, class: className, style, ...rest } = Astro.props;
+// graphemes, not code points: an emoji with a skin tone or a letter with a combining accent swells as one character
+const chars = Array.from(new Intl.Segmenter().segment(text), (g) => g.segment);
+// the caller's style joins the component's properties instead of replacing them
+const vars = [`--ma-ww-min:${min}`, `--ma-ww-max:${max}`, `--ma-ww-dur:${duration}s`, `--ma-ww-step:${step}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 ran back to front. The element takes its direction from its own text instead.
+---
+
+<Tag class:list={['ma-weight', className]} dir="auto" style={vars} {...rest}>
+  {chars.map((c, i) => (c === ' ' ? ' ' : <span class="ma-weight__char" aria-hidden="true" style={`--ma-i:${i}`}>{c}</span>))}
+  <span class="ma-sr">{text}</span>
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-weight) {
+      font-variation-settings: normal;
+      white-space: pre-wrap;
+    }
+    :where(.ma-weight__char) {
+      display: inline-block;
+      font-weight: var(--ma-ww-min, 300);
+      animation: ma-weight var(--ma-ww-dur, 2.4s) var(--ma-ease-in-out) infinite;
+      animation-delay: calc(var(--ma-i, 0) * var(--ma-ww-step, 80ms));
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-weight__char) {
+        animation: none;
+        font-weight: inherit;
+      }
+    }
+  }
+
+  @keyframes ma-weight {
+    0%,
+    100% {
+      font-weight: var(--ma-ww-min, 300);
+    }
+    50% {
+      font-weight: var(--ma-ww-max, 800);
+    }
+  }
+</style>

package/src/components/WeightWave.meta.ts

@@ -0,0 +1,36 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'WeightWave',
+  slug: 'weight-wave',
+  title: 'Weight Wave',
+  description: 'A wave of boldness rolls through the letters of a line, each character animating its font weight on its own delay. Pure CSS. Continuous with a variable font; steps between available weights otherwise.',
+  summary: 'A wave of boldness rolling through the letters of a line, animating the font weight of a variable font.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: ['font-variation'] },
+  readout: '<WeightWave min={300} max={800}>',
+  usage: `<WeightWave as="h1" text="Variable" />\n<WeightWave text="slow" duration={4} step={140} />`,
+  props: [
+    { name: 'text', type: 'string', description: 'The text.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'min', type: 'number', default: '300', description: 'Lightest weight.' },
+    { name: 'max', type: 'number', default: '800', description: 'Heaviest weight.' },
+    { name: 'duration', type: 'number', default: '2.4', description: 'Seconds per full wave at one character.' },
+    { name: 'step', type: 'number', default: '80', description: 'Delay between neighbouring characters, ms. Smaller is a faster-travelling wave.' },
+  ],
+  reducedMotion: 'Every character sits at the inherited weight.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'font-weight animates the wght axis directly; no font-variation-settings string to parse per frame.',
+    'ease-in-out so the wave swells and recedes; a linear wave looks mechanical.',
+    'Glyph widths change with weight, which means layout every frame: keep it to one line, and never in running text.',
+    'A visually hidden span (.ma-sr) carries the text; the characters are aria-hidden.',
+    'A character is a grapheme (Intl.Segmenter), so an emoji with a skin tone or a letter with a combining accent counts as one. The inline-block characters would follow the page\'s direction, so the element takes dir="auto" and Latin text on a right-to-left page still runs left to right.',
+  ],
+  related: ['split-text', 'text-scramble', 'shiny-text'],
+  intents: ['variable font animation', 'font weight wave', 'text weight animation', 'animate font-weight', 'wavy bold text'],
+  replaces: ['VariableProximity (React Bits)', 'font-weight hover effects'],
+  fixture: { props: { text: 'Fixture content for WeightWave' }, expect: 'ma-sr">Fixture content for WeightWave</span>' },
+} satisfies ComponentMeta;