@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/motion/morph.ts

@@ -0,0 +1,540 @@
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+import { MORPH_STYLES, clearStyles } from '../core/styles';
+import { liquidClose, liquidOpen } from './liquid';
+import { backdropVeil, ghostOf, transparentColor } from './surface';
+
+/*
+ * Container transform after Stepbro's ModalHost (ported from Kayro): a surface
+ * (dialog, menu, option list) grows out of the control that opened it and folds
+ * back into it. The surface itself is never scaled: it starts clipped to the
+ * opener's size and corners, moved onto the opener, and widens to its own box
+ * while the opener's colour fades into its own. A dialog's content travels as
+ * one group, scaled from the opener's box to its own while it sharpens and
+ * fades in. `data-mk-shared="id"` pieces (a title) fly between opener and surface.
+ */
+
+const FACE = 'mk-morph-face';
+const HIDDEN_ORIGIN = 'data-mk-morph-origin';
+const SHARED = 'data-mk-shared';
+const SHARED_HIDDEN = 'data-mk-shared-hidden';
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max));
+
+/** A computed radius in pixels (percentages resolve against `size`). */
+const radiusOf = (value: string, size: number) => {
+  const parsed = Number.parseFloat(value) || 0;
+  return value.trim().endsWith('%') ? (parsed / 100) * size : parsed;
+};
+
+interface Shape {
+  /** Offset that puts the clipped area on the opener. */
+  x: number;
+  y: number;
+  /** Clip at the opener's size, and the full surface. */
+  from: string;
+  to: string;
+  /** The clipped area in the surface's own coordinates. */
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Where the surface starts: the area of the opener's size nearest to it inside
+ * the surface, and the offset that moves that area onto the opener. Null when
+ * the opener is gone, tiny or off screen.
+ */
+function shapeOf(surface: HTMLElement, origin: HTMLElement | null): Shape | null {
+  if (!origin?.isConnected) return null;
+  const start = origin.getBoundingClientRect();
+  const box = surface.getBoundingClientRect();
+  if (start.width < 4 || start.height < 4 || !box.width || !box.height) return null;
+  if (start.bottom < 0 || start.top > innerHeight || start.right < 0 || start.left > innerWidth) return null;
+  const width = Math.min(start.width, box.width);
+  const height = Math.min(start.height, box.height);
+  const left = clamp(start.left - box.left, 0, box.width - width);
+  const top = clamp(start.top - box.top, 0, box.height - height);
+  const corner = Math.min(radiusOf(getComputedStyle(origin).borderTopLeftRadius, start.height), width / 2, height / 2);
+  const radius = radiusOf(getComputedStyle(surface).borderTopLeftRadius, box.height);
+  return {
+    x: start.left + (start.width - width) / 2 - (box.left + left),
+    y: start.top + (start.height - height) / 2 - (box.top + top),
+    from: `inset(${top}px ${box.width - left - width}px ${box.height - top - height}px ${left}px round ${corner}px)`,
+    to: `inset(0px 0px 0px 0px round ${radius}px)`,
+    left,
+    top,
+    width,
+    height,
+  };
+}
+
+/** Properties that make a copy look like the opener wherever it is placed. */
+const LOOK = [
+  'display',
+  'alignItems',
+  'justifyContent',
+  'gap',
+  'padding',
+  'borderRadius',
+  'borderWidth',
+  'borderStyle',
+  'borderColor',
+  'backgroundColor',
+  'color',
+  'fontFamily',
+  'fontSize',
+  'fontWeight',
+  'lineHeight',
+  'letterSpacing',
+  'whiteSpace',
+] as const;
+
+/**
+ * A layer over the surface that looks like the opener: its colour fills the
+ * surface and, for lists, a copy of its label sits where it was. Fading it out
+ * turns the opener into the surface.
+ */
+function faceOf(surface: HTMLElement, origin: HTMLElement, shape: Shape, withCopy: boolean) {
+  const look = getComputedStyle(origin);
+  const face = document.createElement('div');
+  face.className = FACE;
+  face.setAttribute('aria-hidden', 'true');
+  face.inert = true;
+  if (!transparentColor(look.backgroundColor)) face.style.background = look.backgroundColor;
+  surface.append(face);
+  if (!withCopy) return { face, copy: null as HTMLElement | null };
+  const copy = document.createElement('span');
+  copy.innerHTML = origin.innerHTML;
+  for (const element of copy.querySelectorAll('[id], [name], [for]')) for (const name of ['id', 'name', 'for']) element.removeAttribute(name);
+  for (const property of LOOK) copy.style[property] = look[property];
+  Object.assign(copy.style, {
+    position: 'absolute',
+    left: `${shape.left}px`,
+    top: `${shape.top}px`,
+    width: `${shape.width}px`,
+    height: `${shape.height}px`,
+    boxSizing: 'border-box',
+    margin: '0',
+    overflow: 'hidden',
+  });
+  face.append(copy);
+  return { face, copy };
+}
+
+/** The morph each surface is playing, so a new one stops it first. */
+const running = new WeakMap<HTMLElement, gsap.core.Animation>();
+
+/** Whether a surface is opening or closing right now. */
+export const isMorphing = (surface: HTMLElement) => running.has(surface);
+
+function stop(surface: HTMLElement) {
+  running.get(surface)?.kill();
+  running.delete(surface);
+  gsap.killTweensOf(surface);
+  for (const face of surface.querySelectorAll(`:scope > .${FACE}`)) face.remove();
+  clearStyles([surface], MORPH_STYLES);
+}
+
+/** Stop a surface's morph now and put the surface and its content back to rest. */
+export function stopMorph(surface: HTMLElement) {
+  stop(surface);
+  const parts = [...surface.querySelectorAll<HTMLElement>(':scope > *')].filter((element) => !element.classList.contains('mk-liquid'));
+  gsap.killTweensOf(parts);
+  clearStyles(parts, MORPH_STYLES);
+}
+
+/** Small controls disappear into the surface they open, like a shared element. */
+const compact = (element: HTMLElement) => {
+  const box = element.getBoundingClientRect();
+  return box.width <= 360 && box.height <= 72;
+};
+
+/** Show a hidden opener again; with `fade` it comes back while its surface closes (0.3 s after 0.2 s). */
+export function showOrigin(origin: HTMLElement | null | undefined, { fade = false }: { fade?: boolean } = {}) {
+  if (!origin?.hasAttribute(HIDDEN_ORIGIN)) return;
+  if (!fade || reduced()) {
+    origin.removeAttribute(HIDDEN_ORIGIN);
+    return;
+  }
+  const previous = origin.style.transition;
+  const { originShow, originShowDelay } = TIMING.dialog;
+  origin.style.transition = `opacity ${originShow}s cubic-bezier(0.215, 0.61, 0.355, 1) ${originShowDelay}s`;
+  origin.removeAttribute(HIDDEN_ORIGIN);
+  setTimeout(() => {
+    origin.style.transition = previous;
+  }, (originShow + originShowDelay) * 1000 + 50);
+}
+
+/** Scale and offset that fit the content, as one group, into the opener's box inside the surface. */
+function groupOf(surface: HTMLElement, parts: HTMLElement[], shape: Shape) {
+  const box = surface.getBoundingClientRect();
+  for (const part of parts) {
+    const own = part.getBoundingClientRect();
+    gsap.set(part, { transformOrigin: `${box.left - own.left}px ${box.top - own.top}px` });
+  }
+  return {
+    x: shape.left,
+    y: shape.top,
+    scaleX: box.width ? shape.width / box.width : 1,
+    scaleY: box.height ? shape.height / box.height : 1,
+  };
+}
+
+const escape = (value: string) => (typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value.replace(/"/g, '\\"'));
+
+function sharedPairs(origin: HTMLElement, surface: HTMLElement) {
+  return [origin, ...origin.querySelectorAll<HTMLElement>(`[${SHARED}]`)]
+    .filter((source) => source.hasAttribute(SHARED))
+    .map((source) => ({
+      source,
+      target: surface.querySelector<HTMLElement>(`[${SHARED}="${escape(source.getAttribute(SHARED) ?? '')}"]`),
+    }))
+    .filter((pair): pair is { source: HTMLElement; target: HTMLElement } => pair.target !== null);
+}
+
+/** Where an element's text sits: its box without padding and border. */
+function textBox(element: HTMLElement) {
+  const box = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const px = (value: string) => parseFloat(value) || 0;
+  const left = box.left + px(style.borderLeftWidth) + px(style.paddingLeft);
+  const top = box.top + px(style.borderTopWidth) + px(style.paddingTop);
+  const bottom = box.bottom - px(style.borderBottomWidth) - px(style.paddingBottom);
+  return { left, top, height: Math.max(0, bottom - top), style };
+}
+
+const textOf = (element: HTMLElement) =>
+  element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement
+    ? element.value || element.placeholder
+    : (element.firstChild?.textContent ?? element.textContent ?? '');
+
+/** Fly a copy of `from`'s text onto `to` (place, size, colour) in the top layer. Resolves when it lands. */
+function flyText(from: HTMLElement, to: HTMLElement, text: string, duration: number) {
+  return new Promise<void>((resolve) => {
+    const start = textBox(from);
+    const end = textBox(to);
+    const fromSize = parseFloat(start.style.fontSize) || 16;
+    const toSize = parseFloat(end.style.fontSize) || fromSize;
+    const scale = toSize / fromSize;
+    const ghost = document.createElement('div');
+    ghost.setAttribute('aria-hidden', 'true');
+    ghost.setAttribute('popover', 'manual');
+    ghost.textContent = text;
+    Object.assign(ghost.style, {
+      position: 'fixed',
+      inset: 'auto',
+      left: `${start.left}px`,
+      top: `${start.top}px`,
+      margin: '0',
+      padding: '0',
+      border: '0',
+      background: 'transparent',
+      overflow: 'visible',
+      whiteSpace: 'nowrap',
+      pointerEvents: 'none',
+      fontFamily: start.style.fontFamily,
+      fontSize: start.style.fontSize,
+      fontWeight: start.style.fontWeight,
+      lineHeight: `${start.height || fromSize * 1.2}px`,
+      letterSpacing: start.style.letterSpacing,
+      color: start.style.color,
+      transformOrigin: '0 0',
+    });
+    document.body.append(ghost);
+    if (typeof ghost.showPopover === 'function') ghost.showPopover();
+    const height = (start.height || fromSize * 1.2) * scale;
+    gsap.to(ghost, {
+      x: end.left - start.left,
+      y: end.top + end.height / 2 - height / 2 - start.top,
+      scale,
+      color: end.style.color,
+      duration,
+      ease: EASE.signature,
+      onComplete: () => {
+        ghost.remove();
+        resolve();
+      },
+    });
+  });
+}
+
+/** Show the opener's shared pieces again (a surface closed without its animation). */
+export function releaseShared(origin: HTMLElement | null | undefined) {
+  if (!origin) return;
+  for (const element of [origin, ...origin.querySelectorAll(`[${SHARED_HIDDEN}]`)]) element.removeAttribute(SHARED_HIDDEN);
+}
+
+/** The opener's pieces travel into the surface; they stay hidden at home until it closes. */
+export function shareInto(origin: HTMLElement, surface: HTMLElement, duration: number = TIMING.dialog.open) {
+  for (const { source, target } of sharedPairs(origin, surface)) {
+    const text = textOf(source);
+    source.setAttribute(SHARED_HIDDEN, '');
+    gsap.set(target, { opacity: 0 });
+    void flyText(source, target, text, duration).then(() => gsap.set(target, { clearProps: 'opacity' }));
+  }
+}
+
+/** The surface's pieces travel back home and show there again. */
+export function shareBack(surface: HTMLElement, origin: HTMLElement, duration: number = TIMING.dialog.close) {
+  for (const { source, target } of sharedPairs(origin, surface)) {
+    gsap.set(target, { opacity: 0 });
+    void flyText(target, source, textOf(source), duration).then(() => source.removeAttribute(SHARED_HIDDEN));
+  }
+}
+
+export interface MorphOpenOptions {
+  duration?: number;
+  /** Keep a compact opener hidden while the surface is open; call showOrigin when it closes. */
+  hideOrigin?: boolean;
+  /** What enters inside the surface (selector); by default its children. */
+  content?: string;
+  /** Delay between content parts: an option list cascades instead of growing as one. */
+  stagger?: number;
+  liquid?: boolean;
+}
+
+const partsOf = (surface: HTMLElement, content: string | undefined) =>
+  [...surface.querySelectorAll<HTMLElement>(content ?? ':scope > *')].filter(
+    (element) => !element.classList.contains(FACE) && !element.classList.contains('mk-liquid'),
+  );
+
+/**
+ * Open `surface` out of `origin`. Returns the timeline (null when reduced).
+ * Shape travels from the opener (0.7 s, signature) and takes the surface's
+ * colour over the first 0.3 s; the content grows from the opener's box out of
+ * an 8 px blur on the same curve. Without an opener on screen: scale .92 → 1, 0.35 s.
+ */
+export function morphOpen(surface: HTMLElement, origin: HTMLElement | null, options: MorphOpenOptions = {}) {
+  registerMotion();
+  const { duration = TIMING.dialog.open, hideOrigin = false, content, stagger = 0, liquid = false } = options;
+  stop(surface);
+  if (reduced()) return null;
+  const parts = partsOf(surface, content);
+  if (liquid && !stagger && origin && shapeOf(surface, origin)) {
+    if (hideOrigin && compact(origin)) origin.setAttribute(HIDDEN_ORIGIN, '');
+    const settle = liquidOpen(surface, origin, parts);
+    const window = gsap.timeline({
+      onComplete: () => {
+        settle();
+        running.delete(surface);
+      },
+      onInterrupt: settle,
+    });
+    window.to({}, { duration: TIMING.liquid.safetyMs / 1000 });
+    running.set(surface, window);
+    return window;
+  }
+  const enter = stagger
+    ? { opacity: 1, y: 0, duration: TIMING.dialog.list, ease: 'power2.out', stagger, clearProps: 'opacity,transform' }
+    : { opacity: 1, filter: 'blur(0px)', duration, ease: EASE.signature, clearProps: 'opacity,filter' };
+  const enterFrom = stagger ? { opacity: 0, y: -6 } : { opacity: 0, filter: 'blur(8px)' };
+  const shape = shapeOf(surface, origin);
+  if (!shape || !origin) {
+    const rise = gsap
+      .timeline({
+        onComplete: () => {
+          running.delete(surface);
+        },
+      })
+      .fromTo(
+        surface,
+        { opacity: 0, scale: 0.92 },
+        { opacity: 1, scale: 1, duration: TIMING.dialog.fallback, ease: 'power2.out', clearProps: 'opacity,transform' },
+      );
+    if (parts.length) rise.fromTo(parts, enterFrom, { ...enter, duration: Math.min(enter.duration, TIMING.dialog.fallback) }, 0);
+    running.set(surface, rise);
+    return rise;
+  }
+  const list = Boolean(stagger);
+  if (!list) shareInto(origin, surface, duration);
+  const { face, copy } = faceOf(surface, origin, shape, list);
+  const group = list ? null : groupOf(surface, parts, shape);
+  if (hideOrigin && compact(origin)) origin.setAttribute(HIDDEN_ORIGIN, '');
+  const finish = () => {
+    face.remove();
+    running.delete(surface);
+    gsap.set(surface, { clearProps: 'transform,clipPath,willChange' });
+    if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,transformOrigin,filter' });
+  };
+  const timeline = gsap
+    .timeline({ onComplete: finish, onInterrupt: finish })
+    .fromTo(
+      surface,
+      { x: shape.x, y: shape.y, clipPath: shape.from, willChange: 'transform,clip-path' },
+      { x: 0, y: 0, clipPath: shape.to, duration, ease: EASE.signature },
+      0,
+    )
+    // The opener's colour hands over early, so a light button never flashes over a dark form.
+    .to(face, { opacity: 0, duration: TIMING.dialog.surfaceColor, ease: EASE.signature }, 0);
+  if (copy) timeline.to(copy, { opacity: 0, duration: 0.25, ease: 'power2.out' }, 0.05);
+  if (parts.length) {
+    if (group) {
+      timeline.fromTo(
+        parts,
+        { ...group, opacity: 0, filter: 'blur(8px)' },
+        { x: 0, y: 0, scaleX: 1, scaleY: 1, opacity: 1, filter: 'blur(0px)', duration, ease: EASE.signature },
+        0,
+      );
+    } else timeline.fromTo(parts, enterFrom, enter, duration * 0.2);
+  }
+  running.set(surface, timeline);
+  return timeline;
+}
+
+export interface MorphCloseOptions {
+  duration?: number;
+  content?: string;
+  liquid?: boolean;
+}
+
+/**
+ * Fold `surface` back into `origin`, then call `onComplete` (which hides it).
+ * Without an opener on screen it closes in place: 90 % scale, 32 px blur.
+ */
+export function morphClose(surface: HTMLElement, origin: HTMLElement | null, onComplete: () => void, options: MorphCloseOptions = {}) {
+  registerMotion();
+  const { duration = TIMING.dialog.close, content, liquid = false } = options;
+  stop(surface);
+  if (reduced()) {
+    onComplete();
+    return null;
+  }
+  const parts = partsOf(surface, content);
+  const shape = shapeOf(surface, origin);
+  if (!shape || !origin) {
+    const fade = gsap
+      .timeline({
+        onComplete: () => {
+          running.delete(surface);
+          onComplete();
+          gsap.set(surface, { clearProps: 'opacity,transform' });
+          if (parts.length) gsap.set(parts, { clearProps: 'filter' });
+        },
+      })
+      .to(surface, { scale: 0.9, duration, ease: EASE.signature }, 0)
+      .to(surface, { opacity: 0, duration, ease: EASE.fadeAway }, 0);
+    if (parts.length) fade.to(parts, { filter: 'blur(32px)', duration, ease: EASE.blurAway }, 0);
+    running.set(surface, fade);
+    return fade;
+  }
+  const list = content !== undefined;
+  if (liquid && !list) {
+    liquidClose(surface, origin, parts, onComplete);
+    return null;
+  }
+  const { face, copy } = faceOf(surface, origin, shape, list);
+  gsap.set(copy ? [face, copy] : face, { opacity: 0 });
+  if (!list) {
+    // The shape folds back into the opener and takes its colour (0.5 s); the
+    // content heads for the opener on a 2 s path while it fades and blurs away
+    // within the 0.5 s, and the surface fades out (power3.in).
+    shareBack(surface, origin, duration);
+    const group = groupOf(surface, parts, shape);
+    const signature = gsap.parseEase(EASE.signature);
+    const toward = (progress: number) => signature(progress * (duration / TIMING.dialog.contentReturn));
+    const timeline = gsap
+      .timeline({
+        onComplete: () => {
+          running.delete(surface);
+          onComplete();
+          face.remove();
+          gsap.set(surface, { clearProps: 'transform,clipPath,opacity,willChange' });
+          if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,transformOrigin,filter,borderRadius' });
+        },
+        onInterrupt: () => {
+          face.remove();
+          if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,transformOrigin,filter,borderRadius' });
+        },
+      })
+      .fromTo(
+        surface,
+        { clipPath: shape.to, willChange: 'transform,clip-path' },
+        { x: shape.x, y: shape.y, clipPath: shape.from, duration, ease: EASE.signature },
+        0,
+      )
+      .to(face, { opacity: 1, duration, ease: EASE.signature }, 0)
+      .to(surface, { opacity: 0, duration, ease: 'power3.in' }, 0);
+    if (parts.length) {
+      timeline
+        .to(parts, { ...group, duration, ease: toward }, 0)
+        // Stepbro rounds the content toward a 400 px radius while it fades and blurs.
+        .to(parts, { opacity: 0, borderRadius: '400px', duration, ease: EASE.fadeAway }, 0)
+        .to(parts, { filter: 'blur(32px)', duration, ease: EASE.blurAway }, 0);
+    }
+    running.set(surface, timeline);
+    return timeline;
+  }
+  // A list: its content dissolves while the shape travels back and takes the label back.
+  const timeline = gsap
+    .timeline({
+      onComplete: () => {
+        running.delete(surface);
+        onComplete();
+        face.remove();
+        gsap.set(surface, { clearProps: 'transform,clipPath,willChange' });
+        if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,filter' });
+      },
+      onInterrupt: () => {
+        face.remove();
+        if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,filter' });
+      },
+    })
+    .fromTo(
+      surface,
+      { clipPath: shape.to, willChange: 'transform,clip-path' },
+      { x: shape.x, y: shape.y, clipPath: shape.from, duration, ease: EASE.signature },
+      0,
+    )
+    .to(face, { opacity: 1, duration: duration * 0.5, ease: 'power1.in' }, duration * 0.3);
+  if (parts.length) timeline.to(parts, { opacity: 0, filter: 'blur(32px)', duration: duration * 0.7, ease: 'power2.in' }, 0);
+  if (copy) timeline.to(copy, { opacity: 1, duration: duration * 0.3, ease: 'power1.in' }, duration * 0.65);
+  running.set(surface, timeline);
+  return timeline;
+}
+
+/**
+ * Close a modal at once (focus returns, the page takes input) while an inert
+ * copy folds back into the opener over a fading veil. `inPlace` (after a drag)
+ * closes it where it was dropped instead of folding into the opener.
+ */
+export function morphCloseWithGhost(
+  surface: HTMLElement,
+  origin: HTMLElement | null,
+  { inPlace = false, liquid = false }: { inPlace?: boolean; liquid?: boolean } = {},
+) {
+  registerMotion();
+  const dragged = inPlace
+    ? {
+        x: Number(gsap.getProperty(surface, 'x')) || 0,
+        y: Number(gsap.getProperty(surface, 'y')) || 0,
+        scale: Number(gsap.getProperty(surface, 'scaleX')) || 1,
+      }
+    : null;
+  if (dragged) gsap.set(surface, { clearProps: 'transform' });
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) {
+    showOrigin(origin);
+    releaseShared(origin);
+    return;
+  }
+  // The veil copies the modal's backdrop (tint and blur) and fades with the copy.
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  showOrigin(origin, { fade: true });
+  gsap.to(veil, { opacity: 0, duration: TIMING.dialog.close, ease: 'power3.in' });
+  if (dragged) gsap.set(ghost, { ...dragged, transformOrigin: getComputedStyle(surface).transformOrigin });
+  morphClose(
+    ghost,
+    dragged ? null : origin,
+    () => {
+      showOrigin(origin);
+      releaseShared(origin);
+      ghost.remove();
+      veil.remove();
+    },
+    { liquid },
+  );
+}

package/src/motion/reveal.ts

@@ -0,0 +1,112 @@
+import { gsap, registerMotion } from '../core/gsap';
+import { reduced } from '../core/reduced';
+import { pointer } from '../core/pointer';
+import { TIMING } from '../core/timing';
+
+/*
+ * Stepbro's reveal (PrettyCalendarMenu, Nav, SupportModal): a veil in the
+ * surface's own colour covers it and a round opening grows from the origin,
+ * uncovering the content like a wave; then the veil fades. Overshoot 2 lets the
+ * opening pass the far corner halfway through, so the end is soft.
+ */
+
+export type RevealSpeed = keyof typeof TIMING.reveal;
+
+export interface RevealOptions {
+  /** Element (its centre) or viewport point. Default: the last pointer position, else the centre. */
+  origin?: Element | { x: number; y: number } | null;
+  speed?: RevealSpeed;
+  delay?: number;
+  overshoot?: number;
+  /** Veil colour. Default: the first opaque background up the tree, else var(--mk-bg). */
+  fill?: string;
+}
+
+export interface RevealHandle {
+  timeline: gsap.core.Timeline;
+  finished: Promise<void>;
+  /** Stop now and remove the veil. */
+  cancel(): void;
+}
+
+const TRANSPARENT = /^(transparent|rgba\(0, 0, 0, 0\))$/;
+
+function backgroundOf(el: Element): string {
+  for (let node: Element | null = el; node; node = node.parentElement) {
+    const color = getComputedStyle(node).backgroundColor;
+    if (color && !TRANSPARENT.test(color)) return color;
+  }
+  return 'var(--mk-bg, #fff)';
+}
+
+export function revealFrom(target: HTMLElement, options: RevealOptions = {}): RevealHandle | null {
+  if (reduced() || !target.isConnected) return null;
+  registerMotion();
+  const { speed = 'normal', delay = 0, overshoot = 2 } = options;
+  const style = getComputedStyle(target);
+  const fill = options.fill ?? backgroundOf(target);
+  const position = target.style.position;
+  if (style.position === 'static') target.style.position = 'relative';
+
+  const box = target.getBoundingClientRect();
+  const width = target.clientWidth;
+  const height = target.clientHeight;
+  let point: { x: number; y: number } | null = null;
+  const origin = options.origin;
+  if (origin instanceof Element) {
+    if (origin.isConnected) {
+      const rect = origin.getBoundingClientRect();
+      point = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+  } else if (origin) point = origin;
+  else if (origin === undefined && pointer.active) point = { x: pointer.x, y: pointer.y };
+  const x = point ? point.x - box.left - target.clientLeft : width / 2;
+  const y = point ? point.y - box.top - target.clientTop : height / 2;
+  const radius =
+    Math.max(Math.hypot(x, y), Math.hypot(width - x, y), Math.hypot(x, height - y), Math.hypot(width - x, height - y)) * overshoot;
+
+  const veil = document.createElement('div');
+  veil.setAttribute('aria-hidden', 'true');
+  veil.dataset.mkVeil = '';
+  Object.assign(veil.style, {
+    position: 'absolute',
+    top: `${target.scrollTop}px`,
+    left: `${target.scrollLeft}px`,
+    width: `${width}px`,
+    height: `${height}px`,
+    borderRadius: style.borderRadius,
+    pointerEvents: 'none',
+    zIndex: '1000',
+  });
+  const progress = { value: 0 };
+  const paint = () => {
+    veil.style.background = `radial-gradient(${radius}px at ${x}px ${y}px, transparent 0%, ${fill} ${progress.value}%)`;
+  };
+  paint();
+  target.append(veil);
+
+  let done = false;
+  let resolve!: () => void;
+  const finished = new Promise<void>((r) => (resolve = r));
+  const cleanup = () => {
+    if (done) return;
+    done = true;
+    veil.remove();
+    target.style.position = position;
+    resolve();
+  };
+  const [duration, fade] = TIMING.reveal[speed];
+  const timeline = gsap
+    .timeline({ delay, onComplete: cleanup, onInterrupt: cleanup })
+    .to(progress, { value: 100, duration, ease: 'power2.out', onUpdate: paint }, 0)
+    .to(veil, { opacity: 0, duration: fade, ease: 'power1.out' }, Math.max(0, duration * Math.min(1, 1 / overshoot) - 0.1));
+
+  return {
+    timeline,
+    finished,
+    cancel() {
+      timeline.kill();
+      cleanup();
+    },
+  };
+}