@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/motion/confetti.ts

@@ -0,0 +1,130 @@
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+
+/*
+ * Dousan's success confetti: 45 paper pieces burst from a point (2–8 px a
+ * frame, a little upward), fall with gravity .15, slow by .98 a frame, spin and
+ * fade (.015–.03 a frame). Physics per 60 fps frame, scaled by the real frame
+ * time. The canvas is decorative and removes itself when the last piece fades.
+ */
+
+export interface ConfettiOptions {
+  count?: number;
+  /** Default: the theme's primary, tertiary, secondary and containers. */
+  colors?: string[];
+  /** Draw inside this (positioned) element instead of over the whole window. */
+  container?: HTMLElement | null;
+}
+
+export interface ConfettiHandle {
+  stop(): void;
+  finished: Promise<void>;
+}
+
+const FALLBACK = ['#3DDC84', '#A3E8C1', '#E8D0A3', '#1A73E8', '#8AB4F8'];
+const ROLES = ['primary', 'tertiary', 'secondary', 'primary-container', 'tertiary-container'];
+const between = ([min, max]: readonly [number, number]) => min + Math.random() * (max - min);
+
+function themeColors(from: Element) {
+  const style = getComputedStyle(from);
+  const colors = ROLES.map((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).filter(Boolean);
+  return colors.length ? colors : FALLBACK;
+}
+
+export function confetti(origin?: Element | { x: number; y: number } | null, options: ConfettiOptions = {}): ConfettiHandle {
+  const idle: ConfettiHandle = { stop() {}, finished: Promise.resolve() };
+  if (typeof document === 'undefined' || reduced()) return idle;
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) return idle;
+  const config = TIMING.confetti;
+  const container = options.container ?? null;
+  const box = container ? container.getBoundingClientRect() : { left: 0, top: 0, width: innerWidth, height: innerHeight };
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = Math.max(1, Math.round(box.width * ratio));
+  canvas.height = Math.max(1, Math.round(box.height * ratio));
+  canvas.setAttribute('aria-hidden', 'true');
+  canvas.dataset.mkConfetti = '';
+  Object.assign(canvas.style, {
+    position: container ? 'absolute' : 'fixed',
+    inset: '0',
+    width: container ? '100%' : '100vw',
+    height: container ? '100%' : '100vh',
+    zIndex: '2147483647',
+    pointerEvents: 'none',
+  });
+  context.scale(ratio, ratio);
+
+  let x = box.width / 2;
+  let y = box.height / 2;
+  if (origin instanceof Element) {
+    const rect = origin.getBoundingClientRect();
+    x = rect.left + rect.width / 2 - box.left;
+    y = rect.top + rect.height / 2 - box.top;
+  } else if (origin) {
+    x = origin.x - box.left;
+    y = origin.y - box.top;
+  }
+  const colors = options.colors?.length
+    ? options.colors
+    : themeColors(origin instanceof Element ? origin : (container ?? document.documentElement));
+  const pieces = Array.from({ length: options.count ?? config.count }, () => {
+    const angle = Math.random() * Math.PI * 2;
+    const speed = between(config.speed);
+    return {
+      x,
+      y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed - config.lift,
+      radius: between(config.radius),
+      color: colors[Math.floor(Math.random() * colors.length)]!,
+      alpha: 1,
+      decay: between(config.decay),
+      rotation: Math.random() * 360,
+      spin: (Math.random() * 2 - 1) * config.spin,
+    };
+  });
+
+  let frame = 0;
+  let last = 0;
+  let stopped = false;
+  let resolve!: () => void;
+  const finished = new Promise<void>((done) => (resolve = done));
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    cancelAnimationFrame(frame);
+    canvas.remove();
+    resolve();
+  };
+  const draw = (now: number) => {
+    const f = last ? Math.min((now - last) / (1000 / 60), 3) : 1;
+    last = now;
+    context.clearRect(0, 0, box.width, box.height);
+    let alive = false;
+    const drag = Math.pow(config.drag, f);
+    for (const piece of pieces) {
+      if (piece.alpha <= 0) continue;
+      alive = true;
+      piece.x += piece.vx * f;
+      piece.y += piece.vy * f;
+      piece.vy += config.gravity * f;
+      piece.vx *= drag;
+      piece.vy *= drag;
+      piece.alpha -= piece.decay * f;
+      piece.rotation += piece.spin * f;
+      context.save();
+      context.translate(piece.x, piece.y);
+      context.rotate((piece.rotation * Math.PI) / 180);
+      context.globalAlpha = Math.max(0, piece.alpha);
+      context.fillStyle = piece.color;
+      context.fillRect(-piece.radius, -piece.radius / 2, piece.radius * 2, piece.radius);
+      context.restore();
+    }
+    if (alive && !stopped) frame = requestAnimationFrame(draw);
+    else stop();
+  };
+  (container ?? document.body).append(canvas);
+  frame = requestAnimationFrame(draw);
+  return { stop, finished };
+}

