@framesquared/fx 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 John Carbone
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+/**
+ * @framesquared/fx – Animation
+ *
+ * Wraps the Web Animations API (Element.animate()).  Provides a
+ * config-driven interface with play/pause/cancel/finish/reverse
+ * controls and a finished promise.
+ */
+interface AnimationConfig {
+    target: Element;
+    keyframes: Keyframe[];
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    iterations?: number;
+    direction?: PlaybackDirection;
+    fill?: FillMode;
+}
+declare class Animation {
+    private target;
+    private keyframes;
+    private options;
+    private waAnimation;
+    /** Resolves when the animation completes. */
+    finished: Promise<void>;
+    private _resolveFinished;
+    constructor(config: AnimationConfig);
+    play(): this;
+    pause(): this;
+    cancel(): this;
+    finish(): this;
+    reverse(): this;
+    getPlayState(): string;
+    get currentTime(): number | null;
+    get playbackRate(): number;
+    set playbackRate(rate: number);
+    /** Get the underlying WAAPI Animation object. */
+    getNative(): globalThis.Animation | null;
+}
+
+/**
+ * @framesquared/fx – Anim
+ *
+ * Convenience factory for predefined animations.  Each method
+ * returns an Animation instance.  Also provides queue() for
+ * sequential and parallel() for simultaneous execution.
+ */
+
+interface AnimOptions {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    fill?: FillMode;
+}
+interface SlideOptions extends AnimOptions {
+}
+interface HighlightOptions extends AnimOptions {
+    color?: string;
+}
+interface ScaleOptions extends AnimOptions {
+    from?: number;
+    to?: number;
+}
+interface RotateOptions extends AnimOptions {
+    degrees?: number;
+}
+declare const Anim: {
+    fadeIn(el: Element, opts?: AnimOptions): Animation;
+    fadeOut(el: Element, opts?: AnimOptions): Animation;
+    slideIn(el: Element, direction?: "left" | "right" | "top" | "bottom", opts?: SlideOptions): Animation;
+    slideOut(el: Element, direction?: "left" | "right" | "top" | "bottom", opts?: SlideOptions): Animation;
+    highlight(el: Element, opts?: HighlightOptions): Animation;
+    scale(el: Element, opts?: ScaleOptions): Animation;
+    rotate(el: Element, opts?: RotateOptions): Animation;
+    shake(el: Element, opts?: AnimOptions): Animation;
+    pulse(el: Element, opts?: AnimOptions): Animation;
+    flip(el: Element, opts?: AnimOptions): Animation;
+    queue(animations: Animation[]): Promise<void>;
+    parallel(animations: Animation[]): Promise<void>;
+};
+
+/**
+ * @framesquared/fx – Easing
+ *
+ * Named CSS easing strings.  Standard names map to CSS keywords;
+ * extended names map to cubic-bezier() values.  Bounce easings
+ * use linear() approximation since cubic-bezier can't represent them.
+ */
+declare const Easing: {
+    readonly linear: "linear";
+    readonly ease: "ease";
+    readonly easeIn: "ease-in";
+    readonly easeOut: "ease-out";
+    readonly easeInOut: "ease-in-out";
+    readonly easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)";
+    readonly easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+    readonly easeInOutQuad: "cubic-bezier(0.455, 0.03, 0.515, 0.955)";
+    readonly easeInCubic: "cubic-bezier(0.55, 0.055, 0.675, 0.19)";
+    readonly easeOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    readonly easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1)";
+    readonly easeInBack: "cubic-bezier(0.6, -0.28, 0.735, 0.045)";
+    readonly easeOutBack: "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+    readonly easeInOutBack: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    readonly easeInBounce: "cubic-bezier(0.6, 0.04, 0.98, 0.335)";
+    readonly easeOutBounce: "cubic-bezier(0.015, 0.66, 0.39, 0.995)";
+    readonly easeInOutBounce: "cubic-bezier(0.83, 0.04, 0.17, 1)";
+};
+type EasingName = keyof typeof Easing;
+
+/**
+ * @framesquared/fx – Transition
+ *
+ * CSS transition management: set/clear transitions on elements,
+ * and register transitionend callbacks with cleanup.
+ */
+declare const Transition: {
+    /**
+     * Set a CSS transition on an element.
+     * @param el Target element
+     * @param property CSS property name(s), comma-separated
+     * @param duration Duration in ms
+     * @param easing CSS easing string
+     */
+    set(el: HTMLElement, property: string, duration: number, easing?: string): void;
+    /** Remove all transitions from an element. */
+    clear(el: HTMLElement): void;
+    /**
+     * Register a callback for transitionend.  Returns a cleanup
+     * function that removes the listener.
+     */
+    onEnd(el: HTMLElement, callback: (e: Event) => void): () => void;
+};
+
+export { Anim, type AnimOptions, Animation, type AnimationConfig, Easing, type EasingName, Transition };

