@moonarc/core 0.1.0

package/src/components/AnimatedBeam.meta.ts

@@ -0,0 +1,39 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'AnimatedBeam',
+  slug: 'animated-beam',
+  title: 'Animated Beam',
+  description: 'Sends packets of light along curves between nodes. The layout is a preset (satellites around a hub, a row, or a fan into one), computed on the server in percent, so the SVG paths and the slotted nodes share coordinates and nothing is measured. Each beam is one dash, sized as a fraction of its path\'s on-screen length (computed in CSS from the box\'s container units), whose offset runs from start to past the end, with a fainter tail behind it. Zero JS.',
+  summary: 'Beams of light that travel along curved lines between nodes: a hub with satellites, a row, or a fan into one.',
+  category: 'background',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: ['container-units', 'css-exp'], fallback: 'without container units or hypot() the lines draw solid in the packet colour and nothing travels' },
+  readout: '<AnimatedBeam layout="hub" nodes={5}>',
+  usage: `<div class="relative h-80">\n  <AnimatedBeam layout="hub" nodes={5} color="var(--action)">\n    <img slot="hub" src="/logo.svg" alt="" />\n    <Icon slot="node-1" name="slack" />\n    <Icon slot="node-2" name="notion" />\n    <Icon slot="node-3" name="github" />\n    <Icon slot="node-4" name="figma" />\n    <Icon slot="node-5" name="linear" />\n  </AnimatedBeam>\n</div>`,
+  props: [
+    { name: 'layout', type: "'hub' | 'row' | 'fan'", default: "'hub'", description: 'hub: one centre (slot hub) with `nodes` satellites on an ellipse · row: `nodes` in a line, left to right · fan: `nodes` on the left into one on the right (slot hub).' },
+    { name: 'nodes', type: 'number', default: '5', description: 'Satellites or steps, 2–8. Slots node-1 … node-8; an empty slot draws a dot.' },
+    { name: 'duration', type: 'number', default: '3', description: 'Seconds a packet takes to travel one path.' },
+    { name: 'color', type: 'string', default: "'currentColor'", description: 'Packet colour.' },
+    { name: 'track', type: 'string', default: 'var(--ma-edge)', description: 'The line behind the packets.' },
+    { name: 'curve', type: 'number', default: '0.35', description: 'Bend of the curves, 0 straight to 1 deeply curved; sides alternate so a hub reads as a flower.' },
+    { name: 'length', type: 'number', default: '0.18', description: 'Packet length as a fraction of its path.' },
+    { name: 'reverse', type: 'boolean', default: 'false', description: 'Flow away from the hub (row: right to left).' },
+    { name: 'width', type: 'number', default: '1.5', description: 'Line width in px, kept in px by vector-effect while the viewBox stretches.' },
+  ],
+  reducedMotion: 'The lines stay, drawn solid at 60 % in the packet colour; nothing travels.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'Positions and paths are computed once on the server in percent of the box; nodes are absolutely positioned with the same numbers, so the component is responsive with no ResizeObserver and no getBoundingClientRect. The Magic UI original measures on every resize.',
+    'Every dash is a fraction of its own path, so a short path and a long one carry packets of the same relative length. The length is CSS: one user unit is 1cqw across and 1cqh down, and eight chords of each curve, computed on the server, sum as hypot() terms to within half a percent of the arc at any box size. pathLength="1" cannot do it: under non-scaling-stroke all three engines lay its units along the screen-space path, and a stretched box drew a row of short dashes. The size container is a box around the drawing alone, so a slotted node keeps its own container queries and cq units.',
+    'The gap in the dash pattern is twice the path\'s length, so exactly one packet is on a path at a time; the tail is a longer dash a quarter as bright with its end pinned to the packet\'s.',
+    'Each path\'s delay is its index over the count of the period, which spreads the packets evenly instead of using a fixed stagger.',
+    'preserveAspectRatio="none" stretches the drawing to the box; vector-effect: non-scaling-stroke keeps the line width constant, and puts the dashes in screen px with it.',
+  ],
+  related: ['orbiting-circles', 'border-beam', 'tracing-beam'],
+  intents: ['animated beam between elements', 'integration diagram animated lines', 'connecting beams hub and spokes', 'data flow lines animation', 'animated connection lines svg'],
+  replaces: ['AnimatedBeam (Magic UI)', 'Connection beams (Aceternity)'],
+  fixture: { props: { layout: 'hub', nodes: 4 }, expect: 'class="ma-beams"' },
+} satisfies ComponentMeta;