package/src/motion/count.ts

@@ -0,0 +1,95 @@
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+import { requestFrame } from '../core/frame';
+
+/*
+ * Numbers that count to their new value: Stepbro's animated number (`numberSoft`,
+ * 0.6 s; 0.7 s on prices) and the onboarding's revealed balance (rAF, 0.9 s,
+ * ease-out cubic). Both continue from the value currently shown.
+ */
+
+export type NumberFormat = (value: number) => string;
+export interface CountOptions {
+  /** Start value. Default: the last value counted on this element, else the number in its text. */
+  from?: number;
+  duration?: number;
+  format?: NumberFormat;
+}
+
+const shown = new WeakMap<Element, number>();
+const tweens = new WeakMap<Element, gsap.core.Tween>();
+const frames = new WeakMap<Element, () => void>();
+const defaultFormat: NumberFormat = (value) => String(Math.round(value));
+
+function current(el: Element): number {
+  const known = shown.get(el);
+  if (known !== undefined) return known;
+  const parsed = Number((el.textContent ?? '').replace(/[^\d.-]/g, ''));
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+/** Tween a plain number (no DOM): `onUpdate` gets each value. Reduced motion jumps to `to`. */
+export function tweenNumber(from: number, to: number, onUpdate: (value: number) => void, { duration = TIMING.number }: { duration?: number } = {}) {
+  registerMotion();
+  if (from === to || reduced()) {
+    onUpdate(to);
+    return null;
+  }
+  const state = { value: from };
+  return gsap.to(state, { value: to, duration, ease: EASE.flow, onUpdate: () => onUpdate(state.value), onComplete: () => onUpdate(to) });
+}
+
+export function countTo(el: HTMLElement, to: number, { from, duration = TIMING.number, format = defaultFormat }: CountOptions = {}) {
+  registerMotion();
+  tweens.get(el)?.kill();
+  const start = from ?? current(el);
+  const write = (value: number) => {
+    shown.set(el, value);
+    el.textContent = format(value);
+  };
+  if (start === to || reduced()) {
+    write(to);
+    return null;
+  }
+  const state = { value: start };
+  const tween = gsap.to(state, {
+    value: to,
+    duration,
+    ease: EASE.flow,
+    onUpdate: () => write(state.value),
+    onComplete: () => {
+      write(to);
+      tweens.delete(el);
+    },
+  });
+  tweens.set(el, tween);
+  return tween;
+}
+
+/** Count with requestAnimationFrame and ease-out cubic. Returns a cancel function. */
+export function revealCounter(el: HTMLElement, to: number, { from, duration = TIMING.revealCounter, format = defaultFormat }: CountOptions = {}) {
+  frames.get(el)?.();
+  const start = from ?? current(el);
+  const write = (value: number) => {
+    shown.set(el, value);
+    el.textContent = format(value);
+  };
+  if (start === to || reduced()) {
+    write(to);
+    return () => {};
+  }
+  let began: number | null = null;
+  let cancel = () => {};
+  const step = (time: number) => {
+    began ??= time;
+    const progress = Math.min(1, (time - began) / (duration * 1000));
+    write(start + (to - start) * (1 - (1 - progress) ** 3));
+    if (progress < 1) cancel = requestFrame(step);
+    else frames.delete(el);
+  };
+  cancel = requestFrame(step);
+  const stop = () => cancel();
+  frames.set(el, stop);
+  return stop;
+}

package/src/motion/details.ts

@@ -0,0 +1,70 @@
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+
+/*
+ * Stepbro's PrettyDetails: a disclosure grows to its content's height while the
+ * content fades in, and folds back to its summary (0.32 s, signature). A
+ * `[data-mk-chevron]` inside the summary turns 180° in 0.25 s.
+ */
+
+const running = new WeakMap<HTMLDetailsElement, gsap.core.Timeline>();
+
+export function toggleDetails(details: HTMLDetailsElement, open: boolean, { duration = TIMING.details }: { duration?: number } = {}) {
+  registerMotion();
+  const summary = details.querySelector<HTMLElement>(':scope > summary');
+  const chevron = summary?.querySelector<HTMLElement>('[data-mk-chevron]');
+  running.get(details)?.kill();
+  if (!summary || reduced()) {
+    details.open = open;
+    if (chevron) gsap.set(chevron, { rotation: open ? 180 : 0 });
+    return null;
+  }
+  const from = details.offsetHeight;
+  const content = [...details.children].filter((child): child is HTMLElement => child !== summary && child instanceof HTMLElement);
+  // Both ends measured without painting them; it stays open while it animates.
+  details.style.height = '';
+  details.open = false;
+  const closed = details.offsetHeight;
+  details.open = true;
+  const to = open ? details.offsetHeight : closed;
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      if (!open) details.open = false;
+      gsap.set(details, { clearProps: 'height,overflow,boxSizing' });
+      gsap.set(content, { clearProps: 'opacity' });
+      running.delete(details);
+    },
+  });
+  if (from !== to) {
+    timeline.fromTo(details, { height: from, overflow: 'hidden', boxSizing: 'border-box' }, { height: to, duration, ease: EASE.signature }, 0);
+  }
+  timeline.fromTo(content, { opacity: open ? 0 : 1 }, { opacity: open ? 1 : 0, duration, ease: EASE.signature }, 0);
+  if (chevron) timeline.to(chevron, { rotation: open ? 180 : 0, duration: TIMING.chevron, ease: EASE.signature }, 0);
+  running.set(details, timeline);
+  return timeline;
+}
+
+/**
+ * Animate every disclosure under `root` with one listener. Controls inside a
+ * summary keep their clicks; `data-mk-motion="none"` opts a disclosure out.
+ * Returns the function that removes the listener.
+ */
+export function installDetailsMotion(root: Document | HTMLElement = document): () => void {
+  const onClick = (event: Event) => {
+    const mouse = event as MouseEvent;
+    if (mouse.defaultPrevented || mouse.button !== 0) return;
+    const target = mouse.target instanceof Element ? mouse.target : null;
+    const summary = target?.closest('summary');
+    const details = summary?.parentElement;
+    if (!summary || !(details instanceof HTMLDetailsElement)) return;
+    if (details.querySelector(':scope > summary') !== summary) return;
+    if (details.dataset.mkMotion === 'none') return;
+    const control = target?.closest('a, button, input, select, textarea');
+    if (control && control !== summary && summary.contains(control)) return;
+    mouse.preventDefault();
+    toggleDetails(details, !details.open);
+  };
+  root.addEventListener('click', onClick);
+  return () => root.removeEventListener('click', onClick);
+}