package/dist/index.js

@@ -0,0 +1,305 @@
+// src/Animation.ts
+var Animation = class {
+  target;
+  keyframes;
+  options;
+  waAnimation = null;
+  /** Resolves when the animation completes. */
+  finished;
+  _resolveFinished;
+  constructor(config) {
+    this.target = config.target;
+    this.keyframes = config.keyframes;
+    this.options = {
+      duration: config.duration ?? 300,
+      easing: config.easing ?? "ease",
+      delay: config.delay ?? 0,
+      iterations: config.iterations ?? 1,
+      direction: config.direction ?? "normal",
+      fill: config.fill ?? "none"
+    };
+    this.finished = new Promise((resolve) => {
+      this._resolveFinished = resolve;
+    });
+  }
+  play() {
+    this.waAnimation = this.target.animate(this.keyframes, this.options);
+    this.waAnimation.finished.then(() => this._resolveFinished()).catch(() => {
+    });
+    return this;
+  }
+  pause() {
+    this.waAnimation?.pause();
+    return this;
+  }
+  cancel() {
+    this.waAnimation?.cancel();
+    return this;
+  }
+  finish() {
+    this.waAnimation?.finish();
+    return this;
+  }
+  reverse() {
+    this.waAnimation?.reverse();
+    return this;
+  }
+  getPlayState() {
+    return this.waAnimation?.playState ?? "idle";
+  }
+  get currentTime() {
+    return this.waAnimation?.currentTime ?? null;
+  }
+  get playbackRate() {
+    return this.waAnimation?.playbackRate ?? 1;
+  }
+  set playbackRate(rate) {
+    if (this.waAnimation) this.waAnimation.playbackRate = rate;
+  }
+  /** Get the underlying WAAPI Animation object. */
+  getNative() {
+    return this.waAnimation;
+  }
+};
+
+// src/Anim.ts
+var Anim = {
+  // -----------------------------------------------------------------------
+  // Fade
+  // -----------------------------------------------------------------------
+  fadeIn(el, opts = {}) {
+    return new Animation({
+      target: el,
+      keyframes: [{ opacity: "0" }, { opacity: "1" }],
+      duration: opts.duration ?? 300,
+      easing: opts.easing ?? "ease",
+      delay: opts.delay ?? 0,
+      fill: opts.fill ?? "both"
+    });
+  },
+  fadeOut(el, opts = {}) {
+    return new Animation({
+      target: el,
+      keyframes: [{ opacity: "1" }, { opacity: "0" }],
+      duration: opts.duration ?? 300,
+      easing: opts.easing ?? "ease",
+      delay: opts.delay ?? 0,
+      fill: opts.fill ?? "both"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Slide
+  // -----------------------------------------------------------------------
+  slideIn(el, direction = "left", opts = {}) {
+    const transforms = {
+      left: "translateX(-100%)",
+      right: "translateX(100%)",
+      top: "translateY(-100%)",
+      bottom: "translateY(100%)"
+    };
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: transforms[direction], opacity: "0" },
+        { transform: "translateX(0) translateY(0)", opacity: "1" }
+      ],
+      duration: opts.duration ?? 400,
+      easing: opts.easing ?? "ease-out",
+      fill: opts.fill ?? "both"
+    });
+  },
+  slideOut(el, direction = "right", opts = {}) {
+    const transforms = {
+      left: "translateX(-100%)",
+      right: "translateX(100%)",
+      top: "translateY(-100%)",
+      bottom: "translateY(100%)"
+    };
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: "translateX(0) translateY(0)", opacity: "1" },
+        { transform: transforms[direction], opacity: "0" }
+      ],
+      duration: opts.duration ?? 400,
+      easing: opts.easing ?? "ease-in",
+      fill: opts.fill ?? "both"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Highlight
+  // -----------------------------------------------------------------------
+  highlight(el, opts = {}) {
+    const color = opts.color ?? "yellow";
+    return new Animation({
+      target: el,
+      keyframes: [
+        { backgroundColor: color },
+        { backgroundColor: "transparent" }
+      ],
+      duration: opts.duration ?? 1e3,
+      easing: opts.easing ?? "ease-in-out",
+      fill: opts.fill ?? "both"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Scale
+  // -----------------------------------------------------------------------
+  scale(el, opts = {}) {
+    const from = opts.from ?? 1;
+    const to = opts.to ?? 1.5;
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: `scale(${from})` },
+        { transform: `scale(${to})` }
+      ],
+      duration: opts.duration ?? 300,
+      easing: opts.easing ?? "ease",
+      fill: opts.fill ?? "both"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Rotate
+  // -----------------------------------------------------------------------
+  rotate(el, opts = {}) {
+    const degrees = opts.degrees ?? 360;
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: "rotate(0deg)" },
+        { transform: `rotate(${degrees}deg)` }
+      ],
+      duration: opts.duration ?? 500,
+      easing: opts.easing ?? "ease",
+      fill: opts.fill ?? "both"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Shake
+  // -----------------------------------------------------------------------
+  shake(el, opts = {}) {
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: "translateX(0)" },
+        { transform: "translateX(-10px)" },
+        { transform: "translateX(10px)" },
+        { transform: "translateX(-6px)" },
+        { transform: "translateX(6px)" },
+        { transform: "translateX(-2px)" },
+        { transform: "translateX(0)" }
+      ],
+      duration: opts.duration ?? 500,
+      easing: opts.easing ?? "ease-in-out"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Pulse
+  // -----------------------------------------------------------------------
+  pulse(el, opts = {}) {
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: "scale(1)" },
+        { transform: "scale(1.1)" },
+        { transform: "scale(1)" }
+      ],
+      duration: opts.duration ?? 600,
+      easing: opts.easing ?? "ease-in-out"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Flip
+  // -----------------------------------------------------------------------
+  flip(el, opts = {}) {
+    return new Animation({
+      target: el,
+      keyframes: [
+        { transform: "rotateY(0deg)" },
+        { transform: "rotateY(180deg)" }
+      ],
+      duration: opts.duration ?? 600,
+      easing: opts.easing ?? "ease-in-out",
+      fill: opts.fill ?? "both"
+    });
+  },
+  // -----------------------------------------------------------------------
+  // Queue — run animations sequentially
+  // -----------------------------------------------------------------------
+  async queue(animations) {
+    for (const anim of animations) {
+      anim.play();
+      await anim.finished;
+    }
+  },
+  // -----------------------------------------------------------------------
+  // Parallel — run animations simultaneously
+  // -----------------------------------------------------------------------
+  async parallel(animations) {
+    for (const anim of animations) {
+      anim.play();
+    }
+    await Promise.all(animations.map((a) => a.finished));
+  }
+};
+
+// src/Easing.ts
+var Easing = {
+  // CSS keywords
+  linear: "linear",
+  ease: "ease",
+  easeIn: "ease-in",
+  easeOut: "ease-out",
+  easeInOut: "ease-in-out",
+  // Quadratic
+  easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+  easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  easeInOutQuad: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+  // Cubic
+  easeInCubic: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
+  easeOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+  easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1)",
+  // Back (overshoot)
+  easeInBack: "cubic-bezier(0.6, -0.28, 0.735, 0.045)",
+  easeOutBack: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  easeInOutBack: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  // Bounce (approximated — true bounce can't be expressed as cubic-bezier)
+  easeInBounce: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
+  easeOutBounce: "cubic-bezier(0.015, 0.66, 0.39, 0.995)",
+  easeInOutBounce: "cubic-bezier(0.83, 0.04, 0.17, 1)"
+};
+
+// src/Transition.ts
+var Transition = {
+  /**
+   * Set a CSS transition on an element.
+   * @param el Target element
+   * @param property CSS property name(s), comma-separated
+   * @param duration Duration in ms
+   * @param easing CSS easing string
+   */
+  set(el, property, duration, easing = "ease") {
+    const props = property.split(",").map((p) => p.trim());
+    el.style.transition = props.map((p) => `${p} ${duration}ms ${easing}`).join(", ");
+  },
+  /** Remove all transitions from an element. */
+  clear(el) {
+    el.style.transition = "";
+  },
+  /**
+   * Register a callback for transitionend.  Returns a cleanup
+   * function that removes the listener.
+   */
+  onEnd(el, callback) {
+    el.addEventListener("transitionend", callback);
+    return () => el.removeEventListener("transitionend", callback);
+  }
+};
+export {
+  Anim,
+  Animation,
+  Easing,
+  Transition
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Animation.ts","../src/Anim.ts","../src/Easing.ts","../src/Transition.ts"],"sourcesContent":["/**\n * @framesquared/fx – Animation\n *\n * Wraps the Web Animations API (Element.animate()).  Provides a\n * config-driven interface with play/pause/cancel/finish/reverse\n * controls and a finished promise.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport interface AnimationConfig {\n  target: Element;\n  keyframes: Keyframe[];\n  duration?: number;\n  easing?: string;\n  delay?: number;\n  iterations?: number;\n  direction?: PlaybackDirection;\n  fill?: FillMode;\n}\n\nexport class Animation {\n  private target: Element;\n  private keyframes: Keyframe[];\n  private options: KeyframeAnimationOptions;\n  private waAnimation: globalThis.Animation | null = null;\n\n  /** Resolves when the animation completes. */\n  finished: Promise<void>;\n  private _resolveFinished!: () => void;\n\n  constructor(config: AnimationConfig) {\n    this.target = config.target;\n    this.keyframes = config.keyframes;\n    this.options = {\n      duration: config.duration ?? 300,\n      easing: config.easing ?? 'ease',\n      delay: config.delay ?? 0,\n      iterations: config.iterations ?? 1,\n      direction: config.direction ?? 'normal',\n      fill: config.fill ?? 'none',\n    };\n    this.finished = new Promise<void>((resolve) => {\n      this._resolveFinished = resolve;\n    });\n  }\n\n  play(): this {\n    this.waAnimation = this.target.animate(this.keyframes, this.options);\n    // Wire the finished promise\n    this.waAnimation.finished\n      .then(() => this._resolveFinished())\n      .catch(() => { /* cancelled */ });\n    return this;\n  }\n\n  pause(): this {\n    this.waAnimation?.pause();\n    return this;\n  }\n\n  cancel(): this {\n    this.waAnimation?.cancel();\n    return this;\n  }\n\n  finish(): this {\n    this.waAnimation?.finish();\n    return this;\n  }\n\n  reverse(): this {\n    this.waAnimation?.reverse();\n    return this;\n  }\n\n  getPlayState(): string {\n    return this.waAnimation?.playState ?? 'idle';\n  }\n\n  get currentTime(): number | null {\n    return this.waAnimation?.currentTime as number | null ?? null;\n  }\n\n  get playbackRate(): number {\n    return this.waAnimation?.playbackRate ?? 1;\n  }\n\n  set playbackRate(rate: number) {\n    if (this.waAnimation) this.waAnimation.playbackRate = rate;\n  }\n\n  /** Get the underlying WAAPI Animation object. */\n  getNative(): globalThis.Animation | null {\n    return this.waAnimation;\n  }\n}\n","/**\n * @framesquared/fx – Anim\n *\n * Convenience factory for predefined animations.  Each method\n * returns an Animation instance.  Also provides queue() for\n * sequential and parallel() for simultaneous execution.\n */\n\nimport { Animation } from './Animation.js';\n\nexport interface AnimOptions {\n  duration?: number;\n  easing?: string;\n  delay?: number;\n  fill?: FillMode;\n}\n\ninterface SlideOptions extends AnimOptions {}\ninterface HighlightOptions extends AnimOptions { color?: string; }\ninterface ScaleOptions extends AnimOptions { from?: number; to?: number; }\ninterface RotateOptions extends AnimOptions { degrees?: number; }\n\nexport const Anim = {\n  // -----------------------------------------------------------------------\n  // Fade\n  // -----------------------------------------------------------------------\n\n  fadeIn(el: Element, opts: AnimOptions = {}): Animation {\n    return new Animation({\n      target: el,\n      keyframes: [{ opacity: '0' }, { opacity: '1' }],\n      duration: opts.duration ?? 300,\n      easing: opts.easing ?? 'ease',\n      delay: opts.delay ?? 0,\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  fadeOut(el: Element, opts: AnimOptions = {}): Animation {\n    return new Animation({\n      target: el,\n      keyframes: [{ opacity: '1' }, { opacity: '0' }],\n      duration: opts.duration ?? 300,\n      easing: opts.easing ?? 'ease',\n      delay: opts.delay ?? 0,\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Slide\n  // -----------------------------------------------------------------------\n\n  slideIn(el: Element, direction: 'left' | 'right' | 'top' | 'bottom' = 'left', opts: SlideOptions = {}): Animation {\n    const transforms: Record<string, string> = {\n      left: 'translateX(-100%)',\n      right: 'translateX(100%)',\n      top: 'translateY(-100%)',\n      bottom: 'translateY(100%)',\n    };\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: transforms[direction], opacity: '0' },\n        { transform: 'translateX(0) translateY(0)', opacity: '1' },\n      ],\n      duration: opts.duration ?? 400,\n      easing: opts.easing ?? 'ease-out',\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  slideOut(el: Element, direction: 'left' | 'right' | 'top' | 'bottom' = 'right', opts: SlideOptions = {}): Animation {\n    const transforms: Record<string, string> = {\n      left: 'translateX(-100%)',\n      right: 'translateX(100%)',\n      top: 'translateY(-100%)',\n      bottom: 'translateY(100%)',\n    };\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: 'translateX(0) translateY(0)', opacity: '1' },\n        { transform: transforms[direction], opacity: '0' },\n      ],\n      duration: opts.duration ?? 400,\n      easing: opts.easing ?? 'ease-in',\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Highlight\n  // -----------------------------------------------------------------------\n\n  highlight(el: Element, opts: HighlightOptions = {}): Animation {\n    const color = opts.color ?? 'yellow';\n    return new Animation({\n      target: el,\n      keyframes: [\n        { backgroundColor: color },\n        { backgroundColor: 'transparent' },\n      ],\n      duration: opts.duration ?? 1000,\n      easing: opts.easing ?? 'ease-in-out',\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Scale\n  // -----------------------------------------------------------------------\n\n  scale(el: Element, opts: ScaleOptions = {}): Animation {\n    const from = opts.from ?? 1;\n    const to = opts.to ?? 1.5;\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: `scale(${from})` },\n        { transform: `scale(${to})` },\n      ],\n      duration: opts.duration ?? 300,\n      easing: opts.easing ?? 'ease',\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Rotate\n  // -----------------------------------------------------------------------\n\n  rotate(el: Element, opts: RotateOptions = {}): Animation {\n    const degrees = opts.degrees ?? 360;\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: 'rotate(0deg)' },\n        { transform: `rotate(${degrees}deg)` },\n      ],\n      duration: opts.duration ?? 500,\n      easing: opts.easing ?? 'ease',\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Shake\n  // -----------------------------------------------------------------------\n\n  shake(el: Element, opts: AnimOptions = {}): Animation {\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: 'translateX(0)' },\n        { transform: 'translateX(-10px)' },\n        { transform: 'translateX(10px)' },\n        { transform: 'translateX(-6px)' },\n        { transform: 'translateX(6px)' },\n        { transform: 'translateX(-2px)' },\n        { transform: 'translateX(0)' },\n      ],\n      duration: opts.duration ?? 500,\n      easing: opts.easing ?? 'ease-in-out',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Pulse\n  // -----------------------------------------------------------------------\n\n  pulse(el: Element, opts: AnimOptions = {}): Animation {\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: 'scale(1)' },\n        { transform: 'scale(1.1)' },\n        { transform: 'scale(1)' },\n      ],\n      duration: opts.duration ?? 600,\n      easing: opts.easing ?? 'ease-in-out',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Flip\n  // -----------------------------------------------------------------------\n\n  flip(el: Element, opts: AnimOptions = {}): Animation {\n    return new Animation({\n      target: el,\n      keyframes: [\n        { transform: 'rotateY(0deg)' },\n        { transform: 'rotateY(180deg)' },\n      ],\n      duration: opts.duration ?? 600,\n      easing: opts.easing ?? 'ease-in-out',\n      fill: opts.fill ?? 'both',\n    });\n  },\n\n  // -----------------------------------------------------------------------\n  // Queue — run animations sequentially\n  // -----------------------------------------------------------------------\n\n  async queue(animations: Animation[]): Promise<void> {\n    for (const anim of animations) {\n      anim.play();\n      await anim.finished;\n    }\n  },\n\n  // -----------------------------------------------------------------------\n  // Parallel — run animations simultaneously\n  // -----------------------------------------------------------------------\n\n  async parallel(animations: Animation[]): Promise<void> {\n    for (const anim of animations) {\n      anim.play();\n    }\n    await Promise.all(animations.map(a => a.finished));\n  },\n};\n","/**\n * @framesquared/fx – Easing\n *\n * Named CSS easing strings.  Standard names map to CSS keywords;\n * extended names map to cubic-bezier() values.  Bounce easings\n * use linear() approximation since cubic-bezier can't represent them.\n */\n\nexport const Easing = {\n  // CSS keywords\n  linear: 'linear',\n  ease: 'ease',\n  easeIn: 'ease-in',\n  easeOut: 'ease-out',\n  easeInOut: 'ease-in-out',\n\n  // Quadratic\n  easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',\n  easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n  easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',\n\n  // Cubic\n  easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n  easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n  easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n\n  // Back (overshoot)\n  easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n  easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n\n  // Bounce (approximated — true bounce can't be expressed as cubic-bezier)\n  easeInBounce: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',\n  easeOutBounce: 'cubic-bezier(0.015, 0.66, 0.39, 0.995)',\n  easeInOutBounce: 'cubic-bezier(0.83, 0.04, 0.17, 1)',\n} as const;\n\nexport type EasingName = keyof typeof Easing;\n","/**\n * @framesquared/fx – Transition\n *\n * CSS transition management: set/clear transitions on elements,\n * and register transitionend callbacks with cleanup.\n */\n\nexport const Transition = {\n  /**\n   * Set a CSS transition on an element.\n   * @param el Target element\n   * @param property CSS property name(s), comma-separated\n   * @param duration Duration in ms\n   * @param easing CSS easing string\n   */\n  set(el: HTMLElement, property: string, duration: number, easing = 'ease'): void {\n    const props = property.split(',').map(p => p.trim());\n    el.style.transition = props\n      .map(p => `${p} ${duration}ms ${easing}`)\n      .join(', ');\n  },\n\n  /** Remove all transitions from an element. */\n  clear(el: HTMLElement): void {\n    el.style.transition = '';\n  },\n\n  /**\n   * Register a callback for transitionend.  Returns a cleanup\n   * function that removes the listener.\n   */\n  onEnd(el: HTMLElement, callback: (e: Event) => void): () => void {\n    el.addEventListener('transitionend', callback);\n    return () => el.removeEventListener('transitionend', callback);\n  },\n};\n"],"mappings":";AAqBO,IAAM,YAAN,MAAgB;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAA2C;AAAA;AAAA,EAGnD;AAAA,EACQ;AAAA,EAER,YAAY,QAAyB;AACnC,SAAK,SAAS,OAAO;AACrB,SAAK,YAAY,OAAO;AACxB,SAAK,UAAU;AAAA,MACb,UAAU,OAAO,YAAY;AAAA,MAC7B,QAAQ,OAAO,UAAU;AAAA,MACzB,OAAO,OAAO,SAAS;AAAA,MACvB,YAAY,OAAO,cAAc;AAAA,MACjC,WAAW,OAAO,aAAa;AAAA,MAC/B,MAAM,OAAO,QAAQ;AAAA,IACvB;AACA,SAAK,WAAW,IAAI,QAAc,CAAC,YAAY;AAC7C,WAAK,mBAAmB;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAEA,OAAa;AACX,SAAK,cAAc,KAAK,OAAO,QAAQ,KAAK,WAAW,KAAK,OAAO;AAEnE,SAAK,YAAY,SACd,KAAK,MAAM,KAAK,iBAAiB,CAAC,EAClC,MAAM,MAAM;AAAA,IAAkB,CAAC;AAClC,WAAO;AAAA,EACT;AAAA,EAEA,QAAc;AACZ,SAAK,aAAa,MAAM;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,SAAe;AACb,SAAK,aAAa,OAAO;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,SAAe;AACb,SAAK,aAAa,OAAO;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,UAAgB;AACd,SAAK,aAAa,QAAQ;AAC1B,WAAO;AAAA,EACT;AAAA,EAEA,eAAuB;AACrB,WAAO,KAAK,aAAa,aAAa;AAAA,EACxC;AAAA,EAEA,IAAI,cAA6B;AAC/B,WAAO,KAAK,aAAa,eAAgC;AAAA,EAC3D;AAAA,EAEA,IAAI,eAAuB;AACzB,WAAO,KAAK,aAAa,gBAAgB;AAAA,EAC3C;AAAA,EAEA,IAAI,aAAa,MAAc;AAC7B,QAAI,KAAK,YAAa,MAAK,YAAY,eAAe;AAAA,EACxD;AAAA;AAAA,EAGA,YAAyC;AACvC,WAAO,KAAK;AAAA,EACd;AACF;;;AC1EO,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA,EAKlB,OAAO,IAAa,OAAoB,CAAC,GAAc;AACrD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,SAAS,IAAI,GAAG,EAAE,SAAS,IAAI,CAAC;AAAA,MAC9C,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,OAAO,KAAK,SAAS;AAAA,MACrB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,QAAQ,IAAa,OAAoB,CAAC,GAAc;AACtD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,SAAS,IAAI,GAAG,EAAE,SAAS,IAAI,CAAC;AAAA,MAC9C,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,OAAO,KAAK,SAAS;AAAA,MACrB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,QAAQ,IAAa,YAAiD,QAAQ,OAAqB,CAAC,GAAc;AAChH,UAAM,aAAqC;AAAA,MACzC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,WAAW,SAAS,GAAG,SAAS,IAAI;AAAA,QACjD,EAAE,WAAW,+BAA+B,SAAS,IAAI;AAAA,MAC3D;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,SAAS,IAAa,YAAiD,SAAS,OAAqB,CAAC,GAAc;AAClH,UAAM,aAAqC;AAAA,MACzC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,+BAA+B,SAAS,IAAI;AAAA,QACzD,EAAE,WAAW,WAAW,SAAS,GAAG,SAAS,IAAI;AAAA,MACnD;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,IAAa,OAAyB,CAAC,GAAc;AAC7D,UAAM,QAAQ,KAAK,SAAS;AAC5B,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,iBAAiB,MAAM;AAAA,QACzB,EAAE,iBAAiB,cAAc;AAAA,MACnC;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAqB,CAAC,GAAc;AACrD,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,KAAK,KAAK,MAAM;AACtB,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,SAAS,IAAI,IAAI;AAAA,QAC9B,EAAE,WAAW,SAAS,EAAE,IAAI;AAAA,MAC9B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,IAAa,OAAsB,CAAC,GAAc;AACvD,UAAM,UAAU,KAAK,WAAW;AAChC,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,eAAe;AAAA,QAC5B,EAAE,WAAW,UAAU,OAAO,OAAO;AAAA,MACvC;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAoB,CAAC,GAAc;AACpD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,gBAAgB;AAAA,QAC7B,EAAE,WAAW,oBAAoB;AAAA,QACjC,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,kBAAkB;AAAA,QAC/B,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,gBAAgB;AAAA,MAC/B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAoB,CAAC,GAAc;AACpD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,WAAW;AAAA,QACxB,EAAE,WAAW,aAAa;AAAA,QAC1B,EAAE,WAAW,WAAW;AAAA,MAC1B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,KAAK,IAAa,OAAoB,CAAC,GAAc;AACnD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,gBAAgB;AAAA,QAC7B,EAAE,WAAW,kBAAkB;AAAA,MACjC;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,MAAM,YAAwC;AAClD,eAAW,QAAQ,YAAY;AAC7B,WAAK,KAAK;AACV,YAAM,KAAK;AAAA,IACb;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,SAAS,YAAwC;AACrD,eAAW,QAAQ,YAAY;AAC7B,WAAK,KAAK;AAAA,IACZ;AACA,UAAM,QAAQ,IAAI,WAAW,IAAI,OAAK,EAAE,QAAQ,CAAC;AAAA,EACnD;AACF;;;ACtNO,IAAM,SAAS;AAAA;AAAA,EAEpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA;AAAA,EAGX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA;AAAA,EAGf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA;AAAA,EAGhB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA;AAAA,EAGf,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AACnB;;;AC5BO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxB,IAAI,IAAiB,UAAkB,UAAkB,SAAS,QAAc;AAC9E,UAAM,QAAQ,SAAS,MAAM,GAAG,EAAE,IAAI,OAAK,EAAE,KAAK,CAAC;AACnD,OAAG,MAAM,aAAa,MACnB,IAAI,OAAK,GAAG,CAAC,IAAI,QAAQ,MAAM,MAAM,EAAE,EACvC,KAAK,IAAI;AAAA,EACd;AAAA;AAAA,EAGA,MAAM,IAAuB;AAC3B,OAAG,MAAM,aAAa;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAiB,UAA0C;AAC/D,OAAG,iBAAiB,iBAAiB,QAAQ;AAC7C,WAAO,MAAM,GAAG,oBAAoB,iBAAiB,QAAQ;AAAA,EAC/D;AACF;","names":[]}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@framesquared/fx",
+  "version": "0.1.0",
+  "description": "Animations and effects",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@framesquared/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit --project tsconfig.build.json"
+  }
+}