@moonarc/core 0.1.0

package/src/components/TextScramble.astro

@@ -0,0 +1,107 @@
+---
+/**
+ * TextScramble — random characters resolve into the text, left to right.
+ *
+ * The server HTML is the final string. On trigger, a small rAF loop swaps
+ * each character for a random one until that character's lock time, then
+ * writes the real one. Bound through the runtime; never runs under reduced
+ * motion, so the text is simply there.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'span'> {
+  /** Final text. */
+  text: string;
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Milliseconds between one character locking and the next. */
+  speed?: number;
+  /** Characters to scramble with. */
+  charset?: string;
+  /** When to run. */
+  trigger?: 'view' | 'load' | 'hover';
+  /** Delay before the first lock, ms. */
+  delay?: number;
+}
+
+const { text, as: Tag = 'span', speed = 30, charset = '!<>-_\\/[]{}—=+*^?#', trigger = 'view', delay = 0, class: className, ...rest } = Astro.props;
+---
+
+<Tag class:list={['ma-scramble', className]} data-ma-scramble data-speed={speed} data-charset={charset} data-trigger={trigger} data-delay={delay} {...rest}>
+  <span class="ma-scramble__text" aria-hidden="true">{text}</span>
+  <span class="ma-sr">{text}</span>
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-scramble__text) {
+      font-variant-ligatures: none;
+    }
+    :where(.ma-scramble[data-running] .ma-scramble__text) {
+      /* keep the box stable while glyph widths churn */
+      font-variant-numeric: tabular-nums;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-scramble__text) {
+        /* the script never binds; the final text is already here */
+        opacity: 1;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount } from '../lib/runtime';
+
+  onMount<HTMLElement>('[data-ma-scramble]', (el, { signal, reducedMotion }) => {
+    if (reducedMotion) return;
+    const node = el.querySelector<HTMLElement>('.ma-scramble__text');
+    if (!node) return;
+    const final = node.textContent ?? '';
+    const chars = [...final];
+    const speed = Number(el.dataset.speed ?? 30);
+    const set = el.dataset.charset ?? '!<>-_\\/[]{}';
+    const delay = Number(el.dataset.delay ?? 0);
+    let raf = 0;
+    let start = 0;
+    const frame = (now: number) => {
+      let out = '';
+      let done = true;
+      chars.forEach((c, i) => {
+        if (c === ' ' || now >= start + i * speed) out += c;
+        else {
+          done = false;
+          out += set[Math.floor(Math.random() * set.length)];
+        }
+      });
+      node.textContent = out;
+      if (done) delete el.dataset.running;
+      else raf = requestAnimationFrame(frame);
+    };
+    const run = () => {
+      cancelAnimationFrame(raf);
+      start = performance.now() + delay;
+      el.dataset.running = '';
+      raf = requestAnimationFrame(frame);
+    };
+    // Torn down mid-scramble (an element persisted across a swap), it runs to the end at once: every character
+    // locked, the real text back. The next bind reads its final string from the node, and read the noise instead.
+    signal.addEventListener('abort', () => {
+      cancelAnimationFrame(raf);
+      frame(Infinity);
+    });
+    const trigger = el.dataset.trigger;
+    if (trigger === 'hover') el.addEventListener('pointerenter', run, { signal });
+    else if (trigger === 'load') run();
+    else {
+      const io = new IntersectionObserver(([e]) => {
+        if (e!.isIntersecting) {
+          run();
+          io.disconnect();
+        }
+      }, { threshold: 0.4 });
+      io.observe(el);
+      signal.addEventListener('abort', () => io.disconnect());
+    }
+  });
+</script>

package/src/components/TextScramble.meta.ts