package/src/motion/drag-dismiss.ts

@@ -0,0 +1,231 @@
+import { gsap, registerMotion } from '../core/gsap';
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+
+/*
+ * Stepbro's modal drag (ported from Kayro): a surface follows a drag (or a pull
+ * with the wheel) at half speed and shrinks as it goes down (1 − y/400); past
+ * 100 px it is dismissed, otherwise it springs back (elastic.out(.5,.5), 0.5 s).
+ * A drag starts after 6 px, ignores controls, scrollable areas that can still
+ * scroll, popovers and [data-mk-no-drag]; with a [data-mk-drag-handle] only the
+ * handle drags. The wheel dismisses at speed 1.5 past 16 px, or past 100 px.
+ */
+
+const START = 6;
+const FOLLOW = 0.5;
+const DISMISS = 100;
+const SHRINK = 400;
+const WHEEL_SPEED = 1.5;
+const WHEEL_MIN = 16;
+const WHEEL_IDLE = 90;
+const WHEEL_COOLDOWN = 250;
+const CONTROLS = [
+  'a[href]',
+  'button',
+  'input',
+  'select',
+  'textarea',
+  'label',
+  'summary',
+  '[contenteditable="true"]',
+  '[role="button"]',
+  '[role="slider"]',
+  '[role="combobox"]',
+  '[role="option"]',
+  '[role="checkbox"]',
+  '[role="menuitem"]',
+].join(',');
+
+/** The nearest element between `target` and `surface` that scrolls vertically. */
+function scrollerOf(target: EventTarget | null, surface: HTMLElement) {
+  let element = target instanceof Element ? target : null;
+  while (element) {
+    if (element.scrollHeight > element.clientHeight + 1) {
+      const overflow = getComputedStyle(element).overflowY;
+      if (overflow === 'auto' || overflow === 'scroll') return element;
+    }
+    if (element === surface) break;
+    element = element.parentElement;
+  }
+  return null;
+}
+
+const draggableFrom = (target: EventTarget | null, surface: HTMLElement) =>
+  target instanceof Element &&
+  !target.closest('[data-mk-no-drag], [popover]') &&
+  !target.closest(CONTROLS) &&
+  !(surface.querySelector('[data-mk-drag-handle]') && !target.closest('[data-mk-drag-handle]'));
+
+export interface DragDismissOptions {
+  /** Whether a gesture may start now (not while opening, saving or floating). */
+  canDrag?: () => boolean;
+  onDismiss: () => void;
+}
+
+/** Let `surface` be dragged away. Returns the function that detaches it. */
+export function attachDragDismiss(surface: HTMLElement, { canDrag = () => true, onDismiss }: DragDismissOptions) {
+  registerMotion();
+  let pointer: number | null = null;
+  let startX = 0;
+  let startY = 0;
+  let mode: 'drag' | 'scroll' | null = null;
+  let pulled = 0;
+  let base = { x: 0, y: 0, scale: 1 };
+  let target: EventTarget | null = null;
+
+  const noSelect = (event: Event) => event.preventDefault();
+  const begin = () => {
+    mode = 'drag';
+    gsap.killTweensOf(surface, 'x,y,scale');
+    base = {
+      x: Number(gsap.getProperty(surface, 'x')) || 0,
+      y: Number(gsap.getProperty(surface, 'y')) || 0,
+      scale: Number(gsap.getProperty(surface, 'scaleX')) || 1,
+    };
+    window.getSelection?.()?.removeAllRanges();
+    document.body.style.userSelect = 'none';
+    document.addEventListener('selectstart', noSelect);
+  };
+  const follow = (dx: number, dy: number) => {
+    pulled = dy * FOLLOW;
+    gsap.set(surface, { x: base.x + dx * FOLLOW, y: base.y + pulled, scale: Math.max(0.1, base.scale * (1 - pulled / SHRINK)) });
+  };
+  const restore = () => gsap.to(surface, { x: 0, y: 0, scale: 1, duration: TIMING.drag.restore, ease: 'elastic.out(0.5,0.5)' });
+  const release = () => {
+    document.removeEventListener('selectstart', noSelect);
+    document.body.style.userSelect = '';
+    const dismiss = pulled > DISMISS;
+    mode = null;
+    pulled = 0;
+    if (dismiss) onDismiss();
+    else restore();
+  };
+
+  const onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0 || pointer !== null || reduced() || !canDrag()) return;
+    if (!draggableFrom(event.target, surface)) return;
+    pointer = event.pointerId;
+    target = event.target;
+    startX = event.clientX;
+    startY = event.clientY;
+    mode = null;
+    pulled = 0;
+  };
+  const onPointerMove = (event: PointerEvent) => {
+    if (event.pointerId !== pointer || mode === 'scroll') return;
+    const dx = event.clientX - startX;
+    const dy = event.clientY - startY;
+    if (mode === null) {
+      if (Math.abs(dx) < START && Math.abs(dy) < START) return;
+      if (event.pointerType !== 'mouse') {
+        // A touch decides between scrolling the content and dragging the surface.
+        const scroller = scrollerOf(target, surface);
+        if (scroller && Math.abs(dx) < Math.abs(dy) && !(dy > 0 && scroller.scrollTop <= 0)) {
+          mode = 'scroll';
+          return;
+        }
+      }
+      begin();
+    }
+    if (event.cancelable) event.preventDefault();
+    follow(dx, dy);
+  };
+  const onPointerUp = (event: PointerEvent) => {
+    if (event.pointerId !== pointer) return;
+    pointer = null;
+    target = null;
+    if (mode !== 'drag') {
+      mode = null;
+      return;
+    }
+    // The click that ends a drag does not reach what is under the pointer.
+    const swallow = (click: Event) => {
+      click.stopPropagation();
+      click.preventDefault();
+    };
+    window.addEventListener('click', swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 50);
+    release();
+  };
+
+  // Pulling down with the wheel (scrolling up past the top) drags it as well.
+  let wheeling = false;
+  let wheelPull = 0;
+  let wheelSpeed = 0;
+  let lastWheel = 0;
+  let idle: ReturnType<typeof setTimeout> | undefined;
+  let quietUntil = 0;
+  const deltaOf = (event: WheelEvent) =>
+    event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * innerHeight : event.deltaY;
+  function endWheel(dismiss: boolean, at: number) {
+    window.removeEventListener('wheel', onWheelCapture, { capture: true });
+    clearTimeout(idle);
+    wheeling = false;
+    quietUntil = at + WHEEL_COOLDOWN;
+    pulled = 0;
+    wheelPull = 0;
+    wheelSpeed = 0;
+    lastWheel = 0;
+    document.body.style.userSelect = '';
+    if (dismiss) onDismiss();
+    else restore();
+  }
+  function stepWheel(event: WheelEvent) {
+    const amount = -deltaOf(event);
+    const elapsed = lastWheel ? Math.max(1, event.timeStamp - lastWheel) : 16;
+    lastWheel = event.timeStamp;
+    wheelSpeed = wheelSpeed * 0.4 + (amount / elapsed) * 0.6;
+    wheelPull = Math.max(0, wheelPull + amount);
+    follow(0, wheelPull);
+    if ((wheelSpeed > WHEEL_SPEED && pulled > WHEEL_MIN) || pulled > DISMISS) {
+      endWheel(true, event.timeStamp);
+      return;
+    }
+    clearTimeout(idle);
+    idle = setTimeout(() => wheeling && endWheel(false, performance.now()), WHEEL_IDLE);
+  }
+  function onWheelCapture(event: WheelEvent) {
+    if (!wheeling) return;
+    event.preventDefault();
+    event.stopPropagation();
+    stepWheel(event);
+  }
+  const onWheel = (event: WheelEvent) => {
+    if (wheeling || reduced() || !canDrag()) return;
+    const up = deltaOf(event) < 0;
+    const scroller = scrollerOf(event.target, surface);
+    const canScroll = scroller
+      ? up
+        ? scroller.scrollTop > 0
+        : scroller.scrollTop + scroller.clientHeight < scroller.scrollHeight - 1
+      : false;
+    if (canScroll || !up || event.timeStamp < quietUntil) return;
+    if (event.target instanceof Element && event.target.closest('[data-mk-no-drag], [popover]')) return;
+    event.preventDefault();
+    wheeling = true;
+    wheelPull = 0;
+    wheelSpeed = 0;
+    lastWheel = 0;
+    begin();
+    mode = null;
+    window.addEventListener('wheel', onWheelCapture, { passive: false, capture: true });
+    stepWheel(event);
+  };
+
+  surface.addEventListener('pointerdown', onPointerDown);
+  window.addEventListener('pointermove', onPointerMove, { passive: false });
+  window.addEventListener('pointerup', onPointerUp);
+  window.addEventListener('pointercancel', onPointerUp);
+  surface.addEventListener('wheel', onWheel, { passive: false });
+  return () => {
+    surface.removeEventListener('pointerdown', onPointerDown);
+    window.removeEventListener('pointermove', onPointerMove);
+    window.removeEventListener('pointerup', onPointerUp);
+    window.removeEventListener('pointercancel', onPointerUp);
+    surface.removeEventListener('wheel', onWheel);
+    window.removeEventListener('wheel', onWheelCapture, { capture: true });
+    clearTimeout(idle);
+    document.removeEventListener('selectstart', noSelect);
+    document.body.style.userSelect = '';
+  };
+}

