@moonarc/core 0.1.0

package/src/components/HighlightMarker.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * HighlightMarker — a highlighter sweeps across phrases, one after another,
+ * when the text scrolls into view. Phrases are marked **like this** in the
+ * prop and rendered as <mark> elements whose background-size grows from 0
+ * to 100% on a per-phrase delay; box-decoration-break keeps the sweep on
+ * wrapped lines. Composes Reveal; zero script of its own. The server HTML
+ * is the plain sentence with the marks already in place.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+import Reveal from './Reveal.astro';
+
+interface Props extends HTMLAttributes<'p'> {
+  /** The sentence; wrap phrases to highlight in double asterisks. */
+  text: string;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Highlight colour; a translucent colour keeps the text legible. */
+  color?: string;
+  /** Sweep duration per phrase in ms. Unset: the preset's --ma-duration. */
+  duration?: number;
+  /** Delay in ms before the first sweep. */
+  delay?: number;
+  /** Play once and stay. */
+  once?: boolean;
+  /** Fraction visible to trigger. */
+  threshold?: number;
+}
+
+const { text, as = 'p', color = 'color-mix(in oklch, currentColor 22%, transparent)', duration, delay, once, threshold, class: className, style, ...rest } = Astro.props;
+const parts = text.split(/\*\*([^*]+)\*\*/);
+let mark = 0;
+const vars = [`--ma-marker-color:${color}`, duration !== undefined && `--ma-marker-dur:${duration}ms`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Reveal as={as} from="none" delay={delay} once={once} threshold={threshold} class={['ma-marker', className].filter(Boolean).join(' ')} style={vars} {...rest}>
+  {parts.map((part, i) => (i % 2 ? <mark class="ma-marker__mark" style={`--ma-marker-i:${mark++}`}>{part}</mark> : part))}
+</Reveal>
+
+<style is:global>
+  @layer components {
+    :where(.ma-marker__mark) {
+      color: inherit;
+      background-color: transparent;
+      background-image: linear-gradient(var(--ma-marker-color), var(--ma-marker-color));
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      background-size: 100% 100%;
+      padding: 0.08em 0.18em;
+      margin-inline: -0.18em;
+      border-radius: 0.25em;
+      -webkit-box-decoration-break: clone;
+      box-decoration-break: clone;
+      /* each phrase waits for the one before it; the delay is the one Reveal writes on this root, so the sweep keeps
+         step with the sentence's fade */
+      transition: background-size var(--ma-marker-dur, var(--ma-duration)) var(--ma-ease-out) calc(var(--ma-r-delay, 0ms) + var(--ma-marker-i, 0) * var(--ma-marker-dur, var(--ma-duration)));
+    }
+    :where([data-ma-js] .ma-marker:not(.ma-in) .ma-marker__mark) {
+      background-size: 0% 100%;
+      transition: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-marker__mark) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/HighlightMarker.meta.ts

@@ -0,0 +1,37 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'HighlightMarker',
+  slug: 'highlight-marker',
+  title: 'Highlight Marker',
+  description:
+    'A highlighter sweeps across the phrases you marked, one after another, when the sentence scrolls into view. Each phrase is a real <mark> whose background grows from the left; wrapped lines are painted as separate strokes. Composes Reveal; no script of its own.',
+  summary: 'A highlighter that sweeps across the phrases you marked, one after another, as the sentence scrolls into view.',
+  category: 'text',
+  tier: 'A',
+  trigger: ['scroll'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<HighlightMarker text="…**two phrases**…">',
+  usage: `<HighlightMarker text="Every cost here is **measured from a real build** and printed **beside the component**." />\n<HighlightMarker as="h2" text="**Zero bytes** of JavaScript." color="color-mix(in oklch, var(--ma-shine) 60%, transparent)" duration={600} />`,
+  props: [
+    { name: 'text', type: 'string', description: 'The sentence. Wrap each phrase to highlight in double asterisks; they sweep in order.' },
+    { name: 'as', type: 'HTMLTag', default: "'p'", description: 'Element to render.' },
+    { name: 'color', type: 'string', default: 'currentColor at 22%', description: 'Highlight colour. Keep it translucent so the text stays legible in both themes.' },
+    { name: 'duration', type: 'number', default: 'preset (ui: 450)', description: 'Sweep duration per phrase in ms; the next phrase starts when the previous lands.' },
+    { name: 'delay', type: 'number', default: '0', description: 'Delay before the first sweep.' },
+    { name: 'once', type: 'boolean', default: 'true', description: 'Play once and stay.' },
+    { name: 'threshold', type: 'number', default: '0.2', description: 'Fraction visible to trigger.' },
+  ],
+  reducedMotion: 'The phrases are highlighted at once.',
+  clientRouter: 'Inherits Reveal: rebinds after every navigation.',
+  craft: [
+    'background-size on a solid gradient, not a pseudo-element: the sweep follows the text\'s own line boxes, and box-decoration-break: clone gives every wrapped line its own stroke start.',
+    'Sequential: phrase n starts when phrase n − 1 lands, because a highlighter is one hand.',
+    'Ease-out: a marker moves fast and stops without accelerating into the last word.',
+    '<mark> is the semantic element for a highlight, so the emphasis is in the accessibility tree and the HTML is readable without any CSS.',
+  ],
+  related: ['split-text', 'underline-hover', 'shiny-text'],
+  intents: ['highlight text on scroll', 'marker highlight animation', 'highlighter sweep text', 'animated text highlight', 'mark animation css'],
+  replaces: ['Highlighter (Magic UI)', 'Highlight (Aceternity hero highlight)'],
+  fixture: { props: { text: 'Fixture content for **HighlightMarker**' }, expect: 'Fixture content for <mark' },
+} satisfies ComponentMeta;

package/src/components/HorizontalScroll.astro

@@ -0,0 +1,112 @@
+---
+/**
+ * HorizontalScroll — a strip that moves sideways as the page scrolls down.
+ *
+ * The section is tall; inside it a sticky viewport holds a max-content
+ * track whose translate is bound to the section's view timeline, so the
+ * track crosses exactly while the section is pinned. Zero JS. Browsers
+ * without scroll timelines get a normal horizontally scrollable strip — a tab
+ * stop, so the arrow keys scroll it (reduced motion gets the same strip).
+ * Keyboard focus inside the pinned strip turns it into that strip for as long
+ * as it stays, so a focused item is scrolled into view by the browser.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'section'> {
+  /** Scroll distance as viewport heights: how long the strip stays pinned. */
+  length?: number;
+  /** Gap between items, any CSS length. */
+  gap?: string;
+  /** Height of the pinned viewport; 100vh for the page, or the height of an enclosing scroller. */
+  viewport?: string;
+  /** Accessible name of the strip, which is a tab stop: say what it holds ("Case studies"). */
+  label?: string;
+}
+
+const { length = 3, gap = '2rem', viewport = '100vh', label = 'Horizontal strip', class: className, style, ...rest } = Astro.props;
+const vars = [`--ma-hs-len:${length}`, `--ma-hs-gap:${gap}`, `--ma-hs-vp:${viewport}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<section class:list={['ma-hscroll', className]} style={vars} {...rest}>
+  <div class="ma-hscroll__viewport" tabindex="0" role="region" aria-label={label}>
+    <div class="ma-hscroll__track">
+      <slot />
+    </div>
+  </div>
+</section>
+
+<style is:global>
+  @layer components {
+    :where(.ma-hscroll__viewport) {
+      overflow-x: auto;
+      container-type: inline-size;
+    }
+    :where(.ma-hscroll__track) {
+      display: flex;
+      align-items: center;
+      gap: var(--ma-hs-gap, 2rem);
+      width: max-content;
+      height: 100%;
+    }
+    @supports (animation-timeline: view()) {
+      :where(.ma-hscroll) {
+        height: calc(var(--ma-hs-vp, 100vh) * var(--ma-hs-len, 3));
+        view-timeline-name: --ma-hs;
+      }
+      /* clip, not hidden: a hidden box is still a scroll container, so a focused item scrolled it sideways and the offset
+         stayed on top of the translate after focus left */
+      :where(.ma-hscroll__viewport) {
+        position: sticky;
+        top: 0;
+        height: var(--ma-hs-vp, 100vh);
+        overflow: clip;
+      }
+      :where(.ma-hscroll__track) {
+        will-change: translate;
+        animation: ma-hscroll linear both;
+        animation-range: contain 0% contain 100%;
+      }
+      :where(html) :where(.ma-hscroll__track) {
+        animation-timeline: --ma-hs;
+      }
+      /* right to left the track starts at the right edge, so it travels right: the same distance, mirrored. [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-hscroll, .ma-hscroll[dir='rtl']) {
+        --ma-hs-dir: -1;
+      }
+      :where([dir='rtl'] [dir='ltr'] .ma-hscroll, [dir='rtl'] .ma-hscroll[dir='ltr']) {
+        --ma-hs-dir: 1;
+      }
+      /* keyboard focus in the strip (the strip itself, or an item) makes it the scrollable strip until focus leaves: the
+         browser scrolls the focused item into view, and the offset goes when clip comes back. A click on a link or a
+         button does not (a text field matches :focus-visible however it is focused) */
+      :where(.ma-hscroll__viewport:is(:focus-visible, :has(:focus-visible))) {
+        overflow-x: auto;
+      }
+      :where(.ma-hscroll__viewport:is(:focus-visible, :has(:focus-visible)) .ma-hscroll__track) {
+        animation: none;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-hscroll) {
+        height: auto;
+      }
+      :where(.ma-hscroll__viewport) {
+        position: static;
+        height: auto;
+        overflow-x: auto;
+      }
+      :where(.ma-hscroll__track) {
+        animation: none;
+      }
+    }
+  }
+
+  /* min(): a track narrower than the viewport stays put instead of travelling the wrong way */
+  @keyframes ma-hscroll {
+    to {
+      translate: calc(var(--ma-hs-dir, 1) * min(0px, 100cqw - 100%)) 0;
+    }
+  }
+</style>

package/src/components/HorizontalScroll.meta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'HorizontalScroll',
+  slug: 'horizontal-scroll',
+  title: 'Horizontal Scroll',
+  description: 'A strip of items slides sideways while the page scrolls down and the section stays pinned. Zero JavaScript: a sticky viewport and a translate bound to the section\'s view timeline. Where scroll timelines are missing it is a normal horizontally scrollable strip.',
+  summary: 'A horizontal scroll section: the strip slides sideways while the page scrolls down and the section stays pinned.',
+  category: 'scroll',
+  tier: 'A',
+  trigger: ['scroll'],
+  support: { baseline: 'limited', needs: ['scroll-timeline'], fallback: 'a horizontally scrollable strip without pinning (Firefox)' },
+  readout: '<HorizontalScroll length={3}>',
+  usage: `<HorizontalScroll length={3} gap="2rem" label="Case studies">\n  <article class="w-[70vw]">One</article>\n  <article class="w-[70vw]">Two</article>\n  <article class="w-[70vw]">Three</article>\n</HorizontalScroll>`,
+  props: [
+    { name: 'length', type: 'number', default: '3', description: 'How many viewport heights the section stays pinned for. Roughly one per item.' },
+    { name: 'gap', type: 'string', default: "'2rem'", description: 'Gap between items.' },
+    { name: 'viewport', type: 'string', default: "'100vh'", description: 'Height of the pinned viewport: the page, or an enclosing scroller\'s height.' },
+    { name: 'label', type: 'string', default: "'Horizontal strip'", description: 'Accessible name of the strip, which is a tab stop and a region. Say what it holds ("Case studies").' },
+  ],
+  reducedMotion: 'Not pinned; the strip scrolls horizontally by hand.',
+  clientRouter: 'CSS-only; nothing to rebind.',
+  craft: [
+    'Where it falls back to a scrollable strip (no scroll timelines, or reduced motion) the viewport is a tab stop, so the strip scrolls from the keyboard too.',
+    'Pinned, the viewport clips (overflow: clip, not hidden, so it is not a scroll container), and keyboard focus inside it turns it into the scrollable strip until focus leaves: the browser scrolls a focused item into view, and nothing stays scrolled on top of the translate afterwards. A click on a link or a button changes nothing; a text field shows focus however it gets it, so clicking one does.',
+    'The travel is min(0px, 100cqw - 100%): the track\'s own width minus the sticky viewport\'s, measured by the browser through a container query unit, with nothing computed in script; a track narrower than the viewport stays put. Right to left (a dir="rtl" on the page or an ancestor) the same distance is mirrored, because the track starts at the right edge.',
+    'animation-range contain 0% → 100%: the strip moves only while the section fully covers the viewport, so it never starts before it is pinned.',
+    'The section\'s height is the scroll budget; length ≈ item count keeps the sideways speed close to the scroll speed.',
+  ],
+  related: ['card-stack', 'parallax', 'marquee'],
+  intents: ['horizontal scroll section', 'scroll sideways on vertical scroll', 'pinned horizontal scroll', 'horizontal scrolling gallery astro'],
+  replaces: ['GSAP ScrollTrigger pin + horizontal tween', 'Locomotive horizontal sections'],
+  fixture: { slot: '<div>Fixture content for HorizontalScroll</div><div>Two</div>', expect: 'Fixture content for HorizontalScroll' },
+} satisfies ComponentMeta;

package/src/components/HoverImageLinks.astro

@@ -0,0 +1,219 @@
+---
+/**
+ * HoverImageLinks — a list of project links; hovering one floats its image
+ * beside the pointer, leaning the way the pointer moves. One floating box
+ * per list, not per item: every image is server-rendered in it, lazy, and
+ * the hovered item picks which one shows through one number. The pointer
+ * writes two lengths and a lean; CSS gives the follow its lag on the fast
+ * token and the exit curve (the Cursor pattern), and :has() shows the box
+ * while a link is hovered. Keyboard focus shows the image at a fixed spot
+ * on the right; so does reduced motion; touch gets the list.
+ */
+import type { HTMLAttributes } from 'astro/types';
+
+interface Item {
+  href: string;
+  title: string;
+  image: string;
+  /** A mono line beside the title (year, category). */
+  meta?: string;
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  items: Item[];
+  /** Width of the floating image in px. */
+  size?: number;
+  /** Maximum lean in degrees. */
+  tilt?: number;
+  /** Accessible name of the list. */
+  label?: string;
+}
+
+const { items, size = 220, tilt = 6, label = 'Projects', class: className, style, ...rest } = Astro.props;
+const list = items.slice(0, 12);
+const inline = [`--ma-hil-size:${size}px`, `--ma-hil-tilt:${tilt}deg`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<div class:list={['ma-hil', className]} data-ma-hil style={inline} {...rest}>
+  <ul class="ma-hil__list" aria-label={label}>
+    {
+      list.map((it, i) => (
+        <li class="ma-hil__item">
+          <a href={it.href} class="ma-hil__link" data-i={i}>
+            <span class="ma-hil__title">{it.title}</span>
+            {it.meta && <span class="ma-hil__meta">{it.meta}</span>}
+            <svg class="ma-hil__arrow" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M3 13L13 3M6 3h7v7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+  <span class="ma-hil__float" aria-hidden="true">
+    {list.map((it, i) => <img src={it.image} alt="" loading="lazy" decoding="async" draggable="false" style={`--ma-hil-i:${i}`} />)}
+  </span>
+</div>
+
+<style is:global>
+  @layer components {
+    :where(.ma-hil) {
+      position: relative;
+    }
+    :where(.ma-hil__list) {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    :where(.ma-hil__item) {
+      border-top: 1px solid var(--ma-edge);
+    }
+    :where(.ma-hil__item:last-child) {
+      border-bottom: 1px solid var(--ma-edge);
+    }
+    :where(.ma-hil__link) {
+      display: flex;
+      align-items: baseline;
+      gap: 1rem;
+      padding: 1.1rem 0;
+      color: inherit;
+      text-decoration: none;
+      transition:
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        translate var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-hil__link:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 4px;
+      border-radius: 2px;
+    }
+    :where(.ma-hil__title) {
+      flex: 1;
+      font-size: clamp(1.5rem, 3vw, 2.25rem);
+      font-weight: 600;
+      letter-spacing: -0.025em;
+      line-height: 1.1;
+    }
+    :where(.ma-hil__meta) {
+      font-family: ui-monospace, monospace;
+      font-size: 0.6875rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      opacity: var(--ma-dim, 0.7);
+      white-space: nowrap;
+    }
+    :where(.ma-hil__arrow) {
+      flex: none;
+      align-self: center;
+      opacity: 0.4;
+      transition:
+        translate var(--ma-duration) var(--ma-ease),
+        opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    /* the hovered link steps forward, the rest step back, the arrow points on */
+    :where(.ma-hil__list:has(.ma-hil__link:hover) .ma-hil__link:not(:hover)) {
+      opacity: 0.4;
+    }
+    :where(.ma-hil__link:is(:hover, :focus-visible)) {
+      translate: 0.5rem 0;
+    }
+    :where(.ma-hil__link:is(:hover, :focus-visible) .ma-hil__arrow) {
+      opacity: 1;
+      translate: 0.25rem -0.25rem;
+    }
+    /* the float: one box, every image stacked in it; the pointer's lengths place it, the lag is CSS */
+    :where(.ma-hil__float) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: var(--ma-hil-size, 220px);
+      aspect-ratio: 4 / 3;
+      border-radius: 0.75rem;
+      overflow: clip;
+      background: var(--ma-edge);
+      box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.5);
+      pointer-events: none;
+      opacity: 0;
+      scale: 0.8;
+      translate: calc(var(--ma-hil-x, 0px) - 50%) calc(var(--ma-hil-y, 0px) - 50%);
+      rotate: calc(var(--ma-hil-r, 0) * var(--ma-hil-tilt, 6deg));
+      transition:
+        translate var(--ma-duration-fast) var(--ma-ease-out),
+        rotate var(--ma-duration) var(--ma-ease),
+        opacity var(--ma-duration-fast) var(--ma-ease-out),
+        scale var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-hil:has(.ma-hil__link:is(:hover, :focus-visible)) .ma-hil__float) {
+      opacity: 1;
+      scale: 1;
+    }
+    :where(.ma-hil__float img) {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      /* 1 for the active index, 0 for every other — a square instead of abs() */
+      opacity: clamp(0, 1 - (var(--ma-hil-i, 0) - var(--ma-hil-active, 0)) * (var(--ma-hil-i, 0) - var(--ma-hil-active, 0)), 1);
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    /* keyboard: the image at a fixed spot on the right, no following */
+    :where(.ma-hil:has(.ma-hil__link:focus-visible) .ma-hil__float) {
+      top: 50%;
+      left: auto;
+      right: 0;
+      translate: 0 -50%;
+      rotate: 0deg;
+    }
+    @media (hover: none), (pointer: coarse) {
+      :where(.ma-hil__float) {
+        display: none;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-hil:has(.ma-hil__link:is(:hover, :focus-visible)) .ma-hil__float) {
+        top: 50%;
+        left: auto;
+        right: 0;
+        translate: 0 -50%;
+        rotate: 0deg;
+        scale: 1;
+      }
+      :where(.ma-hil__float),
+      :where(.ma-hil__link),
+      :where(.ma-hil__arrow) {
+        transition: none;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount } from '../lib/runtime';
+
+  onMount<HTMLElement>('[data-ma-hil]', (el, { signal }) => {
+    const set = (n: string, v: string) => el.style.setProperty(n, v);
+    // which image: the hovered or focused link's index
+    const pick = (e: Event) => {
+      const a = (e.target as Element).closest<HTMLElement>('.ma-hil__link');
+      if (a) set('--ma-hil-active', a.dataset.i!);
+    };
+    el.addEventListener('pointerover', pick, { signal });
+    el.addEventListener('focusin', pick, { signal });
+    // bound under reduced motion too: the reduced CSS pins the box to a fixed spot while a link is hovered, so these writes
+    // are unseen then, and the follow is already running when the page's switch turns motion back on
+    if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
+    let lx = 0;
+    el.addEventListener(
+      'pointermove',
+      (e) => {
+        const r = el.getBoundingClientRect();
+        set('--ma-hil-x', `${e.clientX - r.left}px`);
+        set('--ma-hil-y', `${e.clientY - r.top}px`);
+        // the lean is the direction of travel; the curve and the angle are CSS
+        set('--ma-hil-r', String(Math.sign(e.clientX - lx)));
+        lx = e.clientX;
+      },
+      { signal, passive: true },
+    );
+  });
+</script>

package/src/components/HoverImageLinks.meta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'HoverImageLinks',
+  slug: 'hover-image-links',
+  title: 'Hover Image Links',
+  description: 'A list of project links: hovering one floats its image beside the pointer, leaning the way the pointer moves, while the other links step back. One floating box per list with every image server-rendered in it; the script writes two lengths, a lean and an index, and CSS gives the follow its lag on the fast token. Keyboard focus and reduced motion show the image at a fixed spot; touch gets the list.',
+  summary: 'A list of links where hovering one floats its image beside the pointer, leaning with the movement.',
+  category: 'pointer',
+  tier: 'B',
+  trigger: ['pointer', 'hover'],
+  support: { baseline: 'widely', needs: ['has'], fallback: 'without :has() the box stays hidden' },
+  readout: '<HoverImageLinks size={220}>',
+  usage: `<HoverImageLinks\n  items={[\n    { href: '/work/atlas/', title: 'Atlas', meta: 'Identity · 2025', image: '/work/atlas.jpg' },\n    { href: '/work/lumen/', title: 'Lumen', meta: 'Web · 2025', image: '/work/lumen.jpg' },\n    { href: '/work/field/', title: 'Field notes', meta: 'Editorial · 2024', image: '/work/field.jpg' },\n  ]}\n/>`,
+  props: [
+    { name: 'items', type: '{ href: string; title: string; image: string; meta?: string }[]', description: 'Up to twelve links, each with the image it floats.' },
+    { name: 'size', type: 'number', default: '220', description: 'Width of the floating image in px (4:3).' },
+    { name: 'tilt', type: 'number', default: '6', description: 'Maximum lean in degrees, in the direction the pointer moves.' },
+    { name: 'label', type: 'string', default: "'Projects'", description: 'Accessible name of the list.' },
+  ],
+  reducedMotion: 'The image appears at a fixed spot on the right of the list while a link is hovered or focused, and nothing follows the pointer. The follow is CSS that the reduced rule overrides, so the page\'s own motion switch applies both ways without a reload.',
+  clientRouter: 'Bound through the shared runtime; the listeners are aborted before the swap.',
+  craft: [
+    'One box for the whole list, not one per item: every image is in it, stacked and lazy, and the hovered link picks the visible one through a single number. There is no src swap and no image created on hover.',
+    'The follow is the Cursor pattern: the script writes two lengths, translate transitions on the fast token and the exit curve, so the image trails the pointer with the same character as the site\'s cursor.',
+    'The lean is the sign of the pointer\'s horizontal travel times the tilt token, transitioned on the preset curve: three values from the script, one angle from CSS.',
+    'While one link is hovered the others fade to 40 % and the hovered one steps half a rem right with its arrow pointing on: the list itself says which one you are on, before the image does.',
+    'The active image is chosen with clamp() and a square, 1 − (i − active)², so no abs() is needed and the rule works in every engine with clamp() (Chrome 79, Firefox 75, Safari 13.1).',
+  ],
+  related: ['cursor', 'image-trail', 'underline-hover', 'link-preview'],
+  intents: ['hover image links', 'project list hover image follows cursor', 'link list with floating image', 'portfolio index hover preview', 'blog list hover cover', 'image reveal on link hover astro'],
+  replaces: ['HoverImageLinks (Hover.dev)', 'LinkPreview list (Skiper UI)', 'FloatingImage (Aceternity)'],
+  fixture: { props: { items: [{ href: '/one/', title: 'Fixture content for HoverImageLinks', image: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 4 3%22%3E%3Crect width=%224%22 height=%223%22 fill=%22%23888%22/%3E%3C/svg%3E' }, { href: '/two/', title: 'Two', image: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 4 3%22%3E%3Crect width=%224%22 height=%223%22 fill=%22%23444%22/%3E%3C/svg%3E' }] }, expect: 'Fixture content for HoverImageLinks' },
+} satisfies ComponentMeta;