@@ -0,0 +1,35 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'TextScramble',
+  slug: 'text-scramble',
+  title: 'Text Scramble',
+  description: 'Random characters resolve into the real text from left to right when it scrolls into view, on load, or on hover. The server HTML is the final string; a small requestAnimationFrame loop does the rest and never runs under reduced motion.',
+  summary: 'A text scramble effect: random characters resolve into the real text on scroll, on load or on hover.',
+  category: 'text',
+  tier: 'B',
+  trigger: ['scroll', 'hover', 'load'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<TextScramble speed={30}>',
+  usage: `<TextScramble as="h2" text="Decrypting…" />\n<TextScramble text="hover me" trigger="hover" charset="01" />`,
+  props: [
+    { name: 'text', type: 'string', description: 'Final text.' },
+    { name: 'as', type: 'HTMLTag', default: "'span'", description: 'Element to render.' },
+    { name: 'speed', type: 'number', default: '30', description: 'Milliseconds between one character locking and the next; 20–40 reads as decoding.' },
+    { name: 'charset', type: 'string', default: "'!<>-_\\\\/[]{}—=+*^?#'", description: 'Characters to scramble with.' },
+    { name: 'trigger', type: "'view' | 'load' | 'hover'", default: "'view'", description: 'When to run.' },
+    { name: 'delay', type: 'number', default: '0', description: 'Delay before the first lock, ms.' },
+  ],
+  reducedMotion: 'The script does not bind; the final text is shown.',
+  clientRouter: 'Bound through the shared runtime; the loop is cancelled before a swap and the real text put back, so an element persisted mid-scramble never keeps the noise.',
+  craft: [
+    'Locks left to right at a fixed interval, so a ten-character word resolves in 300 ms: long enough to read as decoding, short enough not to wait for.',
+    'Spaces never scramble; word shapes stay readable throughout.',
+    'A visually hidden span (.ma-sr) carries the final text; the churning span is aria-hidden, so assistive tech never hears the noise.',
+    'Tabular figures while running so digits do not make the box breathe.',
+  ],
+  related: ['typewriter', 'split-text', 'weight-wave'],
+  intents: ['text scramble', 'decrypt text effect', 'hacker text animation', 'scramble letters into words', 'decode text on scroll'],
+  replaces: ['DecryptedText (React Bits)', 'HyperText (Magic UI)', 'TextScramble (Aceternity)'],
+  fixture: { props: { text: 'Fixture content for TextScramble' }, expect: 'ma-sr">Fixture content for TextScramble</span>' },
+} satisfies ComponentMeta;

package/src/components/ThemeScript.astro

@@ -0,0 +1,17 @@
+---
+/**
+ * ThemeScript — the anti-flash half of ThemeToggle. Put it in <head>: it
+ * stamps the resolved theme on <html> before the first paint, re-applies it
+ * after every ClientRouter swap and exposes window.__maTheme for the toggle.
+ * One of the few legitimate inline scripts; its size is in lib/theme.ts.
+ */
+import { themeScript } from '../lib/theme';
+
+interface Props {
+  /** localStorage key; the same one ThemeToggle uses. */
+  storageKey?: string;
+}
+const { storageKey = 'ma-theme' } = Astro.props;
+---
+
+<script is:inline set:html={themeScript(storageKey)} />

package/src/components/ThemeToggle.astro

