@moonarc/core 0.1.0

package/src/components/LiquidGlass.astro

@@ -0,0 +1,148 @@
+---
+/**
+ * LiquidGlass — a pane of glass over whatever is behind it, zero JS. In
+ * every engine: `backdrop-filter: blur() saturate()`, a specular rim from
+ * two inset highlights, a soft tint from the tokens, and a sheen that
+ * slides across on :hover / :focus-within (CSS, so the trigger is hover,
+ * not the pointer's position). The refraction — the backdrop bending at
+ * the rim — is an SVG displacement map on a pseudo-element with
+ * `backdrop-filter: url(#…)`: the map is built on the server from
+ * `strength` and `edge` as two gradients (red bends x, green bends y)
+ * composited in the filter, stretched to the element's box by the filter
+ * itself, so no size is ever measured and any size works. Chromium renders
+ * it; Firefox and WebKit accept the declaration and paint nothing on that
+ * layer (measured), so they show the same glass without the bend.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Displacement at the rim, in px (Chromium). 0 removes the layer. */
+  strength?: number;
+  /** How far the bend reaches in from the edge, as a fraction of the box. */
+  edge?: number;
+  /** Backdrop blur radius, any CSS length. */
+  blur?: string;
+  /** Tint opacity of the pane, 0–1; default leans on the theme. */
+  tint?: number;
+  /** Corner radius, any CSS length. */
+  radius?: string;
+  /** Filter id; unique per pane when omitted. */
+  id?: string;
+}
+
+const { strength = 40, edge = 0.18, blur = '10px', tint, radius = '1.5rem', id, class: className, style, ...rest } = Astro.props;
+const e = Math.min(0.5, Math.max(0.02, edge));
+// one filter per pane: two panes with the same props used to render two filters under one id, which a page may not have
+const filterId = id ?? `ma-glass-${Math.round(strength)}-${Math.round(e * 100)}-${Math.random().toString(36).slice(2, 7)}`;
+// one axis of the map: neutral (128) through the middle, a smooth ramp to 0 and 255 across the edge band
+const ramp = (axis: 'x' | 'y') => {
+  const c = (v: number) => (axis === 'x' ? `rgb(${v},128,128)` : `rgb(128,${v},128)`);
+  // an ease across the band (four stops a side), so the bend fades in with no seam where the map goes neutral
+  const stops = [
+    [0, 0],
+    [e * 0.25, 48],
+    [e * 0.55, 96],
+    [e * 0.8, 118],
+    [e, 128],
+    [1 - e, 128],
+    [1 - e * 0.8, 138],
+    [1 - e * 0.55, 160],
+    [1 - e * 0.25, 208],
+    [1, 255],
+  ]
+    .map(([o, v]) => `<stop offset='${o}' stop-color='${c(v!)}'/>`)
+    .join('');
+  const dir = axis === 'x' ? "x1='0' x2='1' y1='0' y2='0'" : "x1='0' x2='0' y1='0' y2='1'";
+  return `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><linearGradient id='g' ${dir}>${stops}</linearGradient><rect width='100' height='100' fill='url(#g)'/></svg>`)}`;
+};
+const vars = [`--ma-glass-blur:${blur}`, `--ma-glass-r:${radius}`, tint !== undefined && `--ma-glass-tint:${tint}`, `--ma-glass-filter:url(#${filterId})`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-glass', className]} data-refract={strength > 0 ? '' : undefined} style={vars} {...rest}>
+  {strength > 0 && (
+    <svg class="ma-glass__map" width="0" height="0" aria-hidden="true" focusable="false">
+      <filter id={filterId} x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+        <feImage href={ramp('x')} result="mx" preserveAspectRatio="none" x="0" y="0" width="100%" height="100%" />
+        <feImage href={ramp('y')} result="my" preserveAspectRatio="none" x="0" y="0" width="100%" height="100%" />
+        <feComposite in="mx" in2="my" operator="arithmetic" k1="0" k2="0.5" k3="0.5" k4="0" result="map" />
+        <feDisplacementMap in="SourceGraphic" in2="map" scale={strength * 2} xChannelSelector="R" yChannelSelector="G" />
+      </filter>
+    </svg>
+  )}
+  <div class="ma-glass__body"><slot /></div>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-glass) {
+      /* the tint leans lighter on a light ground, darker on a dark one, from the theme scalar */
+      --ma-glass-tint: calc(0.22 - var(--ma-dark) * 0.1);
+      position: relative;
+      isolation: isolate;
+      border-radius: var(--ma-glass-r, 1.5rem);
+      background: color-mix(in srgb, var(--ma-panel) calc(var(--ma-glass-tint) * 100%), transparent);
+      color: inherit;
+      box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--ma-shine) 55%, transparent),
+        inset 0 1px 0 var(--ma-shine),
+        inset 0 -1px 0 color-mix(in srgb, var(--ma-shine) 25%, transparent),
+        0 24px 48px -24px rgb(0 0 0 / 0.45);
+      backdrop-filter: blur(var(--ma-glass-blur, 10px)) saturate(1.5);
+      overflow: clip;
+    }
+    /* the rim refraction: its own layer, so an engine that paints nothing for an SVG backdrop filter still shows the glass */
+    :where(.ma-glass[data-refract])::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      backdrop-filter: var(--ma-glass-filter);
+      pointer-events: none;
+    }
+    /* the sheen: a diagonal band parked off the left edge, crossing on hover */
+    :where(.ma-glass)::after {
+      content: '';
+      position: absolute;
+      inset: -20% -60%;
+      z-index: -1;
+      background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--ma-shine) 60%, transparent) 50%, transparent 60%);
+      translate: -70% 0;
+      opacity: 0;
+      pointer-events: none;
+      transition:
+        translate var(--ma-duration-slow) var(--ma-ease-out),
+        opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      :where(.ma-glass:hover)::after,
+      :where(.ma-glass:focus-within)::after {
+        translate: 70% 0;
+        opacity: 1;
+        transition:
+          translate var(--ma-duration-slow) var(--ma-ease-in-out),
+          opacity var(--ma-duration-fast) var(--ma-ease-out);
+      }
+    }
+    :where(.ma-glass__map) {
+      position: absolute;
+    }
+    :where(.ma-glass__body) {
+      position: relative;
+      z-index: 1;
+    }
+    @media (forced-colors: active) {
+      :where(.ma-glass) {
+        border: 1px solid CanvasText;
+        background: Canvas;
+        backdrop-filter: none;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-glass)::after {
+        transition: none;
+        display: none;
+      }
+    }
+  }
+</style>

