@moonarc/core 0.1.0

package/src/components/ShinyText.meta.ts

@@ -0,0 +1,35 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'ShinyText',
+  slug: 'shiny-text',
+  title: 'Shiny Text',
+  description:
+    'A highlight sweeps across the text every few seconds. The text keeps its own colour; the shine is a gradient clipped to a repeated copy on top, and only its position animates. Pure CSS.',
+  summary: 'A shiny text effect: a highlight sweeps across the text every few seconds while the text keeps its colour.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: ['bg-clip-text'] },
+  readout: '<ShinyText duration={3}>',
+  usage: `<h2><ShinyText text="Measured, not estimated." /></h2>\n<ShinyText text="Pro" color="oklch(85% 0.17 70)" duration={2} />`,
+  props: [
+    { name: 'text', type: 'string', description: 'The text; repeated in a pseudo-element, so it must be a plain string.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'duration', type: 'number', default: '3', description: 'Seconds per cycle; the sweep takes 60% of it and the rest is a pause.' },
+    { name: 'color', type: 'string', default: 'var(--ma-shine)', description: 'Highlight colour; the token is theme-aware.' },
+    { name: 'width', type: 'number', default: '0.25', description: 'Highlight width as a fraction of the text, 0.05–0.6.' },
+  ],
+  reducedMotion: 'The sweep is removed; the text shows in its own colour.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'The base text is real text in a real colour; the pseudo-element only adds the highlight, so there is no transparent-text fallback problem and the colour is inherited as usual.',
+    'A 60/40 sweep-to-pause ratio: a highlight that never rests reads as a loading state.',
+    'Generated content is part of an element\'s accessible name, so the copy declares an empty alternative (content: attr(data-text) / \'\') and a screen reader reads the sentence once.',
+    'Only background-position moves, on a 250% texture: no layout and no filter. background-position is not composited, so every frame repaints the text\'s own box (measured in Chromium); keep it to a headline or a label.',
+  ],
+  related: ['gradient-text', 'split-text'],
+  intents: ['shiny text', 'shimmer text', 'text highlight sweep', 'glossy text animation', 'shine effect on text'],
+  replaces: ['ShinyText (React Bits)', 'AnimatedShinyText (Magic UI)'],
+  fixture: { props: { text: 'Fixture content for ShinyText' }, expect: 'Fixture content for ShinyText' },
+} satisfies ComponentMeta;

package/src/components/Skeleton.astro

@@ -0,0 +1,76 @@
+---
+/**
+ * Skeleton — placeholder blocks with a shimmer, zero JS. The shimmer is a
+ * gradient texture whose position moves; nothing repaints.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Text lines to draw. */
+  lines?: number;
+  /** Draw a round avatar beside the lines. */
+  avatar?: boolean;
+  /** Seconds per shimmer pass. */
+  duration?: number;
+  /** Corner radius of the blocks, any CSS length. */
+  radius?: string;
+}
+
+const { lines = 3, avatar = false, duration = 1.6, radius = '0.375rem', class: className, ...rest } = Astro.props;
+---
+
+<div class:list={['ma-skeleton', className]} aria-busy="true" aria-live="polite" data-avatar={avatar ? '' : undefined} style={`--ma-sk-dur:${duration}s;--ma-sk-r:${radius}`} {...rest}>
+  {avatar && <i class="ma-skeleton__avatar"></i>}
+  <div class="ma-skeleton__lines">
+    {Array.from({ length: Math.max(1, lines) }, (_, i) => <i class="ma-skeleton__line" style={`--ma-w:${i === lines - 1 && lines > 1 ? 60 : 100 - (i % 3) * 8}%`}></i>)}
+  </div>
+  <slot />
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-skeleton) {
+      display: flex;
+      gap: 0.75rem;
+      align-items: flex-start;
+    }
+    :where(.ma-skeleton__lines) {
+      flex: 1;
+      display: grid;
+      gap: 0.5rem;
+    }
+    :where(.ma-skeleton__line),
+    :where(.ma-skeleton__avatar) {
+      display: block;
+      background-color: var(--ma-edge);
+      background-image: linear-gradient(100deg, transparent 30%, var(--ma-shine) 50%, transparent 70%);
+      background-size: 200% 100%;
+      background-position: 150% 0;
+      animation: ma-skeleton var(--ma-sk-dur, 1.6s) var(--ma-ease-in-out) infinite;
+    }
+    :where(.ma-skeleton__line) {
+      height: 0.8em;
+      width: var(--ma-w, 100%);
+      border-radius: var(--ma-sk-r, 0.375rem);
+    }
+    :where(.ma-skeleton__avatar) {
+      flex: none;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-skeleton__line),
+      :where(.ma-skeleton__avatar) {
+        animation: none;
+        background-image: none;
+      }
+    }
+  }
+
+  @keyframes ma-skeleton {
+    to {
+      background-position: -50% 0;
+    }
+  }
+</style>