@@ -0,0 +1,182 @@
+---
+/**
+ * ThemeToggle — cycles system → light → dark and the page changes theme
+ * through a circle that grows from the click. The choice is stored under
+ * ThemeScript's key; ThemeScript in <head> is what applies it before paint
+ * and after every swap and exposes window.__maTheme, so this script only
+ * advances the choice, writes the origin on <html> and wraps the change in
+ * document.startViewTransition. Without ThemeScript, and so without
+ * JavaScript, the toggle is hidden: it could only be a dead button.
+ * Without view transitions, or under reduced motion, the theme switches
+ * at once. The icon is AnimatedIcons (sun ↔ moon) reading data-on; until
+ * the script has synced, the icon and the label follow ThemeScript's
+ * attributes on <html>, so the first frames already show the choice.
+ */
+import type { HTMLAttributes } from 'astro/types';
+import AnimatedIcons from './AnimatedIcons.astro';
+
+type Choice = 'system' | 'light' | 'dark';
+
+interface Props extends HTMLAttributes<'button'> {
+  /** Where the circle grows from. */
+  origin?: 'click' | 'center';
+  /** The cycle. */
+  choices?: Choice[];
+  /** Print the current choice next to the icon. */
+  label?: boolean;
+}
+
+const { origin = 'click', choices = ['system', 'light', 'dark'], label = false, class: className, ...rest } = Astro.props;
+---
+
+<button
+  class:list={['ma-theme', className]}
+  type="button"
+  data-origin={origin}
+  data-choices={choices.join(',')}
+  aria-label="Theme: system"
+  {...rest}
+>
+  <AnimatedIcons icon="sun" />
+  {label && <span class="ma-theme__label"></span>}
+</button>
+
+<style is:global>
+  @layer components {
+    :where(.ma-theme) {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5em;
+      padding: 0.45em 0.7em;
+      border: 1px solid var(--ma-edge);
+      border-radius: 0.5em;
+      background: var(--ma-panel);
+      color: var(--ma-ink);
+      font: inherit;
+      font-size: 0.875em;
+      line-height: 1.2;
+      cursor: pointer;
+      transition: border-color var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    /* no ThemeScript (no data-theme-choice), which includes no JavaScript at all: a toggle that cannot toggle is not shown */
+    :where(:root:not([data-theme-choice]) .ma-theme) {
+      display: none;
+    }
+    :where(.ma-theme:hover) {
+      border-color: color-mix(in srgb, var(--ma-ink) 40%, transparent);
+    }
+    :where(.ma-theme:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+    :where(.ma-theme__label) {
+      font-family: ui-monospace, monospace;
+      font-size: 0.85em;
+      min-width: 3.6em;
+      text-align: left;
+    }
+    /* the first frames, before the script has synced: ThemeScript has already stamped the choice and the resolved theme
+       on <html>, so the label reads the choice and the icon is the moon in dark. The script then writes the label's
+       text (:empty lets go) and data-on. The icon rules outrank AnimatedIcons' own zero-specificity ones, so the order
+       the two stylesheets arrive in does not matter */
+    :where(.ma-theme__label:empty)::before {
+      content: 'system';
+    }
+    :where(:root[data-theme-choice='light'] .ma-theme__label:empty)::before {
+      content: 'light';
+    }
+    :where(:root[data-theme-choice='dark'] .ma-theme__label:empty)::before {
+      content: 'dark';
+    }
+    :where(:root[data-theme='dark'] .ma-theme .ma-icon[data-icon='sun']) .ma-icon__a,
+    :where(:root[data-theme='dark'] .ma-theme .ma-icon[data-icon='sun']) .ma-icon__b {
+      opacity: 0;
+      scale: 0.5;
+      rotate: 90deg;
+    }
+    :where(:root[data-theme='dark'] .ma-theme .ma-icon[data-icon='sun']) .ma-icon__c {
+      opacity: 1;
+      scale: 1;
+      rotate: 0deg;
+    }
+    /* the swap: the old theme holds, the new one opens as a circle from the origin. The attribute lives on <html>
+       only for the duration, and its specificity beats Curtain's :where() root rules so both can share a page. */
+    :where(:root)[data-ma-theme-vt]::view-transition-old(root) {
+      animation: none;
+      mix-blend-mode: normal;
+    }
+    :where(:root)[data-ma-theme-vt]::view-transition-new(root) {
+      animation: ma-theme-iris var(--ma-duration) var(--ma-ease-out) both;
+      mix-blend-mode: normal;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(:root)[data-ma-theme-vt]::view-transition-old(root),
+      :where(:root)[data-ma-theme-vt]::view-transition-new(root) {
+        animation: none;
+        clip-path: none;
+      }
+      :where(:root)[data-ma-theme-vt]::view-transition-old(root) {
+        display: none;
+      }
+    }
+  }
+
+  @keyframes ma-theme-iris {
+    from {
+      clip-path: circle(0 at var(--ma-theme-x, 50%) var(--ma-theme-y, 50%));
+    }
+    to {
+      clip-path: circle(var(--ma-theme-r, 150%) at var(--ma-theme-x, 50%) var(--ma-theme-y, 50%));
+    }
+  }
+</style>
+
+<script>
+  import { onMount, prefersReducedMotion } from '../lib/runtime';
+
+  type Api = { choice(): string; set(c: string): void };
+  const html = document.documentElement;
+  // every toggle on the page follows a change made on any of them
+  const syncs = new Set<() => void>();
+
+  // bound by tag and class, not by an attribute: data-ma-theme is theme.css's scope (7F) — a toggle bound to it turned every
+  // themed subtree (a section demo, the /theme preview) into a second toggle that cycled the theme on any click inside it
+  onMount<HTMLButtonElement>('button.ma-theme', (btn, { signal }) => {
+    // ThemeScript owns the attributes and exposes the API; without it the toggle stays inert rather than half-working
+    const theme = (window as unknown as { __maTheme?: Api }).__maTheme;
+    if (!theme) return;
+    const choices = (btn.dataset.choices ?? 'system,light,dark').split(',');
+    const sync = () => {
+      const c = theme.choice();
+      btn.setAttribute('aria-label', `Theme: ${c}`);
+      const l = btn.querySelector('.ma-theme__label');
+      if (l) l.textContent = c;
+      btn.toggleAttribute('data-on', html.dataset.theme === 'dark');
+    };
+    syncs.add(sync);
+    signal.addEventListener('abort', () => syncs.delete(sync));
+    btn.addEventListener(
+      'click',
+      () => {
+        // a choice outside the cycle (system, with choices light and dark) steps on from the theme it resolved to, so the
+        // first click changes the page instead of setting the theme it already shows
+        const next = choices[(choices.indexOf(theme.choice()) + 1 || choices.indexOf(html.dataset.theme!) + 1) % choices.length]!;
+        const apply = () => {
+          theme.set(next);
+          syncs.forEach((s) => s());
+        };
+        const doc = document as Document & { startViewTransition?: (cb: () => void) => { finished: Promise<void> } };
+        if (!doc.startViewTransition || prefersReducedMotion()) return apply();
+        const r = btn.getBoundingClientRect();
+        const centre = btn.dataset.origin === 'center';
+        const x = centre ? innerWidth / 2 : r.left + r.width / 2;
+        const y = centre ? innerHeight / 2 : r.top + r.height / 2;
+        html.style.cssText += `;--ma-theme-x:${x}px;--ma-theme-y:${y}px;--ma-theme-r:${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px`;
+        html.setAttribute('data-ma-theme-vt', '');
+        doc.startViewTransition(apply).finished.finally(() => html.removeAttribute('data-ma-theme-vt'));
+      },
+      { signal },
+    );
+    sync();
+  });
+</script>

package/src/components/ThemeToggle.meta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'ThemeToggle',
+  slug: 'theme-toggle',
+  title: 'Theme Toggle',
+  description: 'Cycles system → light → dark, and the page changes theme through a circle that grows from the click, on a same-document view transition. ThemeScript in <head> stores the choice, applies it before paint and after every swap and exposes the API; ThemeToggle\'s own script only advances the choice and wraps the change (its storageKey prop is ThemeScript\'s). Without view transitions, or under reduced motion, the theme switches at once. Without ThemeScript, which includes a page without JavaScript, the toggle is hidden. The icon is AnimatedIcons (sun to moon).',
+  summary: 'A dark mode toggle that cycles system, light and dark, showing the new theme in a circle that grows from the click.',
+  category: 'ui',
+  tier: 'C',
+  trigger: ['click'],
+  support: { baseline: 'newly', needs: ['view-transitions', 'clip-path'], fallback: 'an instant switch' },
+  readout: '<ThemeToggle origin="click">',
+  usage: `---\n// in the layout\nimport ThemeScript from '@moonarc/core/ThemeScript';\nimport ThemeToggle from '@moonarc/core/ThemeToggle';\n---\n<head>\n  <ThemeScript />\n</head>\n<header>\n  <ThemeToggle label />\n</header>`,
+  props: [
+    { name: 'origin', type: "'click' | 'center'", default: "'click'", description: 'Where the circle grows from.' },
+    { name: 'choices', type: "('system' | 'light' | 'dark')[]", default: "['system', 'light', 'dark']", description: 'The cycle; ["light", "dark"] for a two-state switch. A stored choice outside the cycle (system, for that switch) steps on from the theme it resolves to, so the first click always changes the page.' },
+    { name: 'label', type: 'boolean', default: 'false', description: 'Print the current choice next to the icon.' },
+  ],
+  reducedMotion: 'No circle: the theme switches at once. The icon swap loses its rotation.',
+  clientRouter: 'ThemeScript re-applies the attributes after every swap (the router replaces <html>\'s); the toggle rebinds through the shared runtime and re-syncs its label and icon.',
+  craft: [
+    'One contract, two halves: ThemeScript (inline, in <head>, before paint) owns the attributes and the storage key; the toggle only calls set(). No flash on load, none on navigation. Without ThemeScript there is no data-theme-choice on <html>, and the toggle is display: none rather than a dead button or a second, half-right owner. The same rule hides it when JavaScript is off.',
+    'The first frames are CSS: before the toggle\'s module has run, the label reads the choice from html[data-theme-choice] and the icon turns to the moon under html[data-theme="dark"], so a reader who chose dark never sees a sun and the word system flash first.',
+    'The circle is clip-path on ::view-transition-new(root) with the old snapshot held still. The new theme is revealed, not faded, so mid-transition both themes are crisp.',
+    'The radius is computed to the farthest corner, so the circle covers the viewport exactly when the transition ends, from any click point.',
+    'The attribute that selects the transition rules lives on <html> only for the duration and outranks Curtain\'s :where() root rules, so a page can carry both.',
+    'Three choices: system is a choice, and a visitor who chose it should not be forced into a fixed theme by a click.',
+  ],
+  related: ['animated-icons', 'curtain', 'page-transition'],
+  intents: ['dark mode toggle', 'theme toggle with animation', 'theme switch circle transition', 'view transition dark mode', 'light dark system toggle astro'],
+  replaces: ['ThemeToggle (Skiper UI)', 'AnimatedThemeToggler (Magic UI)', 'theme toggle (shadcn)'],
+  fixture: { props: { label: true }, expect: 'aria-label="Theme: system"' },
+} satisfies ComponentMeta;

package/src/components/Tilt.astro

@@ -0,0 +1,97 @@
+---
+/**
+ * Tilt — a card leans toward the cursor in 3D and settles back when it leaves.
+ *
+ * Pointer position becomes two custom properties; the rotation, lift and
+ * glare are CSS reading them. Moving is immediate; leaving transitions on the
+ * active preset's curve so the settle has the same character as everything
+ * else on the page. Under reduced motion the script never binds.
+ */
+import type { HTMLAttributes, HTMLTag } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** Element to render. */
+  as?: HTMLTag;
+  /** Maximum tilt in degrees. */
+  max?: number;
+  /** Scale while hovered. */
+  scale?: number;
+  /** Perspective in px; smaller is more dramatic. */
+  perspective?: number;
+  /** A moving highlight on the surface. */
+  glare?: boolean;
+}
+
+const { as: Tag = 'div', max = 12, scale = 1.02, perspective = 800, glare = true, class: className, style, ...rest } = Astro.props;
+const inline = [`--ma-tilt-max:${max}deg`, `--ma-tilt-scale:${scale}`, `--ma-tilt-p:${perspective}px`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
+---
+
+<Tag class:list={['ma-tilt', className]} data-ma-tilt data-glare={glare ? '' : undefined} style={inline} {...rest}>
+  <slot />
+</Tag>
+
+<style is:global>
+  @layer components {
+    :where(.ma-tilt) {
+      position: relative;
+      /* --ma-px / --ma-py: pointer position as -1…1 from the centre, written by the script */
+      transform: perspective(var(--ma-tilt-p, 800px)) rotateX(calc(var(--ma-py, 0) * var(--ma-tilt-max, 12deg) * -1)) rotateY(calc(var(--ma-px, 0) * var(--ma-tilt-max, 12deg))) scale(var(--ma-s, 1));
+      transform-style: preserve-3d;
+      transition: transform var(--ma-duration) var(--ma-ease);
+    }
+    :where(.ma-tilt[data-moving]) {
+      transition-duration: 80ms;
+      transition-timing-function: linear;
+    }
+    :where(.ma-tilt[data-glare])::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      background: radial-gradient(farthest-corner circle at calc(50% + var(--ma-px, 0) * 50%) calc(50% + var(--ma-py, 0) * 50%), var(--ma-shine), transparent 60%);
+      opacity: 0;
+      transition: opacity var(--ma-duration-fast) var(--ma-ease-out);
+    }
+    :where(.ma-tilt[data-moving][data-glare])::after {
+      opacity: 0.35;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where(.ma-tilt) {
+        transform: none;
+        transition: none;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { onMount } from '../lib/runtime';
+
+  onMount<HTMLElement>('[data-ma-tilt]', (el, { signal, reducedMotion }) => {
+    if (reducedMotion) return;
+    const set = (x: number, y: number) => {
+      el.style.setProperty('--ma-px', x.toFixed(3));
+      el.style.setProperty('--ma-py', y.toFixed(3));
+    };
+    el.addEventListener(
+      'pointermove',
+      (e) => {
+        const r = el.getBoundingClientRect();
+        set(((e.clientX - r.left) / r.width) * 2 - 1, ((e.clientY - r.top) / r.height) * 2 - 1);
+        el.style.setProperty('--ma-s', el.style.getPropertyValue('--ma-tilt-scale') || '1.02');
+        el.dataset.moving = '';
+      },
+      { signal, passive: true },
+    );
+    el.addEventListener(
+      'pointerleave',
+      () => {
+        delete el.dataset.moving;
+        set(0, 0);
+        el.style.setProperty('--ma-s', '1');
+      },
+      { signal },
+    );
+  });
+</script>

package/src/components/Tilt.meta.ts

@@ -0,0 +1,34 @@
+import type { ComponentMeta } from '../lib/meta';
+
+export default {
+  name: 'Tilt',
+  slug: 'tilt',
+  title: 'Tilt',
+  description: 'A card leans toward the cursor in 3D, lifts slightly, catches a glare, and settles back on the active preset\'s spring when the cursor leaves. The pointer writes two custom properties; everything visible is CSS. Never binds under reduced motion.',
+  summary: 'A 3D tilt card effect: the card leans toward the cursor, lifts, catches a glare and springs back.',
+  category: 'pointer',
+  tier: 'B',
+  trigger: ['pointer', 'hover'],
+  support: { baseline: 'widely', needs: [] },
+  readout: '<Tilt max={12}>',
+  usage: `<Tilt class="rounded-2xl border p-8">\n  <img src="/card.png" alt="" />\n</Tilt>\n<Tilt max={6} glare={false} perspective={1200}>subtle</Tilt>`,
+  props: [
+    { name: 'as', type: 'HTMLTag', default: "'div'", description: 'Element to render.' },
+    { name: 'max', type: 'number', default: '12', description: 'Maximum tilt in degrees. Over 15 shows the card\'s edge.' },
+    { name: 'scale', type: 'number', default: '1.02', description: 'Scale while hovered.' },
+    { name: 'perspective', type: 'number', default: '800', description: 'Perspective in px; smaller is more dramatic.' },
+    { name: 'glare', type: 'boolean', default: 'true', description: 'A highlight that moves opposite the tilt.' },
+  ],
+  reducedMotion: 'No tilt, no glare, no script: the card is static.',
+  clientRouter: 'Bound through the shared runtime: every instance after each navigation, aborted before the swap.',
+  craft: [
+    'Following the cursor is near-instant (80 ms linear); returning uses the preset spring. Direct manipulation must not lag; release may have character.',
+    'The settle curve is the page\'s active preset, so a "lively" page has cards that bounce back and a "snap" page has cards that click back.',
+    'Rotation and glare both read the same two custom properties, so they can never disagree.',
+    'transform-style: preserve-3d lets children with translateZ float above the surface.',
+  ],
+  related: ['spotlight', 'border-beam', 'magnetic'],
+  intents: ['tilt card', '3d hover card', 'card tilts on mouse move', 'parallax tilt effect', 'vanilla-tilt astro'],
+  replaces: ['TiltedCard (React Bits)', 'CardContainer / 3D card (Aceternity)', 'vanilla-tilt', 'react-parallax-tilt'],
+  fixture: { expect: 'class="ma-tilt"' },
+} satisfies ComponentMeta;