@moonarc/core 0.1.0

package/src/components/AnimatedSelect.astro

@@ -0,0 +1,227 @@
+---
+/**
+ * AnimatedSelect — a native <select> that blooms, zero JS. In an engine
+ * with `appearance: base-select` the button and the `::picker(select)`
+ * take the tokens, the options arrive one after another through
+ * @starting-style with a delay from `sibling-index()`, the picker leaves
+ * through allow-discrete and `::checkmark` is drawn. Everywhere else it is
+ * the native select with a token border and a chevron, no animation — the
+ * same set, one browser short of the motion. No listbox is imitated: the
+ * keyboard, type-to-select, the form value and the accessibility tree are
+ * the browser's in every engine.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  /** Options with the same group go into one <optgroup>. */
+  group?: string;
+}
+
+interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
+  options: Option[];
+  name?: string;
+  /** Selected value. */
+  value?: string;
+  /** Visible label as <label for>. Without it, pass aria-label. */
+  label?: string;
+  /** A disabled first option shown until a choice is made. */
+  placeholder?: string;
+  size?: 'sm' | 'md';
+  id?: string;
+}
+
+const { options, name, value, label, placeholder, size = 'md', id, class: className, style, ...rest } = Astro.props;
+// unique per render, not per name: a PromptInput and an AnimatedSelect both named "model" can share a page
+const selectId = id ?? `ma-aselect-${name ?? 'select'}-${Math.random().toString(36).slice(2, 7)}`;
+// group order is first appearance; ungrouped options stay where they are
+const groups: { name: string | undefined; items: Option[] }[] = [];
+for (const o of options) {
+  const last = groups[groups.length - 1];
+  if (last && last.name === o.group) last.items.push(o);
+  else groups.push({ name: o.group, items: [o] });
+}
+---
+
+{label && <label class="ma-aselect__label" for={selectId}>{label}</label>}
+<span class:list={['ma-aselect', className]} data-size={size} style={style}>
+  <select id={selectId} class="ma-aselect__select" name={name} {...rest}>
+    {placeholder && <option value="" disabled selected={value === undefined}>{placeholder}</option>}
+    {groups.map((g) =>
+      g.name ? (
+        <optgroup label={g.name}>{g.items.map((o) => <option value={o.value} disabled={o.disabled} selected={o.value === value}>{o.label}</option>)}</optgroup>
+      ) : (
+        g.items.map((o) => <option value={o.value} disabled={o.disabled} selected={o.value === value}>{o.label}</option>)
+      ),
+    )}
+  </select>
+  <svg class="ma-aselect__chevron" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+</span>
+
+<style is:global>
+  @layer components {
+    :where(.ma-aselect) {
+      --ma-aselect-pad: 0.6em 2.2em 0.6em 0.9em;
+      position: relative;
+      display: inline-grid;
+      vertical-align: middle;
+      color: inherit;
+    }
+    :where(.ma-aselect[data-size='sm']) {
+      --ma-aselect-pad: 0.35em 1.9em 0.35em 0.65em;
+      font-size: 0.875em;
+    }
+    :where(.ma-aselect__label) {
+      display: block;
+      margin-block-end: 0.5em;
+      font-size: 0.875em;
+    }
+    /* every engine: the native select in the tokens; the chevron is ours so the two looks match */
+    :where(.ma-aselect__select) {
+      appearance: none;
+      -webkit-appearance: none;
+      grid-area: 1 / 1;
+      min-inline-size: 8em;
+      margin: 0;
+      padding: var(--ma-aselect-pad);
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.6em;
+      background: var(--ma-panel);
+      color: inherit;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+      transition: border-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-aselect__select:hover) {
+      border-color: color-mix(in srgb, var(--ma-ink) 35%, transparent);
+    }
+    :where(.ma-aselect__select:focus-visible) {
+      outline: 2px solid var(--ma-ink);
+      outline-offset: 2px;
+    }
+    :where(.ma-aselect__select:disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+      transition: none;
+    }
+    :where(.ma-aselect__select:user-invalid) {
+      border-color: #e0563f;
+    }
+    :where(.ma-aselect__chevron) {
+      grid-area: 1 / 1;
+      justify-self: end;
+      align-self: center;
+      inline-size: 1em;
+      block-size: 1em;
+      margin-inline-end: 0.7em;
+      opacity: 0.6;
+      pointer-events: none;
+      transition: rotate var(--ma-duration) var(--ma-ease);
+    }
+    /* the customizable select: the picker in the tokens, options staggered in, the picker leaving on allow-discrete */
+    @supports (appearance: base-select) {
+      :where(.ma-aselect__select),
+      :where(.ma-aselect__select)::picker(select) {
+        appearance: base-select;
+      }
+      :where(.ma-aselect__select)::picker-icon {
+        display: none;
+      }
+      :where(.ma-aselect:has(.ma-aselect__select:open) .ma-aselect__chevron) {
+        rotate: 180deg;
+      }
+      :where(.ma-aselect__select)::picker(select) {
+        margin-block-start: 0.35em;
+        padding: 0.35em;
+        border: 1px solid var(--ma-edge);
+        border-radius: 0.75em;
+        background: var(--ma-panel);
+        color: inherit;
+        box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.35);
+        opacity: 0;
+        translate: 0 calc(var(--ma-travel-hover) * -1);
+        transition:
+          opacity var(--ma-duration-fast) var(--ma-ease-out),
+          translate var(--ma-duration-fast) var(--ma-ease-out),
+          display var(--ma-duration-fast) allow-discrete,
+          overlay var(--ma-duration-fast) allow-discrete;
+      }
+      :where(.ma-aselect__select:open)::picker(select) {
+        opacity: 1;
+        translate: 0 0;
+        transition-duration: var(--ma-duration);
+        transition-timing-function: var(--ma-ease);
+      }
+      @starting-style {
+        :where(.ma-aselect__select:open)::picker(select) {
+          opacity: 0;
+          translate: 0 calc(var(--ma-travel-hover) * -1);
+        }
+      }
+      :where(.ma-aselect__select option) {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        padding: 0.45em 0.7em;
+        border-radius: 0.45em;
+        opacity: 1;
+        translate: 0 0;
+        transition:
+          opacity var(--ma-duration) var(--ma-ease-out),
+          translate var(--ma-duration) var(--ma-ease),
+          background-color var(--ma-duration-fast) var(--ma-ease-out);
+        /* one option after another: the delay is its index in the group, on the stagger token */
+        transition-delay: calc(sibling-index() * var(--ma-stagger));
+      }
+      @starting-style {
+        :where(.ma-aselect__select:open option) {
+          opacity: 0;
+          translate: 0 calc(var(--ma-travel-hover) * -1.5);
+        }
+      }
+      :where(.ma-aselect__select option:hover),
+      :where(.ma-aselect__select option:focus-visible) {
+        background: color-mix(in srgb, var(--ma-ink) 8%, transparent);
+        transition-delay: 0s;
+      }
+      :where(.ma-aselect__select option:checked) {
+        font-weight: 500;
+      }
+      :where(.ma-aselect__select option:disabled) {
+        opacity: 0.45;
+      }
+      :where(.ma-aselect__select option)::checkmark {
+        order: 1;
+        margin-inline-start: auto;
+        font-size: 0.85em;
+        opacity: 0.7;
+      }
+      :where(.ma-aselect__select optgroup) {
+        padding-block: 0.25em;
+      }
+      :where(.ma-aselect__select optgroup)::label {
+        padding: 0.35em 0.7em 0.2em;
+        font-size: 0.75em;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        opacity: 0.55;
+      }
+    }
+    @media (forced-colors: active) {
+      :where(.ma-aselect__select) {
+        border-color: ButtonText;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-aselect__select)::picker(select),
+      :where(.ma-aselect__select option),
+      :where(.ma-aselect__chevron) {
+        transition: none;
+        translate: 0 0;
+      }
+    }
+  }
+</style>