package/src/components/AnimatedIcons.astro

@@ -0,0 +1,193 @@
+---
+/**
+ * AnimatedIcons — six line icons, each with a second state it morphs into,
+ * zero JS: menu ↔ close, plus ↔ close, copy ↔ check, play ↔ pause,
+ * sun ↔ moon, and a check that draws itself. Every stroke is its own path
+ * moved by the individual transform properties (translate, rotate, scale)
+ * plus opacity and a dash offset, so each pair works in every engine; play
+ * ↔ pause additionally morphs its two halves with `d: path()` where the
+ * property exists (Chrome, Firefox) and cross-fades elsewhere. The state is
+ * the `state` prop, or read from the button around it: aria-pressed,
+ * aria-expanded, data-state="done" or data-on — so CopyButton, ThemeToggle
+ * and a burger menu switch their icon without a line of script. Any such
+ * ancestor counts, however far out; state="off" pins the icon off.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+type Icon = 'menu' | 'copy' | 'play' | 'plus' | 'check' | 'sun';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** Which pair. */
+  icon: Icon;
+  /** Second state; 'on' or 'off' pins it. Unset: on while any ancestor has aria-pressed="true", aria-expanded="true", data-state="done" or data-on. */
+  state?: 'on' | 'off';
+  /** Any CSS length; default 1em, so it follows the button's font-size. */
+  size?: string;
+  /** Stroke width on the 24-unit grid. */
+  stroke?: number;
+}
+
+const { icon, state, size = '1em', stroke = 2, class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-icon-size:${size}`, `--ma-icon-stroke:${stroke}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<span class:list={['ma-icon', className]} data-icon={icon} data-on={state === 'on' ? '' : undefined} data-off={state === 'off' ? '' : undefined} aria-hidden="true" style={vars} {...rest}>
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+    {icon === 'menu' && (
+      <>
+        <path class="ma-icon__a" d="M4 7h16" />
+        <path class="ma-icon__b" d="M4 12h16" />
+        <path class="ma-icon__c" d="M4 17h16" />
+      </>
+    )}
+    {icon === 'plus' && (
+      <>
+        <path class="ma-icon__a" d="M12 4v16" />
+        <path class="ma-icon__b" d="M4 12h16" />
+      </>
+    )}
+    {icon === 'check' && <path class="ma-icon__a" d="M5 12l4.5 4.5L19 7" pathLength="1" />}
+    {icon === 'copy' && (
+      <>
+        <rect class="ma-icon__a" x="9" y="9" width="11" height="11" rx="2" />
+        <path class="ma-icon__b" d="M5 15V6a2 2 0 0 1 2-2h9" />
+        <path class="ma-icon__c" d="M5 12l4.5 4.5L19 7" pathLength="1" />
+      </>
+    )}
+    {icon === 'play' && (
+      <>
+        <path class="ma-icon__a" d="M7 5 L12 8 L12 16 L7 19 Z" fill="currentColor" />
+        <path class="ma-icon__b" d="M12 8 L17 12 L17 12 L12 16 Z" fill="currentColor" />
+        <path class="ma-icon__c" d="M6 5 L10 5 L10 19 L6 19 Z" fill="currentColor" />
+        <path class="ma-icon__d" d="M14 5 L18 5 L18 19 L14 19 Z" fill="currentColor" />
+      </>
+    )}
+    {icon === 'sun' && (
+      <>
+        <circle class="ma-icon__a" cx="12" cy="12" r="4" />
+        <path class="ma-icon__b" d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+        <path class="ma-icon__c" d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+      </>
+    )}
+  </svg>
+</span>
+
+<style is:global>
+  @layer components {
+    :where(.ma-icon) {
+      display: inline-block;
+      width: var(--ma-icon-size, 1em);
+      height: var(--ma-icon-size, 1em);
+      vertical-align: -0.125em;
+      flex: none;
+    }
+    :where(.ma-icon > svg) {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      stroke-width: var(--ma-icon-stroke, 2);
+    }
+    :where(.ma-icon > svg > *) {
+      transform-box: fill-box;
+      transform-origin: center;
+      transition:
+        translate var(--ma-duration) var(--ma-ease),
+        rotate var(--ma-duration) var(--ma-ease),
+        scale var(--ma-duration) var(--ma-ease),
+        opacity var(--ma-duration) var(--ma-ease),
+        stroke-dashoffset var(--ma-duration) var(--ma-ease),
+        d var(--ma-duration) var(--ma-ease);
+    }
+
+    /* off states that are not the drawn attribute */
+    :where(.ma-icon[data-icon='check'] .ma-icon__a),
+    :where(.ma-icon[data-icon='copy'] .ma-icon__c) {
+      stroke-dasharray: 1;
+      stroke-dashoffset: 1;
+    }
+    :where(.ma-icon[data-icon='play'] .ma-icon__c),
+    :where(.ma-icon[data-icon='play'] .ma-icon__d),
+    :where(.ma-icon[data-icon='sun'] .ma-icon__c) {
+      opacity: 0;
+      scale: 0.6;
+    }
+    :where(.ma-icon[data-icon='sun'] .ma-icon__c) {
+      rotate: -90deg;
+    }
+
+    /* on: the prop, or any ancestor in an on state, unless the prop pins it off */
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='menu'] .ma-icon__a) {
+      translate: 0 5px;
+      rotate: 45deg;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='menu'] .ma-icon__b) {
+      scale: 0 1;
+      opacity: 0;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='menu'] .ma-icon__c) {
+      translate: 0 -5px;
+      rotate: -45deg;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='plus'] > svg > *) {
+      rotate: 45deg;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='check'] .ma-icon__a),
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='copy'] .ma-icon__c) {
+      stroke-dashoffset: 0;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='copy'] .ma-icon__c) {
+      transition-delay: calc(var(--ma-duration) / 3);
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='copy'] .ma-icon__a),
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='copy'] .ma-icon__b) {
+      scale: 0.5;
+      opacity: 0;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='play'] .ma-icon__a),
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='play'] .ma-icon__b) {
+      opacity: 0;
+      scale: 0.6;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='play'] .ma-icon__c),
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='play'] .ma-icon__d) {
+      opacity: 1;
+      scale: 1;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='sun'] .ma-icon__a),
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='sun'] .ma-icon__b) {
+      opacity: 0;
+      scale: 0.5;
+      rotate: 90deg;
+    }
+    :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='sun'] .ma-icon__c) {
+      opacity: 1;
+      scale: 1;
+      rotate: 0deg;
+    }
+
+    /* play ↔ pause: where `d` is a CSS property the two halves morph into the two bars; the bar paths are then never shown */
+    @supports (d: path('M0 0h1')) {
+      :where(.ma-icon[data-icon='play'] .ma-icon__c),
+      :where(.ma-icon[data-icon='play'] .ma-icon__d) {
+        display: none;
+      }
+      :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='play'] .ma-icon__a) {
+        d: path('M6 5 L10 5 L10 19 L6 19 Z');
+        opacity: 1;
+        scale: 1;
+      }
+      :where(:is(.ma-icon[data-on], :is([aria-pressed='true'], [aria-expanded='true'], [data-state='done'], [data-on]) .ma-icon:not([data-off]))[data-icon='play'] .ma-icon__b) {
+        d: path('M14 5 L18 5 L18 19 L14 19 Z');
+        opacity: 1;
+        scale: 1;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-icon > svg > *) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/AnimatedIcons.meta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'AnimatedIcons',
+  slug: 'animated-icons',
+  title: 'Animated Icons',
+  description: 'Six line icons that morph into a second state: menu to close, plus to close, copy to check, play to pause, sun to moon, and a check that draws itself. Each stroke is its own path moved by translate, rotate, scale, opacity and dash offset, so every pair works in every engine; play/pause also morphs with d: path() where the property exists. The state is a prop or comes from the button around it (aria-pressed, aria-expanded, data-state="done", data-on). Zero JavaScript.',
+  summary: 'Six line icons that morph to a second state, such as menu to close, copy to check and sun to moon.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['click'],
+  support: { baseline: 'limited', needs: ['d-path'], fallback: 'play ↔ pause cross-fades instead of morphing where d: path() is not a CSS property (Safari)' },
+  readout: '<AnimatedIcons icon="menu">',
+  usage: `<button type="button" aria-expanded="false" aria-label="Menu" onclick="this.ariaExpanded = this.ariaExpanded !== 'true'">\n  <AnimatedIcons icon="menu" />\n</button>\n<AnimatedIcons icon="play" state="on" size="1.5em" />`,
+  props: [
+    { name: 'icon', type: "'menu' | 'copy' | 'play' | 'plus' | 'check' | 'sun'", description: 'Which pair.' },
+    { name: 'state', type: "'on' | 'off'", description: 'Second state; on or off pins it. Unset, the icon is on while any ancestor has aria-pressed="true", aria-expanded="true", data-state="done" or data-on, however far out: an open menu around a button counts too, so pass off to keep an icon out of it.' },
+    { name: 'size', type: 'string', default: "'1em'", description: 'Any CSS length; follows the button\'s font-size by default.' },
+    { name: 'stroke', type: 'number', default: '2', description: 'Stroke width on the 24-unit grid.' },
+  ],
+  reducedMotion: 'The strokes switch at once.',
+  clientRouter: 'CSS-only; the state is on the element or its button and goes with the page.',
+  craft: [
+    'The state is read from the button\'s own ARIA, so the attribute a screen reader needs is the one that moves the icon. There is no second source of truth.',
+    'Individual transform properties per stroke with transform-box: fill-box: the burger\'s outer lines slide to the middle and turn 45°, the middle line collapses; nothing is a path morph.',
+    'Play ↔ pause morphs its two halves with d: path() where it can (same command list on both ends), and cross-fades where it cannot, so the fallback is a clean state change, not a broken morph.',
+    'Copy → check draws the check after the rectangles have shrunk away (a third of the duration later), so the two do not overlap mid-flight.',
+    'Everything sits on the preset spring; a snap preset makes the burger click, ambient makes it breathe.',
+  ],
+  related: ['copy-button', 'theme-toggle', 'stateful-button'],
+  intents: ['animated hamburger icon', 'menu to x icon animation', 'play pause morph icon', 'copy to check icon', 'sun moon icon animation', 'animated icons css'],
+  replaces: ['AnimatedIcons (Skiper UI)', 'icon morph (Motion Primitives)', 'lucide-react animated icons'],
+  fixture: { props: { icon: 'menu' }, expect: 'data-icon="menu"' },
+} satisfies ComponentMeta;