package/src/motion/effects.ts

@@ -0,0 +1,81 @@
+import { reduced } from '../core/reduced';
+import { TIMING } from '../core/timing';
+import { warnOnce } from '../core/types';
+
+/*
+ * Play Stepbro's utility animations (css/effects/anim.css) from code: animate()
+ * restarts one even when it is already playing and resolves when it ends;
+ * leave() plays an exit and then removes (or hides) the element.
+ */
+
+export const ANIMATIONS = [
+  'out',
+  'out-left',
+  'out-bottom',
+  'collapse',
+  'highlight',
+  'shake',
+  'shake-strong',
+  'fade',
+  'wipe',
+  'progress-in',
+] as const;
+export type AnimationName = (typeof ANIMATIONS)[number];
+export type ExitName = 'out' | 'out-left' | 'out-bottom' | 'collapse';
+
+const EXITS = new Set<AnimationName>(['out', 'out-left', 'out-bottom', 'collapse']);
+
+export interface AnimateOptions {
+  signal?: AbortSignal;
+}
+
+export function animate(el: Element, name: AnimationName, { signal }: AnimateOptions = {}): Promise<void> {
+  const className = `mk-anim-${name}`;
+  if (!ANIMATIONS.includes(name)) {
+    warnOnce(`animate: unknown animation "${String(name)}" (use ${ANIMATIONS.join(', ')})`);
+    return Promise.resolve();
+  }
+  if (reduced()) return Promise.resolve();
+  const element = el as HTMLElement;
+  if (name === 'collapse') element.style.setProperty('--mk-collapse-from', `${element.offsetHeight}px`);
+  // Off, reflow, on: the browser starts the animation over.
+  element.classList.remove(className);
+  void element.offsetWidth;
+  element.classList.add(className);
+  return new Promise((resolve) => {
+    const finish = (keep: boolean) => {
+      element.removeEventListener('animationend', onEnd);
+      signal?.removeEventListener('abort', onAbort);
+      clearTimeout(timer);
+      if (!keep) element.classList.remove(className);
+      resolve();
+    };
+    const onEnd = (event: Event) => {
+      if ((event as AnimationEvent).animationName === `mk-${name}`) finish(EXITS.has(name));
+    };
+    const onAbort = () => finish(false);
+    element.addEventListener('animationend', onEnd);
+    signal?.addEventListener('abort', onAbort, { once: true });
+    const timer = setTimeout(() => finish(EXITS.has(name)), TIMING.effects[name] * 1000 + 100);
+    if (signal?.aborted) onAbort();
+  });
+}
+
+export interface LeaveOptions {
+  /** Remove the element (default) or hide it. */
+  remove?: boolean;
+}
+
+export async function leave(el: Element, name: ExitName, { remove = true }: LeaveOptions = {}): Promise<void> {
+  const focused = el.contains(document.activeElement) ? (document.activeElement as HTMLElement) : null;
+  await animate(el, name);
+  focused?.blur();
+  if (remove) {
+    el.remove();
+    return;
+  }
+  (el as HTMLElement).hidden = true;
+  el.classList.remove(`mk-anim-${name}`);
+  (el as HTMLElement).style.removeProperty('--mk-collapse-from');
+  if (el.getAttribute('style') === '') el.removeAttribute('style');
+}