package/src/components/AnimatedSelect.meta.ts

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'AnimatedSelect',
+  slug: 'animated-select',
+  title: 'Animated Select',
+  description: 'A native select with an animated picker. Where the engine has appearance: base-select, the picker takes the tokens, the options arrive one after another through @starting-style with a delay from sibling-index(), the list leaves on allow-discrete and the checkmark is drawn. Elsewhere it is the native select with the same border and chevron, no animation. No imitated listbox: the keyboard, type-to-select, the value and the accessibility tree are the browser\'s. Zero JavaScript.',
+  summary: 'A native <select> whose picker animates open with staggered options, where the engine has appearance: base-select.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'limited', needs: ['base-select', 'picker', 'sibling-index', 'starting-style', 'allow-discrete'], fallback: 'Firefox, and Safari before 27, show the native select styled with the token border and the chevron; the picker is the platform\'s and nothing animates' },
+  readout: '<AnimatedSelect name="model" options={models}>',
+  usage: `---\nconst models = [\n  { value: 'fable', label: 'Fable 5.1' },\n  { value: 'opus', label: 'Opus 5' },\n  { value: 'sonnet', label: 'Sonnet 5' },\n  { value: 'haiku', label: 'Haiku 4.5', group: 'Small' },\n];\n---\n<AnimatedSelect name="model" label="Model" options={models} value="opus" />\n<AnimatedSelect name="size" aria-label="Size" placeholder="Pick a size" size="sm" options={[{ value: 's', label: 'Small' }, { value: 'l', label: 'Large' }]} required />`,
+  props: [
+    { name: 'options', type: '{ value, label, disabled?, group? }[]', description: 'The options; those sharing a group go into one <optgroup>, in order of first appearance.' },
+    { name: 'name', type: 'string', description: 'Form field name.' },
+    { name: 'value', type: 'string', description: 'The selected option\'s value.' },
+    { name: 'label', type: 'string', description: 'Visible label as <label for>. Without it, pass aria-label.' },
+    { name: 'placeholder', type: 'string', description: 'A disabled first option, selected until a choice is made. With required, the form refuses it.' },
+    { name: 'size', type: "'sm' | 'md'", default: "'md'", description: 'Padding and font size.' },
+    { name: 'id', type: 'string', default: 'unique per render', description: 'The select\'s id, and the label\'s for. Unset, ma-aselect- with the name and a random suffix, so a PromptInput and an AnimatedSelect both named model can share a page. Yours wins.' },
+  ],
+  reducedMotion: 'The picker appears in place and the options are all there at once.',
+  clientRouter: 'A native select; nothing to bind.',
+  craft: [
+    'appearance: base-select is the customizable-select feature: the select stays a select (value, name, required, keyboard, type-to-select, the accessibility tree) and its picker becomes a styleable box (::picker(select)) with styleable options. No imitated listbox with its own key handling and its own bugs.',
+    'The options stagger with one rule: transition-delay is sibling-index() times the stagger token, so the first option is on screen on the first frame of the picker and the sixth follows a fraction later. On hover the delay is zero, so the highlight never lags the pointer.',
+    'The picker enters through @starting-style (a small rise on the preset curve) and leaves through display and overlay on allow-discrete, so the exit is visible and the top layer waits for it.',
+    'Engines without the feature get the same border, radius, panel colour and chevron on the native control, so a form with one of each does not look like two libraries. The picker there is the platform\'s own; nothing is emulated.',
+    'The chevron is ours in both modes (the native ::picker-icon is hidden) so the two looks share one glyph; under base-select it turns on :open.',
+    'With label it renders two nodes: the <label>, then the wrapper span that holds the select and the chevron. class and style go to the wrapper, every other attribute to the select; wrap the component in an element of your own to place both as one.',
+  ],
+  related: ['prompt-input', 'popover', 'switch'],
+  intents: ['animated select', 'custom select css', 'styled dropdown native', 'select with animated options', 'customizable select', 'dropdown with stagger'],
+  replaces: ['Select (shadcn / Radix)', 'AnimatedSelect (Motion Primitives)', 'Listbox (Headless UI)'],
+  fixture: { props: { name: 'ma-fixture', label: 'Fixture content for AnimatedSelect', options: [{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }] }, expect: 'Fixture content for AnimatedSelect' },
+} satisfies ComponentMeta;