package/src/components/Skeleton.meta.ts

@@ -0,0 +1,32 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Skeleton',
+  slug: 'skeleton',
+  title: 'Skeleton',
+  description: 'Placeholder lines, optionally with an avatar, shimmering while content loads. The shimmer is a gradient texture whose position moves; pure CSS. Marks itself busy for assistive tech.',
+  summary: 'Skeleton loading placeholders: shimmering lines and an optional avatar, marked busy for assistive tech.',
+  category: 'loading',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<Skeleton lines={3}>',
+  usage: `<Skeleton lines={3} avatar />`,
+  props: [
+    { name: 'lines', type: 'number', default: '3', description: 'Text lines; widths vary and the last is short, like real text.' },
+    { name: 'avatar', type: 'boolean', default: 'false', description: 'A round block beside the lines.' },
+    { name: 'duration', type: 'number', default: '1.6', description: 'Seconds per shimmer pass.' },
+    { name: 'radius', type: 'string', default: "'0.375rem'", description: 'Corner radius of the lines.' },
+  ],
+  reducedMotion: 'Static blocks, no shimmer.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'Line widths follow a pattern (100 / 92 / 84, last one 60%) so the block reads as text, not as bars.',
+    'The shimmer moves on background-position; ease-in-out gives it a pass-and-rest rhythm rather than a conveyor.',
+    'aria-busy and aria-live: assistive tech is told the region is loading and hears the content when it lands.',
+  ],
+  related: ['spinner', 'progress'],
+  intents: ['skeleton loader', 'loading placeholder', 'shimmer loading', 'content placeholder animation'],
+  replaces: ['Skeleton (shadcn)', 'react-loading-skeleton'],
+  fixture: { expect: 'class="ma-skeleton"' },
+} satisfies ComponentMeta;

package/src/components/Sparkline.astro