package/src/motion/entrances.ts

@@ -0,0 +1,27 @@
+import { TIMING } from '../core/timing';
+import { flowIn } from './flow';
+
+/*
+ * Named entrances from Stepbro (money/replication-catalog.json): the same
+ * flowIn with each surface's own scale, blur and rhythm.
+ */
+
+/** Navigation menu options: grow from 90 % out of 4 px blur, last first, after 0.1 s. */
+export const flowInMenu = (targets: gsap.TweenTarget) =>
+  flowIn(targets, { style: 2, startScale: 0.9, blur: 4, reverse: true, autoAlpha: false, ...TIMING.menu });
+
+/** Theme picker swatches: pop in from half size, 10 ms apart. */
+export const flowInPalette = (targets: gsap.TweenTarget) =>
+  flowIn(targets, { style: 2, startScale: 0.5, blur: 4, autoAlpha: false, ...TIMING.palette });
+
+/** Form cards (`[data-flow-item]`): grow from 90 % out of 8 px blur. */
+export const flowInForm = (targets: gsap.TweenTarget) =>
+  flowIn(targets, { style: 2, startScale: 0.9, blur: 8, ...TIMING.form });
+
+/** Landing pieces: grow from 85 % out of 24 px blur, after 0.15 s. */
+export const flowInLanding = (targets: gsap.TweenTarget) =>
+  flowIn(targets, { style: 2, startScale: 0.85, blur: 24, ...TIMING.landing });
+
+/** Long-form content (`[data-flow]`, markdown blocks): style 2, 0.6 s, 60 ms apart. */
+export const flowInContent = (root: Element) =>
+  flowIn(root, { style: 2, target: '[data-flow], .markdown-content > *', ...TIMING.content });