package/src/components/LiquidGlass.meta.ts

@@ -0,0 +1,37 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'LiquidGlass',
+  slug: 'liquid-glass',
+  title: 'Liquid Glass',
+  description: 'A glass pane that blurs and tints whatever is behind it. Every engine: backdrop blur and saturation, a specular rim, a tint from the tokens, a sheen that crosses on hover. The refraction at the rim is an SVG displacement map on its own backdrop-filter layer, built on the server from strength and edge and stretched to the box by the filter, so it works at any size with no measuring. Chromium bends the backdrop; Firefox and WebKit paint nothing on that layer and show the same glass without the bend. Zero JavaScript.',
+  summary: 'A liquid glass pane that blurs and tints what is behind it, with a refracting rim in Chromium.',
+  category: 'ui',
+  tier: 'A',
+  trigger: ['hover'],
+  support: { baseline: 'limited', needs: ['backdrop-filter', 'backdrop-svg'], fallback: 'Firefox and Safari show the glass (blur, saturation, rim, tint, sheen) without the rim refraction; the displacement layer paints nothing there (measured, 0 pixels differ)' },
+  readout: '<LiquidGlass strength={40} blur="10px">',
+  usage: `<div class="relative">\n  <img src={photo.src} alt="" class="w-full" />\n  <LiquidGlass class="absolute inset-x-8 bottom-8 p-6" strength={40} radius="2rem">\n    <h3>Glass over the photo</h3>\n    <p>Blur, a rim and a sheen on hover. In Chromium the edge also bends the picture.</p>\n  </LiquidGlass>\n</div>\n\n<!-- a pill, no refraction -->\n<LiquidGlass strength={0} radius="999px" class="px-5 py-2">Pill</LiquidGlass>`,
+  props: [
+    { name: 'strength', type: 'number', default: '40', description: 'Displacement at the rim in px (Chromium). 0 leaves the refraction layer out entirely.' },
+    { name: 'edge', type: 'number', default: '0.18', description: 'How far the bend reaches in from each edge, as a fraction of the box (0.02–0.5).' },
+    { name: 'blur', type: 'string', default: "'10px'", description: 'Backdrop blur radius.' },
+    { name: 'tint', type: 'number', description: 'Opacity of the panel tint, 0–1; by default 0.22 on a light ground and 0.12 on a dark one (the --ma-dark scalar).' },
+    { name: 'radius', type: 'string', default: "'1.5rem'", description: 'Corner radius; the rim and the refraction follow it.' },
+    { name: 'id', type: 'string', default: 'unique per pane', description: 'The filter id. Omitted, every pane gets its own, so ids never repeat on a page.' },
+  ],
+  reducedMotion: 'No sheen; the glass, the rim and the refraction are static and stay.',
+  clientRouter: 'Static; nothing to bind. The inline SVG filter is part of the page and swaps with it.',
+  craft: [
+    'The refraction was prototyped first, as the handoff asked (docs/phase-7e.md): backdrop-filter: url(#filter) with feDisplacementMap renders in Chromium only. Firefox 155 and WebKit 26.6 accept the declaration in computed style and paint nothing. This was measured on a probe page with the layer on and off: 0 pixels differ. So the refraction lives on a pseudo-element of its own, and the glass every engine sees is the element\'s own backdrop-filter, never invalidated by a url() it cannot paint.',
+    'The displacement map is two gradients, red for x and green for y, neutral through the middle and ramping across the edge band, composited to one map inside the filter (feComposite arithmetic) and stretched to the box by feImage at 100 %, so a pill, a card and a full-width bar all get a rim bend with the same map and nothing measured in the DOM.',
+    'The rim is three inset shadows in the shine token (a hairline all round, a bright top edge, a fainter bottom one), so the pane has a thickness. The tint leans on --ma-dark: a whiter pane on a light page, a darker one on a dark page, from one calc().',
+    'The sheen is a diagonal band parked off the left edge that crosses on :hover and :focus-within, on the slow duration with the in-out curve; behind (hover: hover), so on touch nothing sticks.',
+    'Text on the pane should be the full foreground colour: measured on the stage over a bright scene, the site\'s muted text token fell to 2.4 : 1 while the foreground held 6 : 1 and above in both themes. The tint is too faint to act as a surface for text.',
+    'Windows high contrast drops the filters and draws a Canvas panel with a CanvasText border, which stays legible.',
+  ],
+  related: ['progressive-blur', 'tilt', 'spotlight'],
+  intents: ['liquid glass', 'glassmorphism css', 'frosted glass panel', 'glass card with refraction', 'apple liquid glass effect', 'backdrop blur card'],
+  replaces: ['LiquidGlass (React Bits)', 'Glass card (Kokonut UI)', 'liquid-glass-react'],
+  fixture: { props: { strength: 40 }, slot: '<p>Fixture content for LiquidGlass</p>', expect: 'Fixture content for LiquidGlass' },
+} satisfies ComponentMeta;