@@ -0,0 +1,168 @@
+---
+/**
+ * Sparkline — a small line chart that draws itself left to right when it
+ * scrolls into view, the last point pulsing once drawn. The SVG is rendered
+ * on the server from the data; the line is uncovered by a clip-path inset
+ * whose right edge travels from the left of the chart to past its right, so
+ * it draws at any size. Composes Reveal for the trigger; zero script of its
+ * own. The label summarises the series.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+import Reveal from './Reveal.astro';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** The series. */
+  data: number[];
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Size in px — also the viewBox, so the drawing scales with it; it shrinks to fit a narrower container. */
+  width?: number;
+  height?: number;
+  /** Line colour. */
+  color?: string;
+  /** Fill the area under the line. */
+  fill?: boolean;
+  /** Mark the last point. */
+  dot?: boolean;
+  /** Draw duration in ms. Unset: the preset's --ma-duration-slow. */
+  duration?: number;
+  /** Accessible name; the summary (min, max, last) is appended. */
+  label?: string;
+  /** Delay in ms before drawing. */
+  delay?: number;
+  /** Play once and stay. */
+  once?: boolean;
+  /** Fraction visible to trigger. */
+  threshold?: number;
+}
+
+const { data, as = 'span', width = 120, height = 32, color = 'var(--chart-1, currentColor)', fill = false, dot = true, duration, label, delay, once, threshold, class: className, style, ...rest } = Astro.props;
+const series = data.length ? data : [0];
+const n = series.length;
+const min = Math.min(...series);
+const max = Math.max(...series);
+const span = max - min || 1;
+const pad = 3;
+const x = (i: number) => pad + (n > 1 ? (i / (n - 1)) * (width - 2 * pad) : (width - 2 * pad) / 2);
+const y = (v: number) => height - pad - ((v - min) / span) * (height - 2 * pad);
+const d = series.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
+const area = `${d} L${x(n - 1).toFixed(1)},${height} L${x(0).toFixed(1)},${height} Z`;
+const last = series[n - 1]!;
+const name = `${label ? `${label}: ` : ''}${n} points, min ${min}, max ${max}, last ${last}`;
+const vars = [`--ma-spark-color:${color}`, duration !== undefined && `--ma-spark-dur:${duration}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Reveal as={as} from="none" delay={delay} once={once} threshold={threshold} class={['ma-spark', className].filter(Boolean).join(' ')} role="img" aria-label={name} style={vars} {...rest}>
+  <svg class="ma-spark__svg" viewBox={`0 0 ${width} ${height}`} width={width} height={height} aria-hidden="true">
+    {fill && <path class="ma-spark__area" d={area} />}
+    <path class="ma-spark__line" d={d} vector-effect="non-scaling-stroke" />
+    {dot && (
+      <>
+        <circle class="ma-spark__ring" cx={x(n - 1).toFixed(1)} cy={y(last).toFixed(1)} r="3" />
+        <circle class="ma-spark__dot" cx={x(n - 1).toFixed(1)} cy={y(last).toFixed(1)} r="2.5" />
+      </>
+    )}
+  </svg>
+</Reveal>
+
+<style is:global>
+  @layer components {
+    :where(.ma-spark) {
+      display: inline-block;
+      max-width: 100%;
+      line-height: 0;
+      vertical-align: middle;
+    }
+    :where(.ma-spark__svg) {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      overflow: visible;
+      color: var(--ma-spark-color, currentColor);
+    }
+    :where(.ma-spark__line) {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      /* A wipe, where this used to be a pathLength="1" dash: the stroke is non-scaling, so its dashes are measured on
+         screen while pathLength is measured in the viewBox, and a chart drawn four times its viewBox came out as a
+         quarter dash, a gap, a dash. The inset reaches 1em past every edge so the round caps and joins are not cut. */
+      clip-path: inset(-1em);
+      transition: clip-path var(--ma-spark-dur, var(--ma-duration-slow)) var(--ma-ease-out) var(--ma-r-delay, 0ms);
+    }
+    :where(.ma-spark__area) {
+      fill: currentColor;
+      opacity: 0.12;
+      transition: opacity var(--ma-duration) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-spark-dur, var(--ma-duration-slow)));
+    }
+    :where(.ma-spark__dot) {
+      fill: currentColor;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-spark-dur, var(--ma-duration-slow)));
+    }
+    /* hidden until its animation starts, so nothing shows while the line is still drawing */
+    :where(.ma-spark__ring) {
+      fill: currentColor;
+      opacity: 0;
+      transform-box: fill-box;
+      transform-origin: 50% 50%;
+      animation: ma-spark-pulse var(--ma-dur-ambient) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-spark-dur, var(--ma-duration-slow))) infinite;
+    }
+    /* Under the JS gate the line starts undrawn; Reveal's .ma-in lets it draw, then the dot lands and pulses. */
+    :where([data-ma-js] .ma-spark:not(.ma-in) .ma-spark__line) {
+      clip-path: inset(-1em calc(100% + 1em) -1em -1em);
+      transition: none;
+    }
+    :where([data-ma-js] .ma-spark:not(.ma-in) .ma-spark__area),
+    :where([data-ma-js] .ma-spark:not(.ma-in) .ma-spark__dot) {
+      opacity: 0;
+      transition: none;
+    }
+    :where([data-ma-js] .ma-spark:not(.ma-in) .ma-spark__ring) {
+      animation: none;
+      opacity: 0;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-spark__line),
+      :where(.ma-spark__area),
+      :where(.ma-spark__dot) {
+        transition: none;
+      }
+      :where(.ma-spark__ring) {
+        animation: none;
+        opacity: 0;
+      }
+    }
+    /* Print: drawn, with its area and its last point. A chart printed before it scrolled into view was empty. */
+    @media print {
+      :where(.ma-spark .ma-spark__line) {
+        clip-path: none;
+        transition: none;
+      }
+      :where(.ma-spark .ma-spark__area) {
+        opacity: 0.12;
+        transition: none;
+      }
+      :where(.ma-spark .ma-spark__dot) {
+        opacity: 1;
+        transition: none;
+      }
+      :where(.ma-spark .ma-spark__ring) {
+        animation: none;
+        opacity: 0;
+      }
+    }
+  }
+
+  @keyframes ma-spark-pulse {
+    from {
+      scale: 1;
+      opacity: 0.5;
+    }
+    to {
+      scale: 3;
+      opacity: 0;
+    }
+  }
+</style>

package/src/components/Sparkline.meta.ts

@@ -0,0 +1,43 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Sparkline',
+  slug: 'sparkline',
+  title: 'Sparkline',
+  description:
+    'A small line chart that draws itself from left to right when it scrolls into view; the last point lands and pulses. The SVG is rendered on the server from the data, the line is uncovered by a clip that sweeps from its left edge to its right, and the accessible name summarises the series. Composes Reveal; no script of its own.',
+  summary: 'A small line chart that draws itself from left to right as it scrolls into view, its last point pulsing.',
+  category: 'data',
+  tier: 'A',
+  trigger: ['scroll'],
+  support: { baseline: 'widely', needs: ['clip-path'] },
+  readout: '<Sparkline data={[…]}>',
+  usage: `<Sparkline data={[12, 18, 15, 22, 30, 28, 41]} label="Stars per week" class="text-signal" />\n<Sparkline data={downloads} width={240} height={48} fill dot={false} duration={1200} />`,
+  props: [
+    { name: 'data', type: 'number[]', description: 'The series, in order.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'width', type: 'number', default: '120', description: 'Width in px, also the viewBox; the drawing scales with it and shrinks to fit a narrower container.' },
+    { name: 'height', type: 'number', default: '32', description: 'See width.' },
+    { name: 'color', type: 'string', default: "'var(--chart-1, currentColor)'", description: 'Line colour; the area and the dot follow it. The first chart colour of the theme contract when a theme defines one, else the text colour.' },
+    { name: 'fill', type: 'boolean', default: 'false', description: 'Tint the area under the line once it is drawn.' },
+    { name: 'dot', type: 'boolean', default: 'true', description: 'Mark the last point and pulse it.' },
+    { name: 'duration', type: 'number', default: 'preset (700)', description: 'Draw duration in ms. Unset, the preset\'s --ma-duration-slow.' },
+    { name: 'label', type: 'string', description: 'Accessible name; "n points, min, max, last" is appended.' },
+    { name: 'delay', type: 'number', default: '0', description: 'Delay before drawing.' },
+    { name: 'once', type: 'boolean', default: 'true', description: 'Play once and stay.' },
+    { name: 'threshold', type: 'number', default: '0.2', description: 'Fraction visible to trigger.' },
+  ],
+  reducedMotion: 'The line is drawn at once and the last point does not pulse.',
+  clientRouter: 'Inherits Reveal: rebinds after every navigation.',
+  craft: [
+    'The draw is a clip-path inset whose right edge moves from the left of the chart to past its right, so it is one transition whatever the data and whatever size the chart is drawn at. A pathLength="1" dash does the same only at the viewBox\'s own size: with a non-scaling stroke the dash is measured on screen, and a chart drawn four times its viewBox showed a quarter dash, a gap, a dash.',
+    'Drawn on ease-out at the slow duration: a chart line should arrive like a pen stroke, fast at first and settling at the last point.',
+    'The dot lands when the line finishes (its transition is delayed by the draw duration) and then pulses on the ambient duration, marking the current value.',
+    'vector-effect: non-scaling-stroke keeps the line 2 px at any size, so the same component works at 80 px in a table cell and 400 px in a card.',
+    'role="img" and a label that says min, max and last: the summary a sighted reader gets from the shape.',
+  ],
+  related: ['bar-grow', 'count-up', 'progress'],
+  intents: ['sparkline', 'animated line chart', 'svg line draw on scroll', 'tiny chart astro', 'trend line animation'],
+  replaces: ['Sparkline (Preline charts)', 'react-sparklines', 'ApexCharts sparklines'],
+  fixture: { props: { data: [3, 5, 4, 8, 7, 11], label: 'Fixture content for Sparkline' }, expect: 'Fixture content for Sparkline' },
+} satisfies ComponentMeta;

package/src/components/Spinner.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * Spinner — an arc that chases its tail, zero JS. One SVG circle: the dash
+ * length breathes while the whole thing rotates, so the arc grows and
+ * shrinks like a real indeterminate indicator, not a fixed wedge.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** Diameter in px. */
+  size?: number;
+  /** Stroke width in px. */
+  width?: number;
+  /** Colour. */
+  color?: string;
+  /** Accessible label. */
+  label?: string;
+  /** Seconds per rotation. */
+  duration?: number;
+}
+
+const { size = 20, width = 2, color = 'currentColor', label = 'Loading', duration = 1.2, class: className, ...rest } = Astro.props;
+---
+
+<span class:list={['ma-spinner', className]} role="status" aria-label={label} style={`--ma-spin-size:${size}px;--ma-spin-w:${width}px;--ma-spin-color:${color};--ma-spin-dur:${duration}s`} {...rest}>
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-linecap="round" />
+  </svg>
+</span>
+
+<style is:global>
+  @layer components {
+    :where(.ma-spinner) {
+      display: inline-block;
+      width: var(--ma-spin-size, 20px);
+      height: var(--ma-spin-size, 20px);
+      color: var(--ma-spin-color, currentColor);
+      vertical-align: middle;
+    }
+    :where(.ma-spinner svg) {
+      display: block;
+      width: 100%;
+      height: 100%;
+      animation: ma-spinner-rotate var(--ma-spin-dur, 1.2s) linear infinite;
+    }
+    :where(.ma-spinner circle) {
+      stroke-width: var(--ma-spin-w, 2px);
+      stroke-dasharray: 63;
+      stroke-dashoffset: 47;
+      animation: ma-spinner-dash calc(var(--ma-spin-dur, 1.2s) * 1.5) var(--ma-ease-in-out) infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-spinner circle) {
+        animation: none;
+        stroke-dashoffset: 47;
+      }
+      :where(.ma-spinner svg) {
+        animation-duration: calc(var(--ma-spin-dur, 1.2s) * 2.5);
+      }
+    }
+  }
+
+  @keyframes ma-spinner-rotate {
+    to {
+      rotate: 360deg;
+    }
+  }
+  @keyframes ma-spinner-dash {
+    0% {
+      stroke-dashoffset: 56;
+    }
+    50% {
+      stroke-dashoffset: 16;
+    }
+    100% {
+      stroke-dashoffset: 56;
+    }
+  }
+</style>

package/src/components/Spinner.meta.ts

@@ -0,0 +1,33 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Spinner',
+  slug: 'spinner',
+  title: 'Spinner',
+  description: 'An indeterminate arc whose length breathes while it rotates, so it looks like it is working rather than spinning a fixed wedge. One SVG circle, pure CSS; announces itself as a status.',
+  summary: 'A loading spinner: an arc whose length breathes while it rotates, announced as a status.',
+  category: 'loading',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<Spinner size={20}>',
+  usage: `<button disabled><Spinner size={16} /> Saving…</button>`,
+  props: [
+    { name: 'size', type: 'number', default: '20', description: 'Diameter in px.' },
+    { name: 'width', type: 'number', default: '2', description: 'Stroke width in px.' },
+    { name: 'color', type: 'string', default: "'currentColor'", description: 'Colour.' },
+    { name: 'label', type: 'string', default: "'Loading'", description: 'Accessible label.' },
+    { name: 'duration', type: 'number', default: '1.2', description: 'Seconds per rotation.' },
+  ],
+  reducedMotion: 'A fixed arc rotating at less than half speed, still readable as loading but no longer busy.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'Rotation is linear; the dash length is ease-in-out on a different period, so the arc never repeats the same shape at the same angle.',
+    'stroke-linecap: round, because a square-ended arc reads as broken.',
+    'role="status" with a label: the spinner is announced once, not on every frame.',
+  ],
+  related: ['skeleton', 'progress', 'ripple'],
+  intents: ['loading spinner', 'css spinner', 'indeterminate loader', 'spinner astro'],
+  replaces: ['Spinner (shadcn)', 'react-spinners'],
+  fixture: { expect: 'class="ma-spinner"' },
+} satisfies ComponentMeta;

package/src/components/SplitFlap.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * 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>