@moonarc/core 0.1.0

package/src/components/FilterGrid.astro

@@ -0,0 +1,170 @@
+---
+/**
+ * FilterGrid — filter buttons over a grid; the cards that stay slide to
+ * their new places, the ones that go fade out, the ones that return fade
+ * in. The move is a same-document view transition through lib/morph: each
+ * card is a group (view-transition-name: match-element) only for the
+ * duration, so a router swap never sees them; an engine without
+ * match-element cross-fades the grid. The script toggles aria-pressed and
+ * hidden — the geometry is the browser's. Without JavaScript every card
+ * shows and the bar is hidden; under reduced motion the cards change
+ * places at once.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Filter {
+  label: string;
+  value: string;
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  filters: Filter[];
+  /** Label of the "everything" button; false for none. */
+  all?: string | false;
+  /** Several filters at once (any match). */
+  multi?: boolean;
+  /** Mirror the selection in the URL as ?<name>=a,b and read it on load. */
+  sync?: boolean;
+  /** The query parameter for sync. */
+  name?: string;
+  /** Grid columns. */
+  columns?: number;
+  /** Accessible name of the filter group. */
+  label?: string;
+}
+
+const { filters, all = 'All', multi = false, sync = false, name = 'filter', columns = 3, label = 'Filter', class: className, style, ...rest } = Astro.props;
+const inline = [`--ma-fgrid-cols:${columns}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-fgrid', className]} data-ma-fgrid data-multi={multi ? '' : undefined} data-sync={sync ? name : undefined} style={inline} {...rest}>
+  <div class="ma-fgrid__bar" role="group" aria-label={label}>
+    {all !== false && <button type="button" class="ma-fgrid__filter" aria-pressed="true" data-value="">{all}</button>}
+    {filters.map((f) => <button type="button" class="ma-fgrid__filter" aria-pressed="false" data-value={f.value}>{f.label}</button>)}
+  </div>
+  <ul class="ma-fgrid__grid">
+    <slot />
+  </ul>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-fgrid__bar) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+      margin-bottom: 1rem;
+    }
+    /* no script yet (or ever): every card shows, the bar is not offered */
+    :where(.ma-fgrid:not([data-live]) .ma-fgrid__bar) {
+      display: none;
+    }
+    :where(.ma-fgrid__filter) {
+      padding: 0.35em 0.85em;
+      border: 1px solid var(--ma-edge);
+      border-radius: 999px;
+      background: var(--ma-panel);
+      color: inherit;
+      font: inherit;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      cursor: pointer;
+      opacity: 0.8;
+      transition:
+        background-color var(--ma-duration-fast) var(--ma-ease-out),
+        color var(--ma-duration-fast) var(--ma-ease-out),
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        scale var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-fgrid__filter:hover) {
+      opacity: 1;
+    }
+    :where(.ma-fgrid__filter:active) {
+      scale: 0.96;
+    }
+    :where(.ma-fgrid__filter[aria-pressed='true']) {
+      background: var(--ma-ink);
+      border-color: var(--ma-ink);
+      color: var(--ma-panel);
+      opacity: 1;
+    }
+    :where(.ma-fgrid__filter:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-fgrid__grid) {
+      display: grid;
+      grid-template-columns: repeat(var(--ma-fgrid-cols, 3), minmax(0, 1fr));
+      gap: 0.75rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    /* hidden is the filter: a card's own display (a flex card, a utility class) must not bring it back. The UA's [hidden]
+       rule loses to any author display; an important declaration in a layer beats every normal one */
+    :where(.ma-fgrid__grid > [hidden]) {
+      display: none !important;
+    }
+    /* each card is a group only while the filter transition runs — match-element names them, nothing is written by the script */
+    :where(:root[data-ma-vt='filter']) .ma-fgrid__grid > * {
+      view-transition-name: match-element;
+    }
+    :where(:root)[data-ma-vt='filter']::view-transition-group(*) {
+      animation-duration: var(--ma-duration);
+      animation-timing-function: var(--ma-ease);
+    }
+    :where(:root)[data-ma-vt='filter']::view-transition-old(*):only-child,
+    :where(:root)[data-ma-vt='filter']::view-transition-new(*):only-child {
+      animation-duration: var(--ma-duration-fast);
+      animation-timing-function: var(--ma-ease-out);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-fgrid__filter) {
+        transition: none;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount } from '../lib/runtime';
+  import { vt } from '../lib/morph';
+
+  onMount<HTMLElement>('[data-ma-fgrid]', (root, { signal }) => {
+    const btns = [...root.querySelectorAll<HTMLButtonElement>('.ma-fgrid__filter')];
+    const items = [...root.querySelectorAll<HTMLElement>('.ma-fgrid__grid > *')];
+    const key = root.dataset.sync;
+    const press = (b: HTMLElement, on: boolean) => (b.ariaPressed = `${on}`);
+    const on = () => btns.filter((b) => b.ariaPressed == 'true').map((b) => b.dataset.value!).filter(Boolean);
+    const update = () => {
+      const a = on();
+      items.forEach((li) => (li.hidden = !!a.length && !a.some((v) => ` ${li.dataset.tags} `.includes(` ${v} `))));
+      if (key) {
+        const u = new URL(location.href);
+        a.length ? u.searchParams.set(key, a.join(',')) : u.searchParams.delete(key);
+        history.replaceState(history.state, '', u);
+      }
+    };
+    root.addEventListener(
+      'click',
+      (e) => {
+        const b = (e.target as Element).closest<HTMLButtonElement>('.ma-fgrid__filter');
+        if (!b) return;
+        // one at a time, or (multi) toggle and keep "all" pressed exactly when nothing else is
+        if (!b.dataset.value || !('multi' in root.dataset)) btns.forEach((x) => press(x, x === b));
+        else {
+          press(b, b.ariaPressed != 'true');
+          btns.forEach((x) => x.dataset.value || press(x, !on().length));
+        }
+        vt(update, 'filter');
+      },
+      { signal },
+    );
+    const init = key && new URL(location.href).searchParams.get(key);
+    if (init) {
+      btns.forEach((b) => press(b, init.split(',').includes(b.dataset.value!)));
+      update();
+    }
+    root.dataset.live = '';
+  });
+</script>

package/src/components/FilterGrid.meta.ts

@@ -0,0 +1,38 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'FilterGrid',
+  slug: 'filter-grid',
+  title: 'Filter Grid',
+  description: 'Filter buttons over a grid of cards: the cards that stay slide to their new places, the ones that go fade out, the ones that return fade in. The motion is a same-document view transition, so the browser measures and moves them. The script toggles aria-pressed and hidden; each card is a transition group only for the duration through view-transition-name: match-element. Without JavaScript every card shows; under reduced motion they change places at once.',
+  summary: 'Filter buttons over a card grid: the cards that stay slide to their new places while the others fade out.',
+  category: 'ui',
+  tier: 'B',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['view-transitions', 'match-element'], fallback: 'without view transitions the cards change places at once; without match-element the grid cross-fades and no card slides' },
+  readout: '<FilterGrid multi>',
+  usage: `<FilterGrid filters={[{ label: 'Web', value: 'web' }, { label: 'Brand', value: 'brand' }, { label: 'Motion', value: 'motion' }]} sync>\n  <li data-tags="web motion"><a href="/work/one/">…</a></li>\n  <li data-tags="brand"><a href="/work/two/">…</a></li>\n  <li data-tags="web"><a href="/work/three/">…</a></li>\n</FilterGrid>`,
+  props: [
+    { name: 'filters', type: '{ label: string; value: string }[]', description: 'The buttons; a card matches when its data-tags contains the value.' },
+    { name: 'all', type: 'string | false', default: "'All'", description: 'Label of the everything button; false for none.' },
+    { name: 'multi', type: 'boolean', default: 'false', description: 'Several filters at once, any match.' },
+    { name: 'sync', type: 'boolean', default: 'false', description: 'Mirror the selection in the URL (?filter=web,brand) and read it on load.' },
+    { name: 'name', type: 'string', default: "'filter'", description: 'The query parameter for sync.' },
+    { name: 'columns', type: 'number', default: '3', description: 'Grid columns.' },
+    { name: 'label', type: 'string', default: "'Filter'", description: 'Accessible name of the button group.' },
+  ],
+  reducedMotion: 'The cards change places at once; the buttons keep their pressed state.',
+  clientRouter: 'Bound through the shared runtime. The cards carry a view-transition-name only during a filter transition, so a navigation snapshots nothing of them; sync uses replaceState, which the router respects.',
+  craft: [
+    'A view transition does what FLIP libraries do (measure, move, fade) in the compositor and with nothing measured by hand: the script changes hidden, the browser draws the rearrangement.',
+    'Groups exist only during the transition: view-transition-name: match-element under html[data-ma-vt="filter"], so a ClientRouter swap never captures a hundred cards and the script writes no names. The per-card naming fallback for engines without match-element (Chrome 137, Firefox 144, Safari 18.4) was built, cost 170 B raw that the tier did not have, and went: those engines get the cross-fade.',
+    'Cards that leave fade on the fast token (old snapshot only), cards that arrive fade in the same, cards that stay glide on the preset curve. That is three rules and one shared root cross-fade from base.css.',
+    'aria-pressed on real buttons, in a group with a name: the state is the ARIA, and the CSS styles the attribute.',
+    'The filter is the hidden attribute, held by one important declaration in the components layer: the browser\'s own [hidden] rule loses to any author display, so a card styled as a flex box would otherwise stay on screen.',
+    'Without the script the bar is not shown, because its buttons would do nothing.',
+  ],
+  related: ['lightbox', 'hover-video', 'blog-grid'],
+  intents: ['filterable grid', 'filter cards with animation', 'isotope style filter', 'portfolio filter astro', 'animated grid reflow', 'tag filter gallery'],
+  replaces: ['Isotope', 'LayoutGroup grid (Framer Motion)', 'FilterableGrid (Motion Primitives)', 'MixItUp'],
+  fixture: { props: { filters: [{ label: 'One', value: 'one' }, { label: 'Two', value: 'two' }] }, slot: '<li data-tags="one">Fixture content for FilterGrid</li><li data-tags="two">Two</li>', expect: 'Fixture content for FilterGrid' },
+} satisfies ComponentMeta;

package/src/components/FooterReveal.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * FooterReveal — the page content slides up and the footer is already
+ * there underneath. No timeline, no script: the footer is position: sticky
+ * at the bottom of the scrollport with a fixed height, and the content in
+ * front carries a higher z-index and its own background, so the only motion
+ * is the scroll itself. On a page shorter than the viewport the footer is
+ * simply below the content. Reduced motion changes nothing — there is no
+ * animation to remove.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Footer height, any CSS length. */
+  height?: string;
+  /** Background of the content in front — must be opaque. */
+  background?: string;
+}
+
+const { height = '20rem', background = 'Canvas', class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-fr-h:${height}`, `--ma-fr-bg:${background}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-fr', className]} style={vars} {...rest}>
+  <div class="ma-fr__content"><slot /></div>
+  <footer class="ma-fr__footer"><slot name="footer" /></footer>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-fr) {
+      position: relative;
+    }
+    :where(.ma-fr__content) {
+      position: relative;
+      z-index: 1;
+      background: var(--ma-fr-bg, Canvas);
+    }
+    :where(.ma-fr__footer) {
+      position: sticky;
+      bottom: 0;
+      z-index: 0;
+      height: var(--ma-fr-h, 20rem);
+      display: grid;
+      align-content: end;
+    }
+    /* there is no motion to reduce; the rule exists so the audit sees the branch was considered */
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-fr__footer) {
+        position: sticky;
+      }
+    }
+  }
+</style>

package/src/components/FooterReveal.meta.ts

@@ -0,0 +1,31 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'FooterReveal',
+  slug: 'footer-reveal',
+  title: 'Footer Reveal',
+  description: 'The page content slides up to reveal a footer that is already in place underneath. No timeline and no script: the footer is position: sticky at the bottom of the scrollport with a fixed height, and the content in front carries a higher z-index and its own background, so the only motion is the scroll itself. On a page shorter than the viewport the footer simply sits below the content.',
+  summary: 'A footer reveal: at the bottom of the page the content slides up to uncover a footer already in place underneath.',
+  category: 'scroll',
+  tier: 'A',
+  trigger: ['scroll'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<FooterReveal height="20rem">',
+  usage: `<FooterReveal height="22rem" background="var(--bg)">\n  <main>…</main>\n  <div slot="footer" class="p-10">\n    <p class="text-6xl font-bold">Moonarc</p>\n  </div>\n</FooterReveal>`,
+  props: [
+    { name: 'height', type: 'string', default: "'20rem'", description: 'Footer height, any CSS length.' },
+    { name: 'background', type: 'string', default: "'Canvas'", description: 'Background of the content in front. It must be opaque, or the footer shows through.' },
+  ],
+  reducedMotion: 'Nothing changes: there is no animation, only the scroll, which the reader controls.',
+  clientRouter: 'Static layout; nothing to rebind. Verified across swaps and on pages shorter than the viewport.',
+  craft: [
+    'Sticky, not fixed: a fixed footer needs a spacer and breaks in any scroll container; a sticky one needs a height and works inside anything that scrolls.',
+    'The content is z-index 1 with a background; the footer is z-index 0 beneath. The reveal comes from the content ending while the footer stays put, so there is nothing to animate and nothing to reduce.',
+    'The footer\'s content is aligned to its bottom, so the top edge of the design is what is uncovered first.',
+    'On a short page sticky never engages: the footer is below the content and the layout is the ordinary one.',
+  ],
+  related: ['card-stack', 'parallax', 'scroll-progress'],
+  intents: ['footer reveal on scroll', 'sticky footer reveal', 'footer behind content', 'parallax footer', 'content slides over footer'],
+  replaces: ['FooterReveal (Motion Primitives)', 'sticky footer reveal (Codrops)', 'reveal footer (Osmo)'],
+  fixture: { slot: 'Fixture content for FooterReveal', expect: 'Fixture content for FooterReveal' },
+} satisfies ComponentMeta;

package/src/components/GlitchText.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * GlitchText — an RGB split and a few jumping slices, every few seconds.
+ * The text is painted once; two pseudo-element copies (content: attr) in
+ * two colours are clipped to horizontal slices and offset by the hover
+ * travel token, on step-end keyframes so nothing tweens — a glitch that
+ * eases is a wobble. The burst is the last tenth of the period; the rest
+ * of the time the text is clean. Zero JS. Reduced motion: still.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** The text. */
+  text: string;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Seconds between bursts. */
+  period?: number;
+  /** Horizontal offset of the split in px. Unset: the preset's --ma-travel-hover. */
+  shift?: number;
+  /** Skew of the base text during the burst, degrees. */
+  skew?: number;
+  /** Colours of the two copies. */
+  colorA?: string;
+  colorB?: string;
+}
+
+const { text, as: Tag = 'span', period = 4, shift, skew = 3, colorA = 'oklch(0.65 0.22 25)', colorB = 'oklch(0.72 0.14 210)', class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-glitch-period:${period}s`, shift !== undefined && `--ma-glitch-shift:${shift}px`, `--ma-glitch-skew:${skew}deg`, `--ma-glitch-a:${colorA}`, `--ma-glitch-b:${colorB}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Tag class:list={['ma-glitch', className]} data-text={text} style={vars} {...rest}>{text}</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-glitch) {
+      position: relative;
+      display: inline-block;
+      animation: ma-glitch-root var(--ma-glitch-period, var(--ma-dur-ambient)) step-end infinite;
+    }
+    :where(.ma-glitch)::before,
+    :where(.ma-glitch)::after {
+      /* paint only: an empty alternative after the slash keeps the two copies out of the element's accessible name, which
+         read the text three times. The first line is for engines without that syntax. */
+      content: attr(data-text);
+      content: attr(data-text) / '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      clip-path: inset(100% 0 0 0);
+      animation: ma-glitch-a var(--ma-glitch-period, var(--ma-dur-ambient)) step-end infinite;
+    }
+    :where(.ma-glitch)::before {
+      color: var(--ma-glitch-a);
+    }
+    :where(.ma-glitch)::after {
+      color: var(--ma-glitch-b);
+      animation-name: ma-glitch-b;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-glitch) {
+        animation: none;
+      }
+      :where(.ma-glitch)::before,
+      :where(.ma-glitch)::after {
+        content: none;
+        animation: none;
+      }
+    }
+  }
+
+  /* the burst is the last tenth of the period; step-end so every frame is a jump */
+  @keyframes ma-glitch-a {
+    0%,
+    89% {
+      clip-path: inset(100% 0 0 0);
+      translate: 0 0;
+    }
+    90% {
+      clip-path: inset(8% 0 62% 0);
+      translate: var(--ma-glitch-shift, var(--ma-travel-hover)) 0;
+    }
+    92% {
+      clip-path: inset(52% 0 18% 0);
+      translate: calc(-1 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
+    }
+    94% {
+      clip-path: inset(24% 0 44% 0);
+      translate: var(--ma-glitch-shift, var(--ma-travel-hover)) 0;
+    }
+    96% {
+      clip-path: inset(70% 0 6% 0);
+      translate: calc(-0.5 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
+    }
+    98%,
+    100% {
+      clip-path: inset(100% 0 0 0);
+      translate: 0 0;
+    }
+  }
+  @keyframes ma-glitch-b {
+    0%,
+    89% {
+      clip-path: inset(100% 0 0 0);
+      translate: 0 0;
+    }
+    90% {
+      clip-path: inset(60% 0 10% 0);
+      translate: calc(-1 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
+    }
+    92% {
+      clip-path: inset(14% 0 66% 0);
+      translate: var(--ma-glitch-shift, var(--ma-travel-hover)) 0;
+    }
+    94% {
+      clip-path: inset(40% 0 30% 0);
+      translate: calc(-1 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
+    }
+    96% {
+      clip-path: inset(2% 0 82% 0);
+      translate: calc(0.5 * var(--ma-glitch-shift, var(--ma-travel-hover))) 0;
+    }
+    98%,
+    100% {
+      clip-path: inset(100% 0 0 0);
+      translate: 0 0;
+    }
+  }
+  @keyframes ma-glitch-root {
+    0%,
+    89% {
+      transform: none;
+    }
+    91% {
+      transform: skewX(calc(-1 * var(--ma-glitch-skew, 3deg)));
+    }
+    93% {
+      transform: skewX(var(--ma-glitch-skew, 3deg));
+    }
+    95%,
+    100% {
+      transform: none;
+    }
+  }
+</style>

package/src/components/GlitchText.meta.ts

@@ -0,0 +1,39 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'GlitchText',
+  slug: 'glitch-text',
+  title: 'Glitch Text',
+  description:
+    'Splits text into two coloured copies and jumps a few slices sideways for a fraction of a second, every few seconds; the rest of the time the text is clean. Two pseudo-element copies clipped to slices on step-end keyframes, so nothing tweens. Pure CSS, and completely still under reduced motion.',
+  summary: 'A glitch text effect: two coloured copies and a few slices jump sideways for a moment every few seconds.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['always'],
+  support: { baseline: 'widely', needs: ['clip-path'] },
+  readout: '<GlitchText period={4}>',
+  usage: `<h1><GlitchText text="Signal lost." /></h1>\n<GlitchText text="404" period={2.5} shift={6} colorA="var(--ma-ink)" colorB="oklch(0.8 0.15 152)" />`,
+  props: [
+    { name: 'text', type: 'string', description: 'The text; repeated by two pseudo-elements, so it must be a plain string.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'period', type: 'number', default: '4', description: 'Seconds between bursts. The burst itself is the last tenth of the period.' },
+    { name: 'shift', type: 'number', default: 'preset (ui: 4)', description: 'Horizontal offset of the slices in px. Unset, the preset\'s --ma-travel-hover.' },
+    { name: 'skew', type: 'number', default: '3', description: 'Skew of the base text during the burst, in degrees. 0 keeps the base text still.' },
+    { name: 'colorA', type: 'string', default: "'oklch(0.65 0.22 25)'", description: 'Colour of the first copy.' },
+    { name: 'colorB', type: 'string', default: "'oklch(0.72 0.14 210)'", description: 'Colour of the second copy.' },
+  ],
+  reducedMotion: 'No burst at all: the copies are removed and the text stands still. A slower glitch would still be a glitch.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'step-end everywhere: a glitch is a sequence of wrong frames. The moment any of it interpolates it reads as a wobble.',
+    'The burst is a tenth of the period: 400 ms of noise every 4 s. Continuous glitching reads as a loading state; a rare one reads as texture.',
+    'The base text is real text in its own colour and never moves in layout; the skew is a transform, so the line around it is untouched.',
+    'The slice offset defaults to the preset\'s hover travel: 2 px on snap, 6 px on lively, so the glitch keeps the page\'s scale.',
+    'Two copies clipped to different slice sequences: the eye reads a split, not a flicker.',
+    'Generated content is part of an element\'s accessible name, so each copy declares an empty alternative (content: attr(data-text) / \'\') and a screen reader reads the text once.',
+  ],
+  related: ['text-scramble', 'shiny-text', 'noise'],
+  intents: ['glitch text', 'rgb split text', 'glitch effect css', 'cyberpunk text animation', 'distorted text effect'],
+  replaces: ['GlitchText (React Bits)', 'glitch text (Kokonut, Animata)'],
+  fixture: { props: { text: 'Fixture content for GlitchText' }, expect: 'Fixture content for GlitchText' },
+} satisfies ComponentMeta;