Magnetic

---
/**
 * 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>