package/src/components/ArrowButton.astro

@@ -0,0 +1,133 @@
+---
+/**
+ * ArrowButton — the arrow leaves and a new one arrives on hover, zero JS.
+ * Two copies of the icon share one clipped cell; hover translates the first
+ * out and the second in on the preset's spring, so the arrow reads as one
+ * that kept going. `direction` rotates the cell, so up, down and left travel
+ * the way they point; on a right-to-left page right and left are mirrored,
+ * so right still points past the end of the label. Hover is read from the
+ * button itself or from the link or button around it; :focus-visible draws
+ * the same state.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+type Direction = 'right' | 'left' | 'up' | 'down';
+
+interface Props extends HTMLAttributes<'button'> {
+  /** Element to render. `span` for a label inside your own link or button. */
+  as?: 'button' | 'a' | 'span';
+  /** For `as="a"`. */
+  href?: string;
+  /** Where the arrow points and travels. */
+  direction?: Direction;
+}
+
+const ROT: Record<Direction, number> = { right: 0, down: 90, left: 180, up: -90 };
+const { as: Tag = 'button', href, direction = 'right', class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-arrow-rot:${ROT[direction]}deg`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Tag class:list={['ma-arrow', className]} data-dir={direction} href={Tag === 'a' ? href : undefined} type={Tag === 'button' ? 'button' : undefined} style={vars} {...rest}>
+  <span class="ma-arrow__label"><slot /></span>
+  <span class="ma-arrow__box" aria-hidden="true">
+    <svg class="ma-arrow__icon ma-arrow__icon--out" viewBox="0 0 16 16"><path d="M2 8h11M9 4l4 4-4 4" /></svg>
+    <svg class="ma-arrow__icon ma-arrow__icon--in" viewBox="0 0 16 16"><path d="M2 8h11M9 4l4 4-4 4" /></svg>
+  </span>
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-arrow) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5em;
+      padding: 0.65em 1.1em;
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.6em;
+      background: var(--ma-panel);
+      color: var(--ma-ink);
+      font: inherit;
+      font-weight: 500;
+      line-height: 1.2;
+      text-decoration: none;
+      cursor: pointer;
+      transition:
+        border-color var(--ma-duration-fast) var(--ma-ease-out),
+        background-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-arrow[data-dir='left'] .ma-arrow__box) {
+      order: -1;
+    }
+    :where(.ma-arrow__box) {
+      display: inline-grid;
+      width: 1.1em;
+      height: 1.1em;
+      overflow: clip;
+      rotate: var(--ma-arrow-rot, 0deg);
+      flex: none;
+    }
+    :where(.ma-arrow__icon) {
+      grid-area: 1 / 1;
+      width: 100%;
+      height: 100%;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.6;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-arrow__icon--in) {
+      translate: -110% 0;
+    }
+    /* right to left, a horizontal arrow is mirrored: right points to the inline end (left on the page), away from the
+       label as it does left to right, and travels that way; left mirrors back. The mirror is on the cell, so the travel
+       inside it follows. [dir] and not :dir(): Chrome has :dir() only from 120, and a build that targets an older
+       Chrome rewrites it into a guess from lang, which a page that sets only dir never matches. An ltr island one level
+       inside an rtl page is set back */
+    :where([dir='rtl'] .ma-arrow:is([data-dir='right'], [data-dir='left']) .ma-arrow__box, .ma-arrow[dir='rtl']:is([data-dir='right'], [data-dir='left']) .ma-arrow__box) {
+      scale: -1 1;
+    }
+    :where([dir='rtl'] [dir='ltr'] .ma-arrow .ma-arrow__box, [dir='rtl'] .ma-arrow[dir='ltr'] .ma-arrow__box) {
+      scale: none;
+    }
+    @media (hover: hover) {
+      :where(.ma-arrow:hover),
+      :where(:is(a, button, label):hover .ma-arrow) {
+        border-color: color-mix(in srgb, var(--ma-ink) 40%, transparent);
+      }
+      :where(.ma-arrow:hover .ma-arrow__icon--out),
+      :where(:is(a, button, label):hover .ma-arrow .ma-arrow__icon--out) {
+        translate: 110% 0;
+      }
+      :where(.ma-arrow:hover .ma-arrow__icon--in),
+      :where(:is(a, button, label):hover .ma-arrow .ma-arrow__icon--in) {
+        translate: 0 0;
+      }
+    }
+    :where(.ma-arrow:focus-visible),
+    :where(:is(a, button):focus-visible .ma-arrow) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-arrow:focus-visible .ma-arrow__icon--out),
+    :where(:is(a, button):focus-visible .ma-arrow .ma-arrow__icon--out) {
+      translate: 110% 0;
+    }
+    :where(.ma-arrow:focus-visible .ma-arrow__icon--in),
+    :where(:is(a, button):focus-visible .ma-arrow .ma-arrow__icon--in) {
+      translate: 0 0;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-arrow__icon) {
+        transition: none;
+      }
+      :where(.ma-arrow__icon--out) {
+        translate: 0 0;
+      }
+      :where(.ma-arrow__icon--in) {
+        translate: -110% 0;
+      }
+    }
+  }
+</style>

package/src/components/ArrowButton.meta.ts

@@ -0,0 +1,32 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'ArrowButton',
+  slug: 'arrow-button',
+  title: 'Arrow Button',
+  description: 'A button whose arrow slides out on hover as a new one slides in. Two copies of the icon sit in one clipped cell, one translating out while the other comes in on the preset\'s spring. direction rotates the cell so up, down and left travel the way they point. Hover is read from the containing link or button too; focus draws the same. Zero JavaScript.',
+  summary: 'A button whose arrow slides out on hover while a new one slides in, pointing in any of four directions.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['hover'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<ArrowButton direction="right">',
+  usage: `<ArrowButton as="a" href="/components/">Browse the catalogue</ArrowButton>\n<ArrowButton direction="down">Read on</ArrowButton>\n<a href="/docs/" class="my-link"><ArrowButton as="span">Docs</ArrowButton></a>`,
+  props: [
+    { name: 'as', type: "'button' | 'a' | 'span'", default: "'button'", description: 'Element to render; span for a label inside your own link.' },
+    { name: 'href', type: 'string', description: 'For as="a".' },
+    { name: 'direction', type: "'right' | 'left' | 'up' | 'down'", default: "'right'", description: 'Where the arrow points and travels. On a right-to-left page right and left are mirrored: right points to the end of the line (left on the page), past the label, as it does in English.' },
+  ],
+  reducedMotion: 'The arrow stays put; hover changes the border only.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'The travel is 110 % of the cell, not 100 %: the leaving arrow clears the clip before the arriving one lands, so at no frame are two heads visible.',
+    'One rotate on the cell handles four directions; the icons and the keyframes are the same, so the four variants cost one rule. Right to left, a scale of -1 on the same cell mirrors right and left under a dir="rtl" ancestor, so the arrow leaves past the label on either side. The selector reads the attribute because Chrome has :dir() only from 120, and a build that targets an older Chrome rewrites it into a guess from lang, which a page that sets only dir never matches.',
+    'Hover on the whole button or on the link around a span: the arrow acknowledges the whole target.',
+    'On the preset spring (ui: 450 ms): a snap preset makes it a tick, ambient a glide. The preset sets the feel.',
+  ],
+  related: ['text-roll', 'underline-hover', 'shimmer-button'],
+  intents: ['arrow button hover', 'button arrow slides out', 'cta arrow animation', 'link arrow animation', 'arrow that moves on hover'],
+  replaces: ['ArrowButton (Animata)', 'InteractiveHoverButton (Magic UI)', 'link arrow hover (Tailwind Plus)'],
+  fixture: { slot: 'Fixture content for ArrowButton', expect: 'Fixture content for ArrowButton' },
+} satisfies ComponentMeta;

package/src/components/Aurora.astro

@@ -0,0 +1,188 @@
+---
+/**
+ * Aurora — ambient gradient field, zero JS, no WebGL.
+ *
+ * Four layers, each on the compositor: three soft colour fields drifting at
+ * three coprime periods so the pattern never repeats, a slow hue rotation on
+ * the whole field so the colours themselves move, and a grain layer stepped
+ * at 12 fps so the surface reads as film, not vector. No filter: blur() — the
+ * softness comes from the gradient falloff itself, so every frame costs a
+ * transform (and one accelerated hue-rotate), never a re-blur. Fills its
+ * positioned parent.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Three colours, any CSS colour. */
+  colors?: [string, string, string];
+  /** Seconds per drift cycle of the slowest field; the others run at 0.72× and 0.55×. */
+  duration?: number;
+  /** Overall strength, 0–1. */
+  opacity?: number;
+  /** Degrees the hues wander either side of the given colours; 0 pins them. */
+  hue?: number;
+  /** Grain strength, 0–1; 0 removes the layer. */
+  grain?: number;
+}
+
+const {
+  colors = ['oklch(70% 0.19 300)', 'oklch(78% 0.15 200)', 'oklch(75% 0.17 350)'],
+  duration = 22,
+  opacity = 0.55,
+  hue = 40,
+  grain = 0.5,
+  class: className,
+  style,
+  ...rest
+} = Astro.props;
+const vars = [
+  `--ma-aurora-1:${colors[0]}`,
+  `--ma-aurora-2:${colors[1]}`,
+  `--ma-aurora-3:${colors[2]}`,
+  `--ma-aurora-duration:${duration}s`,
+  `--ma-aurora-opacity:${opacity}`,
+  `--ma-aurora-hue:${hue}deg`,
+  `--ma-aurora-grain:${grain}`,
+  typeof style === 'string' ? style : '',
+]
+  .filter(Boolean)
+  .join(';');
+---
+
+<div
+  class:list={['ma-aurora', className]}
+  aria-hidden="true"
+  data-grain={grain > 0 ? '' : undefined}
+  style={vars}
+  {...rest}
+>
+  <span class="ma-aurora__field">
+    <span class="ma-aurora__blob"></span>
+    <span class="ma-aurora__blob"></span>
+    <span class="ma-aurora__blob"></span>
+  </span>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-aurora) {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      pointer-events: none;
+      opacity: var(--ma-aurora-opacity, 0.55);
+      contain: strict;
+    }
+    :where(.ma-aurora__field) {
+      position: absolute;
+      inset: -10%;
+      will-change: filter;
+      animation: ma-aurora-hue calc(var(--ma-aurora-duration, 22s) * 2.6) ease-in-out infinite alternate;
+    }
+    :where(.ma-aurora__blob) {
+      position: absolute;
+      width: 70%;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background: radial-gradient(circle at center, var(--ma-aurora-c) 0%, color-mix(in oklch, var(--ma-aurora-c), transparent 55%) 28%, transparent 64%);
+      will-change: translate, scale;
+      animation: ma-aurora-drift var(--ma-aurora-duration, 22s) ease-in-out infinite alternate;
+    }
+    :where(.ma-aurora__blob:nth-child(1)) {
+      --ma-aurora-c: var(--ma-aurora-1);
+      top: -25%;
+      left: -15%;
+    }
+    :where(.ma-aurora__blob:nth-child(2)) {
+      --ma-aurora-c: var(--ma-aurora-2);
+      top: 5%;
+      right: -20%;
+      animation-name: ma-aurora-drift-2;
+      animation-duration: calc(var(--ma-aurora-duration, 22s) * 0.72);
+      animation-delay: calc(var(--ma-aurora-duration, 22s) / -3);
+    }
+    :where(.ma-aurora__blob:nth-child(3)) {
+      --ma-aurora-c: var(--ma-aurora-3);
+      bottom: -35%;
+      left: 15%;
+      animation-name: ma-aurora-drift-3;
+      animation-duration: calc(var(--ma-aurora-duration, 22s) * 0.55);
+      animation-delay: calc(var(--ma-aurora-duration, 22s) / -1.5);
+    }
+    /* grain: a tiled SVG turbulence, stepped so it flickers like film at 12 fps; translate only, so it stays on the compositor */
+    :where(.ma-aurora[data-grain])::after {
+      content: '';
+      position: absolute;
+      inset: -20%;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-size: 200px 200px;
+      mix-blend-mode: overlay;
+      opacity: calc(var(--ma-aurora-grain, 0.5) * 0.5);
+      animation: ma-aurora-grain 0.5s steps(6) infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-aurora__field),
+      :where(.ma-aurora__blob),
+      :where(.ma-aurora[data-grain])::after {
+        animation: none;
+        will-change: auto;
+      }
+    }
+  }
+
+  @keyframes ma-aurora-drift {
+    0% {
+      translate: 0 0;
+      scale: 1;
+    }
+    50% {
+      translate: 28% 14%;
+      scale: 1.25;
+    }
+    100% {
+      translate: -14% 30%;
+      scale: 0.9;
+    }
+  }
+  @keyframes ma-aurora-drift-2 {
+    0% {
+      translate: 0 0;
+      scale: 1.1;
+    }
+    50% {
+      translate: -30% 20%;
+      scale: 0.85;
+    }
+    100% {
+      translate: -10% -18%;
+      scale: 1.2;
+    }
+  }
+  @keyframes ma-aurora-drift-3 {
+    0% {
+      translate: 0 0;
+      scale: 0.95;
+    }
+    50% {
+      translate: 24% -30%;
+      scale: 1.2;
+    }
+    100% {
+      translate: -20% -8%;
+      scale: 1;
+    }
+  }
+  @keyframes ma-aurora-hue {
+    from {
+      filter: hue-rotate(calc(var(--ma-aurora-hue, 40deg) * -1));
+    }
+    to {
+      filter: hue-rotate(var(--ma-aurora-hue, 40deg));
+    }
+  }
+  @keyframes ma-aurora-grain {
+    to {
+      translate: 6% 4%;
+    }
+  }
+</style>

package/src/components/Aurora.meta.ts

@@ -0,0 +1,36 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Aurora',
+  slug: 'aurora',
+  title: 'Aurora Background',
+  description:
+    'Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps. No WebGL, no canvas, no blur filter: every layer is a transform on the compositor.',
+  summary: 'An aurora background: three soft colour fields drifting at different speeds under a slow hue shift and film grain.',
+  category: 'background',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<Aurora duration={22}>',
+  usage: `<section class="relative">\n  <Aurora />\n  <h1 class="relative">Content above the field</h1>\n</section>`,
+  props: [
+    { name: 'colors', type: '[string, string, string]', default: 'violet, cyan, rose (oklch)', description: 'Three colours, any CSS colour. Keep chroma moderate on light backgrounds.' },
+    { name: 'duration', type: 'number', default: '22', description: 'Seconds per drift cycle of the slowest field; the others run at 0.72× and 0.55× so the pattern never repeats. Under 12 stops being ambient.' },
+    { name: 'hue', type: 'number', default: '40', description: 'Degrees the hues wander either side of the given colours over 2.6 cycles; 0 pins them.' },
+    { name: 'grain', type: 'number', default: '0.5', description: 'Grain strength, 0–1; 0 removes the layer.' },
+    { name: 'opacity', type: 'number', default: '0.55', description: 'Overall strength, 0–1.' },
+  ],
+  reducedMotion: 'The fields stop drifting, the hue stops turning and the grain holds still: a static gradient with texture.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'No filter: blur(). A moving blurred layer is re-blurred every frame; a soft radial gradient moving on the compositor is not.',
+    'alternate + ease-in-out so the drift never snaps back to its start; three coprime periods (1 : 0.72 : 0.55) so the composition never repeats.',
+    'Hue moves with one accelerated hue-rotate on the field, not by repainting gradients; the grain is a static SVG tile whose translate steps at 12 fps.',
+    'contain: strict and pointer-events: none, because the layer is decoration and must never affect layout or clicks.',
+    'aria-hidden: there is nothing to announce.',
+  ],
+  related: ['reveal'],
+  intents: ['aurora background', 'gradient background animation', 'animated gradient blobs', 'ambient hero background astro', 'aurora without webgl'],
+  replaces: ['Aurora (React Bits, OGL)', 'AuroraBackground (Aceternity)', 'BackgroundGradientAnimation (Aceternity)'],
+  fixture: { expect: 'class="ma-aurora"' },
+} satisfies ComponentMeta;