package/src/components/Magnetic.astro

@@ -0,0 +1,92 @@
+---
+/**
+ * Magnetic — the child is pulled toward the cursor inside a radius and
+ * springs back when the cursor leaves.
+ *
+ * The wrapper is the field (its padding is the radius) but lets every
+ * pointer event through, so it never covers a neighbour's click; one
+ * pointermove listener on the document measures the pointer against the
+ * field and writes the pull as two custom properties that the child's
+ * translate reads. Following is near-instant; returning uses the active
+ * preset's spring. Reduced motion is read on every move: no pull while it
+ * is on, the pull again as soon as it is off.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Pull as a fraction of the cursor's offset from the centre, 0–1. */
+  strength?: number;
+  /** Field radius around the child in px. */
+  radius?: number;
+}
+
+const { as: Tag = 'span', strength = 0.4, radius = 40, class: className, style, ...rest } = Astro.props;
+const inline = [`--ma-mg-strength:${strength}`, `--ma-mg-radius:${radius}px`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Tag class:list={['ma-magnetic', className]} data-ma-magnetic style={inline} {...rest}>
+  <slot />
+</Tag>
+
+<style is:global>
+  @layer components {
+    /* the field reaches over its neighbours, so it must not catch their pointer: only the child does */
+    :where(.ma-magnetic) {
+      display: inline-block;
+      padding: var(--ma-mg-radius, 40px);
+      margin: calc(var(--ma-mg-radius, 40px) * -1);
+      pointer-events: none;
+    }
+    :where(.ma-magnetic > *) {
+      display: inline-block;
+      pointer-events: auto;
+      translate: var(--ma-mx, 0px) var(--ma-my, 0px);
+      transition: translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-magnetic[data-moving] > *) {
+      transition-duration: 120ms;
+      transition-timing-function: linear;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-magnetic > *) {
+        translate: 0 0;
+        transition: none;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount, prefersReducedMotion } from '../lib/runtime';
+
+  onMount<HTMLElement>('[data-ma-magnetic]', (el, { signal }) => {
+    const strength = Number(el.style.getPropertyValue('--ma-mg-strength') || 0.4);
+    const pull = (x: number, y: number) => {
+      el.style.setProperty('--ma-mx', `${x}px`);
+      el.style.setProperty('--ma-my', `${y}px`);
+    };
+    const leave = () => {
+      delete el.dataset.moving;
+      pull(0, 0);
+    };
+    // the field lets the pointer through (it lies over the neighbours), so it is measured, not hit: the document hears the
+    // moves and the wrapper's box is the field, whatever box its parent has
+    document.addEventListener(
+      'pointermove',
+      (e) => {
+        const r = el.getBoundingClientRect();
+        const x = e.clientX - r.left;
+        const y = e.clientY - r.top;
+        // outside the field, or reduced motion switched on since the bind: spring back once
+        if (x < 0 || y < 0 || x > r.width || y > r.height || prefersReducedMotion()) return 'moving' in el.dataset && leave();
+        pull((x - r.width / 2) * strength, (y - r.height / 2) * strength);
+        el.dataset.moving = '';
+      },
+      { signal, passive: true },
+    );
+    // the pointer left the window, a pen left its range or a touch ended: spring back
+    document.addEventListener('pointerout', (e) => e.relatedTarget || leave(), { signal });
+  });
+</script>

package/src/components/Magnetic.meta.ts

@@ -0,0 +1,31 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Magnetic',
+  slug: 'magnetic',
+  title: 'Magnetic',
+  description: 'A button or icon is pulled toward the cursor while it is nearby and springs back when it leaves. An invisible field around the child lets clicks through to its neighbours; one pointermove listener on the document measures the pointer against it, and the pull is CSS translate on the active preset\'s spring. No pull under reduced motion, read on every move.',
+  summary: 'A magnetic button effect: the element is pulled toward a nearby cursor and springs back when it leaves.',
+  category: 'pointer',
+  tier: 'B',
+  trigger: ['pointer', 'hover'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<Magnetic strength={0.4}>',
+  usage: `<Magnetic strength={0.4} radius={48}>\n  <a href="/setup/" class="rounded-full bg-fg px-5 py-3 text-bg">Get started</a>\n</Magnetic>`,
+  props: [
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'strength', type: 'number', default: '0.4', description: 'Pull as a fraction of the cursor\'s offset from the centre. Over 0.6 the button escapes the cursor.' },
+    { name: 'radius', type: 'number', default: '40', description: 'Field radius around the child in px; the pull starts when the cursor enters it.' },
+  ],
+  reducedMotion: 'No pull: the child stays put in CSS and the script checks the setting on every move, so switching reduced motion on or off (the system or the page\'s own switch) applies at once.',
+  clientRouter: 'Bound through the shared runtime; listeners aborted before the swap.',
+  craft: [
+    'The field is padding with a negative margin, so the layout is unchanged and the cursor is caught before it touches the button. It has pointer-events: none (the child takes them back), so a neighbour inside the field keeps its clicks and its hover. The field is measured instead of hit: one passive pointermove listener on the document reads the wrapper\'s box, one rect read per move, and writes only while the pointer is inside.',
+    'Following: 120 ms linear, because direct manipulation must not lag. Returning: the preset spring, because release is where the character lives.',
+    'The pull is a fraction of the offset, not a fixed distance, so it is strongest at the edge of the field and the button always sits under the cursor on the way out.',
+  ],
+  related: ['tilt', 'spotlight', 'cursor-grid'],
+  intents: ['magnetic button', 'button follows cursor', 'magnetic hover effect', 'cursor attraction button'],
+  replaces: ['Magnet (React Bits)', 'magnetic button (GSAP tutorials)'],
+  fixture: { expect: 'class="ma-magnetic"' },
+} satisfies ComponentMeta;

package/src/components/Marquee.astro

@@ -0,0 +1,165 @@
+---
+/**
+ * Marquee — seamless infinite strip, zero JS.
+ *
+ * The slot is rendered twice (or `repeat` times); the track translates by
+ * exactly one copy, so the loop never shows a seam. The track is at least one
+ * strip plus one copy's share wide and the copies stretch to fill it, spacing
+ * their items evenly, so a copy narrower than the strip never leaves a blank
+ * band: a percentage of the strip, nothing measured. Pauses on hover so a
+ * reader can stop a logo or a link. Reduced motion turns it into a static,
+ * scrollable strip.
+ *
+ * The strip is a tab stop (unless it is aria-hidden): focus pauses it — the
+ * keyboard's way to stop moving content (WCAG 2.2.2) — and under reduced motion
+ * the arrow keys scroll it. The extra copies are inert, so their links are
+ * never reached twice.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Seconds for one full loop. Longer strips need more. */
+  duration?: number;
+  /** Travel direction; left and right are physical, the same on a right-to-left page. Up and down need a height on the strip. */
+  direction?: 'left' | 'right' | 'up' | 'down';
+  /** Copies of the content in the strip, at least 2. More copies make a short list denser; the strip is covered either way. */
+  repeat?: number;
+  /** Space between items and between the copies. Any CSS length. */
+  gap?: string;
+  /** Pause while hovered (pointer devices only). */
+  pauseOnHover?: boolean;
+  /** Fade the strip's edges. */
+  fade?: boolean;
+  /** Accessible name; makes the strip a named region ("Customers"). */
+  label?: string;
+}
+
+const { duration = 28, direction = 'left', repeat = 2, gap = '2rem', pauseOnHover = true, fade = true, label, class: className, style, ...rest } = Astro.props;
+const hidden = rest['aria-hidden'] === true || rest['aria-hidden'] === 'true';
+const vertical = direction === 'up' || direction === 'down';
+const reverse = direction === 'right' || direction === 'down';
+const copies = Math.max(2, Math.round(repeat) || 2);
+const vars = [`--ma-marquee-duration:${duration}s`, `--ma-marquee-gap:${gap}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div
+  class:list={['ma-marquee', className]}
+  data-vertical={vertical ? '' : undefined}
+  data-reverse={reverse ? '' : undefined}
+  data-pause={pauseOnHover ? '' : undefined}
+  data-fade={fade ? '' : undefined}
+  tabindex={hidden ? undefined : 0}
+  role={label ? 'region' : undefined}
+  aria-label={label}
+  style={vars}
+  {...rest}
+>
+  <div class="ma-marquee__track" style={copies > 2 ? `--ma-marquee-copies:${copies}` : undefined}>
+    <div class="ma-marquee__group"><slot /></div>
+    {Array.from({ length: copies - 1 }, () => <div class="ma-marquee__group" aria-hidden="true" inert><slot /></div>)}
+  </div>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-marquee) {
+      overflow: hidden;
+      /* A flex/grid child defaults to min-width: auto = its min-content, and the
+         track is max-content wide, so without this the strip leaks its whole
+         width into the parent column and locks the grid. */
+      min-width: 0;
+      max-width: 100%;
+      contain: layout paint;
+    }
+    :where(.ma-marquee[data-fade]) {
+      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
+    }
+    :where(.ma-marquee[data-fade][data-vertical]) {
+      mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
+    }
+    /* at least n / (n - 1) strips wide for n copies (two copies: twice the strip), and the copies grow to fill it, so
+       each is at least 1 / (n - 1) of the strip and the n - 1 copies in view always cover it: the loop never runs out
+       of content before it wraps */
+    :where(.ma-marquee__track) {
+      display: flex;
+      width: max-content;
+      min-inline-size: calc(100% * var(--ma-marquee-copies, 2) / (var(--ma-marquee-copies, 2) - 1));
+      animation: ma-marquee var(--ma-marquee-duration, 28s) linear infinite;
+    }
+    :where(.ma-marquee[data-vertical] .ma-marquee__track) {
+      flex-direction: column;
+      width: auto;
+      height: max-content;
+      min-inline-size: auto;
+      /* a percentage of a definite height only: a strip with no height set has nothing to fill */
+      min-block-size: calc(100% * var(--ma-marquee-copies, 2) / (var(--ma-marquee-copies, 2) - 1));
+      animation-name: ma-marquee-vertical;
+    }
+    :where(.ma-marquee[data-reverse] .ma-marquee__track) {
+      animation-direction: reverse;
+    }
+    /* right to left the track sits at the strip's right edge and the copies lie to the left of the first, so the loop
+       starts one copy to the right and comes back to rest (--ma-marquee-rtl in the keyframes); left and right stay
+       physical. [dir] and not :dir(): :dir() reached Chrome in 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-marquee, .ma-marquee[dir='rtl']) {
+      --ma-marquee-rtl: 1;
+    }
+    :where([dir='rtl'] [dir='ltr'] .ma-marquee, [dir='rtl'] .ma-marquee[dir='ltr']) {
+      --ma-marquee-rtl: 0;
+    }
+    /* space-around: a stretched copy spreads its items, and the half spaces at its two ends add up to one full space
+       across the seam, so the rhythm is even all the way round */
+    :where(.ma-marquee__group) {
+      display: flex;
+      flex: 1 0 auto;
+      align-items: center;
+      justify-content: space-around;
+      gap: var(--ma-marquee-gap, 2rem);
+      padding-inline-end: var(--ma-marquee-gap, 2rem);
+    }
+    :where(.ma-marquee[data-vertical] .ma-marquee__group) {
+      flex-direction: column;
+      padding-inline-end: 0;
+      padding-block-end: var(--ma-marquee-gap, 2rem);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      :where(.ma-marquee[data-pause]:hover .ma-marquee__track) {
+        animation-play-state: paused;
+      }
+    }
+    /* focus pauses whatever pauseOnHover says: it is the keyboard's only way to stop the strip */
+    :where(.ma-marquee:focus-within .ma-marquee__track) {
+      animation-play-state: paused;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-marquee__track) {
+        animation: none;
+        min-inline-size: auto;
+        min-block-size: auto;
+      }
+      :where(.ma-marquee) {
+        overflow: auto;
+        mask-image: none;
+      }
+      :where(.ma-marquee__group[aria-hidden]) {
+        display: none;
+      }
+    }
+  }
+
+  /* one copy to the left: from rest, or right to left from one copy to the right back to rest */
+  @keyframes ma-marquee {
+    from {
+      translate: calc(var(--ma-marquee-rtl, 0) * 100% / var(--ma-marquee-copies, 2)) 0;
+    }
+    to {
+      translate: calc((var(--ma-marquee-rtl, 0) - 1) * 100% / var(--ma-marquee-copies, 2)) 0;
+    }
+  }
+  @keyframes ma-marquee-vertical {
+    to {
+      translate: 0 calc(-100% / var(--ma-marquee-copies, 2));
+    }
+  }
+</style>

package/src/components/Marquee.meta.ts

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Marquee',
+  slug: 'marquee',
+  title: 'Marquee',
+  description:
+    'Infinite scrolling strip for logos, quotes or tags in any direction. The content is rendered twice (or repeat times) and the track moves by exactly one copy, so there is never a seam; a copy narrower than the strip stretches to fill it, so a short list never leaves a blank band. Pauses on hover; becomes a static scrollable strip under reduced motion. Pure CSS.',
+  summary: 'An infinite marquee for logos, quotes or tags in any direction. It pauses on hover and never shows a gap.',
+  category: 'loop',
+  tier: 'A',
+  trigger: ['always', 'hover'],
+  support: { baseline: 'widely', needs: ['mask-image'] },
+  readout: '<Marquee duration={16}>',
+  usage: `<Marquee duration={28} gap="3rem">\n  <img src="/logos/a.svg" alt="A" />\n  <img src="/logos/b.svg" alt="B" />\n</Marquee>`,
+  props: [
+    { name: 'duration', type: 'number', default: '28', description: 'Seconds for one full loop. Scale with content width: roughly 1 s per 60 px keeps logos readable.' },
+    { name: 'direction', type: "'left' | 'right' | 'up' | 'down'", default: "'left'", description: 'Travel direction. Left and right are physical: the same on a right-to-left page. Up and down need a height on the strip (a class or a style), which the copies then fill.' },
+    { name: 'repeat', type: 'number', default: '2', description: 'Copies of the content, at least 2. A copy narrower than the strip is stretched and its items spaced out; more copies keep a short list dense instead.' },
+    { name: 'gap', type: 'string', default: "'2rem'", description: 'Space between items and between the copies.' },
+    { name: 'pauseOnHover', type: 'boolean', default: 'true', description: 'Pause while hovered, on pointer devices only.' },
+    { name: 'fade', type: 'boolean', default: 'true', description: 'Fade the strip edges with a mask.' },
+    { name: 'label', type: 'string', description: 'Accessible name; the strip becomes a named region ("Customers").' },
+  ],
+  reducedMotion: 'The strip stops, the extra copies are hidden, and the container becomes scrollable so nothing is unreachable.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'Linear timing: constant motion must not ease, or the loop point shows as a hitch.',
+    'The track is at least the strip plus one copy\'s share wide (twice the strip with two copies), a percentage of the strip, and the copies grow to fill it with space-around. So the loop never runs out of content, whatever the content\'s width, and nothing is measured; the half spaces at a copy\'s two ends add up to one full space across the seam.',
+    'The copies after the first are aria-hidden and inert, so screen readers hear each item once and Tab never reaches a link twice.',
+    'The strip is a tab stop unless it is aria-hidden: focus pauses it (WCAG 2.2.2 wants a way to stop moving content, and a keyboard cannot hover), and under reduced motion (where it is a scrollable strip) the arrow keys scroll it. label names it as a region.',
+    'Hover-pause is gated on (hover: hover) so touch devices never freeze it on tap.',
+    'contain: layout paint keeps the moving track from invalidating the page around it.',
+  ],
+  related: ['reveal'],
+  intents: ['logo marquee', 'infinite scroll strip', 'logo loop', 'ticker', 'scrolling logos astro'],
+  replaces: ['LogoLoop (React Bits)', 'Marquee (Magic UI)', 'InfiniteMovingCards (Aceternity)', 'react-fast-marquee'],
+} satisfies ComponentMeta;