package/src/components/AnimatedList.astro

@@ -0,0 +1,305 @@
+---
+/**
+ * AnimatedList — notifications arriving one at a time, the older ones
+ * pushed down and the oldest pushed out, zero JS.
+ *
+ * Two modes. `interval` is a pure-CSS cycle for demos and landing pages:
+ * one registered number runs 0 → 1 over the whole period on every item,
+ * phased by index; the item's time slot k = floor(t × n) says whether it is
+ * visible (k < max), leaving (k = max) or parked above the list waiting to
+ * re-enter, and its translate, opacity and scale are calc() on k — every
+ * change of k is a CSS transition on the preset curve, so the arrival, the
+ * push and the exit are all the same curve, and no keyframe knows how many
+ * items there are. A list too short to cycle (fewer than max + 2 items)
+ * stays still. Live mode is the host's: prepend an item (newest first) and
+ * it grows in through @starting-style while the item pushed past `max`
+ * leaves through allow-discrete; an item appended to a full list is past
+ * `max` itself and never shows. Reduced motion shows the first `max`
+ * items, still.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Item {
+  title: string;
+  body?: string;
+  time?: string;
+  /** Inline SVG or any HTML for the badge; default the first letter of the title. */
+  icon?: string;
+  /** Badge colour. */
+  color?: string;
+}
+
+interface Props extends HTMLAttributes<'ul'> {
+  /** Items rendered as cards. Or slot your own <li> children (each with one child element). */
+  items?: Item[];
+  /** Cycle on its own: the slot each item gets, as a duration token. */
+  interval?: 'fast' | 'base' | 'slow';
+  /** Items visible at once (2–12). */
+  max?: number;
+  /** Row height in interval mode (every item is this tall). */
+  row?: string;
+  /** Gap between rows. */
+  gap?: string;
+  /** Announce additions: role="log" + aria-live="polite" (live mode). */
+  live?: boolean;
+}
+
+const { items, interval, max = 4, row = '3.5rem', gap = '0.5rem', live = false, class: className, style, ...rest } = Astro.props;
+const n = items?.length;
+// the cycle needs one exit slot and one parked slot after the visible ones
+const shown = Math.max(2, Math.min(12, n ? Math.min(max, n - 2) : max));
+const inline = [`--ma-alist-max:${shown}`, `--ma-alist-row:${row}`, `--ma-alist-gap:${gap}`, n && `--ma-alist-n:${n}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+const glyph = (t: string) => `<b>${t.trim().charAt(0).toUpperCase()}</b>`;
+---
+
+<ul
+  class:list={['ma-alist', className]}
+  data-interval={interval}
+  data-max={shown}
+  role={live && !interval ? 'log' : undefined}
+  aria-live={live && !interval ? 'polite' : undefined}
+  style={inline}
+  {...rest}
+>
+  {
+    items ? (
+      items.map((it: Item) => (
+        <li class="ma-alist__item">
+          <div class="ma-alist__card" style={it.color ? `--ma-alist-color:${it.color}` : undefined}>
+            <span class="ma-alist__badge" aria-hidden="true" set:html={it.icon ?? glyph(it.title)} />
+            <span class="ma-alist__text">
+              <span class="ma-alist__title">{it.title}</span>
+              {it.body && <span class="ma-alist__body">{it.body}</span>}
+            </span>
+            {it.time && <time class="ma-alist__time">{it.time}</time>}
+          </div>
+        </li>
+      ))
+    ) : (
+      <slot />
+    )
+  }
+</ul>
+
+<style is:global>
+  @property --ma-alist-t {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @layer components {
+    :where(.ma-alist) {
+      display: grid;
+      gap: var(--ma-alist-gap, 0.5rem);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    /* index and count, from position — so slotted children work the same as items. The index carries the list's own
+       name: it inherits into the cards, and a component inside one would read a shared --ma-i as its own index */
+    :where(.ma-alist > :nth-child(1)) { --ma-alist-i: 0; }
+    :where(.ma-alist > :nth-child(2)) { --ma-alist-i: 1; }
+    :where(.ma-alist > :nth-child(3)) { --ma-alist-i: 2; }
+    :where(.ma-alist > :nth-child(4)) { --ma-alist-i: 3; }
+    :where(.ma-alist > :nth-child(5)) { --ma-alist-i: 4; }
+    :where(.ma-alist > :nth-child(6)) { --ma-alist-i: 5; }
+    :where(.ma-alist > :nth-child(7)) { --ma-alist-i: 6; }
+    :where(.ma-alist > :nth-child(8)) { --ma-alist-i: 7; }
+    :where(.ma-alist > :nth-child(9)) { --ma-alist-i: 8; }
+    :where(.ma-alist > :nth-child(10)) { --ma-alist-i: 9; }
+    :where(.ma-alist > :nth-child(11)) { --ma-alist-i: 10; }
+    :where(.ma-alist > :nth-child(12)) { --ma-alist-i: 11; }
+    :where(.ma-alist:has(> :nth-child(1):last-child)) { --ma-alist-n: 1; }
+    :where(.ma-alist:has(> :nth-child(2):last-child)) { --ma-alist-n: 2; }
+    :where(.ma-alist:has(> :nth-child(3):last-child)) { --ma-alist-n: 3; }
+    :where(.ma-alist:has(> :nth-child(4):last-child)) { --ma-alist-n: 4; }
+    :where(.ma-alist:has(> :nth-child(5):last-child)) { --ma-alist-n: 5; }
+    :where(.ma-alist:has(> :nth-child(6):last-child)) { --ma-alist-n: 6; }
+    :where(.ma-alist:has(> :nth-child(7):last-child)) { --ma-alist-n: 7; }
+    :where(.ma-alist:has(> :nth-child(8):last-child)) { --ma-alist-n: 8; }
+    :where(.ma-alist:has(> :nth-child(9):last-child)) { --ma-alist-n: 9; }
+    :where(.ma-alist:has(> :nth-child(10):last-child)) { --ma-alist-n: 10; }
+    :where(.ma-alist:has(> :nth-child(11):last-child)) { --ma-alist-n: 11; }
+    :where(.ma-alist:has(> :nth-child(12):last-child)) { --ma-alist-n: 12; }
+    /* live mode: an item is a grid row that grows in; past max it leaves */
+    :where(.ma-alist > *) {
+      display: grid;
+      grid-template-rows: 1fr;
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+      transition:
+        grid-template-rows var(--ma-duration) var(--ma-ease),
+        opacity var(--ma-duration) var(--ma-ease-out),
+        translate var(--ma-duration) var(--ma-ease),
+        scale var(--ma-duration) var(--ma-ease),
+        display var(--ma-duration) allow-discrete;
+    }
+    :where(.ma-alist > * > *) {
+      min-height: 0;
+      overflow: clip;
+    }
+    @starting-style {
+      :where(.ma-alist:not([data-interval]) > *) {
+        grid-template-rows: 0fr;
+        opacity: 0;
+        translate: 0 calc(var(--ma-travel-enter, 24px) * -1);
+        scale: 0.96;
+      }
+    }
+    :where(.ma-alist[data-max='2']:not([data-interval]) > :nth-child(n + 3)),
+    :where(.ma-alist[data-max='3']:not([data-interval]) > :nth-child(n + 4)),
+    :where(.ma-alist[data-max='4']:not([data-interval]) > :nth-child(n + 5)),
+    :where(.ma-alist[data-max='5']:not([data-interval]) > :nth-child(n + 6)),
+    :where(.ma-alist[data-max='6']:not([data-interval]) > :nth-child(n + 7)),
+    :where(.ma-alist[data-max='7']:not([data-interval]) > :nth-child(n + 8)),
+    :where(.ma-alist[data-max='8']:not([data-interval]) > :nth-child(n + 9)),
+    :where(.ma-alist[data-max='9']:not([data-interval]) > :nth-child(n + 10)),
+    :where(.ma-alist[data-max='10']:not([data-interval]) > :nth-child(n + 11)),
+    :where(.ma-alist[data-max='11']:not([data-interval]) > :nth-child(n + 12)),
+    :where(.ma-alist[data-max='12']:not([data-interval]) > :nth-child(n + 13)) {
+      display: none;
+      grid-template-rows: 0fr;
+      opacity: 0;
+      scale: 0.96;
+    }
+    /* interval mode: a fixed box of max rows; items are laid on top of each other and placed by their time slot */
+    :where(.ma-alist[data-interval]) {
+      --ma-alist-slot: var(--ma-dur-ambient);
+      --ma-alist-period: calc(var(--ma-alist-n, 4) * var(--ma-alist-slot));
+      position: relative;
+      display: block;
+      height: calc(var(--ma-alist-max, 4) * (var(--ma-alist-row, 3.5rem) + var(--ma-alist-gap, 0.5rem)) - var(--ma-alist-gap, 0.5rem));
+      overflow: clip;
+    }
+    :where(.ma-alist[data-interval='fast']) {
+      --ma-alist-slot: var(--ma-dur-gentle);
+    }
+    :where(.ma-alist[data-interval='slow']) {
+      --ma-alist-slot: calc(var(--ma-dur-ambient) * 2);
+    }
+    :where(.ma-alist[data-interval] > *) {
+      /* ok: 1 when the list can cycle (n ≥ max + 2: one slot to leave, one to hide), else 0 and every item keeps k = its index, still */
+      --ma-alist-ok: clamp(0, var(--ma-alist-n, 4) - var(--ma-alist-max, 4) - 1, 1);
+      /* k: this item's slot right now — 0 is the newest row, max is on its way out, more is parked above waiting to come back */
+      --ma-alist-k: calc(var(--ma-alist-ok) * round(down, var(--ma-alist-t) * var(--ma-alist-n, 4)) + (1 - var(--ma-alist-ok)) * var(--ma-alist-i, 0));
+      --ma-alist-v: clamp(0, var(--ma-alist-max, 4) - var(--ma-alist-k), 1);
+      --ma-alist-e: clamp(0, 1 - (var(--ma-alist-k) - var(--ma-alist-max, 4)) * (var(--ma-alist-k) - var(--ma-alist-max, 4)), 1);
+      --ma-alist-p: calc(1 - var(--ma-alist-v) - var(--ma-alist-e));
+      position: absolute;
+      inset: 0 0 auto 0;
+      display: block;
+      height: var(--ma-alist-row, 3.5rem);
+      translate: 0
+        calc(
+          (var(--ma-alist-v) * var(--ma-alist-k) + var(--ma-alist-e) * var(--ma-alist-max, 4)) * (var(--ma-alist-row, 3.5rem) + var(--ma-alist-gap, 0.5rem)) - var(--ma-alist-p) *
+            var(--ma-travel-enter, 24px)
+        );
+      opacity: var(--ma-alist-v);
+      scale: calc(1 - 0.06 * (1 - var(--ma-alist-v)));
+      animation: ma-alist-t var(--ma-alist-period) linear infinite;
+      animation-delay: calc((var(--ma-alist-n, 4) - var(--ma-alist-i, 0)) * var(--ma-alist-slot) * -1);
+    }
+    :where(.ma-alist[data-interval] > * > *) {
+      height: 100%;
+    }
+    /* the card */
+    :where(.ma-alist__card) {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      box-sizing: border-box;
+      padding: 0.625rem 0.875rem;
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.875rem;
+      background: var(--ma-panel);
+      box-shadow: 0 10px 28px -20px rgb(0 0 0 / 0.4);
+    }
+    :where(.ma-alist__badge) {
+      display: grid;
+      flex: none;
+      place-items: center;
+      width: 2.25rem;
+      height: 2.25rem;
+      border-radius: 0.625rem;
+      background: var(--ma-alist-color, var(--ma-ink));
+      color: var(--ma-panel);
+      font-size: 0.9375rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+    :where(.ma-alist__badge svg) {
+      width: 55%;
+      height: 55%;
+    }
+    :where(.ma-alist__text) {
+      display: grid;
+      flex: 1;
+      min-width: 0;
+      gap: 0.1rem;
+    }
+    :where(.ma-alist__title) {
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1.25;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    :where(.ma-alist__body) {
+      font-size: 0.8125rem;
+      line-height: 1.3;
+      opacity: 0.7;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    :where(.ma-alist__time) {
+      flex: none;
+      align-self: flex-start;
+      font-family: ui-monospace, monospace;
+      font-size: 0.6875rem;
+      opacity: var(--ma-dim, 0.7);
+    }
+    /* reduced motion: the first max items, still */
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-alist > *) {
+        transition: none;
+      }
+      :where(.ma-alist[data-interval]) {
+        display: grid;
+        height: auto;
+      }
+      :where(.ma-alist[data-interval] > *) {
+        position: static;
+        translate: 0 0;
+        opacity: 1;
+        scale: 1;
+        animation: none;
+      }
+      :where(.ma-alist[data-max='2'][data-interval] > :nth-child(n + 3)),
+      :where(.ma-alist[data-max='3'][data-interval] > :nth-child(n + 4)),
+      :where(.ma-alist[data-max='4'][data-interval] > :nth-child(n + 5)),
+      :where(.ma-alist[data-max='5'][data-interval] > :nth-child(n + 6)),
+      :where(.ma-alist[data-max='6'][data-interval] > :nth-child(n + 7)),
+      :where(.ma-alist[data-max='7'][data-interval] > :nth-child(n + 8)),
+      :where(.ma-alist[data-max='8'][data-interval] > :nth-child(n + 9)),
+      :where(.ma-alist[data-max='9'][data-interval] > :nth-child(n + 10)),
+      :where(.ma-alist[data-max='10'][data-interval] > :nth-child(n + 11)),
+      :where(.ma-alist[data-max='11'][data-interval] > :nth-child(n + 12)),
+      :where(.ma-alist[data-max='12'][data-interval] > :nth-child(n + 13)) {
+        display: none;
+      }
+    }
+  }
+
+  @keyframes ma-alist-t {
+    from {
+      --ma-alist-t: 0;
+    }
+    to {
+      --ma-alist-t: 1;
+    }
+  }
+</style>

package/src/components/AnimatedList.meta.ts

@@ -0,0 +1,36 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'AnimatedList',
+  slug: 'animated-list',
+  title: 'Animated List',
+  description: 'Shows notifications arriving one at a time: the new one drops in at the top, the older ones are pushed down, and the oldest slides out. Zero JavaScript: in interval mode one registered number runs over the period on every item and the item\'s time slot decides where it is. Every change is a transition on the preset curve, and no keyframe knows how many items there are. In live mode the host prepends items (newest first) and they grow in through @starting-style while the oldest leaves.',
+  summary: 'A notification list where each new item drops in at the top, the older ones move down and the oldest slides out.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['always', 'load'],
+  support: { baseline: 'newly', needs: ['property', 'css-math', 'has', 'starting-style', 'allow-discrete', 'grid-rows-animation'], fallback: 'without round() or registered properties the interval mode shows the first items still; live items appear at once' },
+  readout: '<AnimatedList interval="base" max={4}>',
+  usage: `<AnimatedList\n  interval="base"\n  max={4}\n  items={[\n    { title: 'Deployed', body: 'main → production in 41 s', time: 'now', color: 'var(--cat-green)' },\n    { title: 'New signup', body: 'ari@studio.example', time: '1m' },\n    { title: 'Payment received', body: '$120 · Plus, yearly', time: '2m' },\n    { title: 'Comment', body: '"looks great on mobile"', time: '3m' },\n    { title: 'Build passed', body: '1 076 checks', time: '5m' },\n    { title: 'Star', body: 'someone starred the repo', time: '6m' },\n  ]}\n/>\n\n<!-- live: prepend each new <li> (one child element) yourself, newest first: feed.prepend(li); role="log" announces it -->\n<AnimatedList live max={5} id="feed" />`,
+  props: [
+    { name: 'items', type: '{ title: string; body?: string; time?: string; icon?: string; color?: string }[]', description: 'Cards. Or slot your own <li> children, each with one child element.' },
+    { name: 'interval', type: "'fast' | 'base' | 'slow'", description: 'Cycle on its own; the slot each item gets is the gentle, ambient or twice-ambient duration token. Needs at least max + 2 items: with items, max is lowered to fit; a list that still has too few (fewer than four items, or slotted children under max + 2) stays still.' },
+    { name: 'max', type: 'number', default: '4', description: 'Items visible at once, 2–12.' },
+    { name: 'row', type: 'string', default: "'3.5rem'", description: 'Row height in interval mode; every item is this tall.' },
+    { name: 'gap', type: 'string', default: "'0.5rem'", description: 'Space between rows.' },
+    { name: 'live', type: 'boolean', default: 'false', description: 'In live mode, role="log" and aria-live="polite" so added items are announced. Prepend them: an item appended to a full list is past max and never shows.' },
+  ],
+  reducedMotion: 'The first max items, still, in a plain column; live additions appear without motion.',
+  clientRouter: 'CSS-only; nothing to rebind. The cycle restarts with the page.',
+  craft: [
+    'The cycle is one registered <number> animated 0 → 1 with literal keyframes (Firefox will not interpolate a var() end value) over n × slot, phased per item with a negative delay of (n − index) × slot, so the items arrive in source order.',
+    'The item\'s slot k = round(down, t × n) is the only state. Visible while k < max, leaving at k = max, parked above the list after that. These are three numbers from clamp() and a square, with no abs() needed, and translate, opacity and scale are calc() on them.',
+    'Every change of k is a plain CSS transition on the preset curve: the arrival from above, each push down a row and the exit below the box are the same motion, and the parked → 0 jump happens at opacity 0 where no one sees it. That is why the list needs max + 2 items: one slot to leave, one to hide.',
+    'Rows are absolutely positioned at a fixed height so translate is a length the CSS can compute; the box is max rows tall and clips. A notification card is the same height every time, so the constraint costs nothing.',
+    'Live mode is the Accordion trick per item (a grid row from 0fr to 1fr through @starting-style), so a prepended item pushes the others down on the same curve instead of jumping the layout, and the one pushed past max leaves through allow-discrete. Visibility is by position (the first max children), so the newest goes first: appended to a full list, it would be past max itself.',
+  ],
+  related: ['toast', 'reveal', 'marquee'],
+  intents: ['animated notification list', 'notifications one by one', 'activity feed animation', 'list items slide in stack', 'animated list astro', 'chat messages arriving in sequence'],
+  replaces: ['AnimatedList (Magic UI)', 'AnimatedList (React Bits)', 'AnimatePresence list (Framer Motion)'],
+  fixture: { props: { interval: 'base', max: 2, items: [{ title: 'Fixture content for AnimatedList' }, { title: 'Two' }, { title: 'Three' }, { title: 'Four' }] }, expect: 'Fixture content for AnimatedList' },
+} satisfies ComponentMeta;