@redwilly/anima 0.1.2 → 0.1.22

package/dist/index.d.ts

@@ -275,6 +275,7 @@ declare class AnimationQueue {
     enqueueAnimation(animation: Animation<Mobject>): void;
     setLastDuration(seconds: number): void;
     setLastEasing(easing: EasingFunction): void;
+    setLastDelay(seconds: number): void;
     isEmpty(): boolean;
     popLastAnimation(): Animation<Mobject> | null;
     toAnimation(): Animation<Mobject>;
@@ -343,6 +344,7 @@ declare class Mobject {
     };
     duration(seconds: number): this;
     ease(easing: EasingFunction): this;
+    delay(seconds: number): this;
     toAnimation(): Animation<Mobject>;
     getQueuedDuration(): number;
     hasQueuedAnimations(): boolean;
@@ -1022,6 +1024,16 @@ declare class Scene {
      * Handles composition animations (Sequence, Parallel) by processing children.
      */
     private validateAndRegisterAnimation;
+    /**
+     * Checks if a Mobject is in the scene.
+     * An object is "in scene" if:
+     * - It's directly registered in this.mobjects, OR
+     * - Any ancestor in its parent chain is registered
+     *
+     * This respects the scene graph hierarchy - children of registered
+     * VGroups are implicitly in scene via their parent.
+     */
+    isInScene(mobject: Mobject): boolean;
     /**
      * Gets children of composition animations (Sequence, Parallel).
      * Returns empty array for non-composition animations.
@@ -1297,12 +1309,16 @@ declare class Text extends VGroup {
     readonly text: string;
     private style;
     private fontPath;
-    constructor(text: string, fontPath: string, options?: Partial<TextStyle>);
+    constructor(text: string, fontPath?: string, options?: Partial<TextStyle>);
     private buildGlyphs;
     private getCharacterForGlyph;
     private applyStyle;
     setStyle(options: Partial<TextStyle>): this;
     getStyle(): TextStyle;
+    /** Override stroke to propagate to all Glyph children. */
+    stroke(color: Color, width?: number): this;
+    /** Override fill to propagate to all Glyph children. */
+    fill(color: Color, opacity?: number): this;
     getGlyph(index: number): Glyph | undefined;
 }
 
@@ -1578,66 +1594,61 @@ declare class MorphTo<T extends VMobject = VMobject> extends TransformativeAnima
 }
 
 /**
- * Animation that first draws the border progressively, then fills the shape.
- * The first 50% of the animation draws the stroke, the second 50% fades in the fill.
+ * Animation that first draws the stroke progressively, then fades in the fill.
+ * - First 50%: stroke draws progressively
+ * - Second 50%: fill fades in
  *
- * Supports VGroup (including Text): animates each child's paths progressively.
+ * - Single VMobject: stroke then fill
+ * - VGroup: all children animate together
+ * - Text (VGroup of Glyphs): Glyphs animate sequentially for handwriting effect
  *
  * This is an introductory animation - it auto-registers the target with the scene.
- *
- * @example
- * const rect = new Rectangle(2, 1);
- * scene.play(new Draw(rect));  // Border draws, then fill fades in
  */
 declare class Draw<T extends VMobject = VMobject> extends IntroductoryAnimation<T> {
-    private readonly isVGroup;
-    /** For non-VGroup targets: original paths on the target itself. */
     private readonly originalPaths;
-    private readonly originalFillOpacity;
     private readonly originalOpacity;
-    /** For VGroup targets: original state of each child. */
+    private readonly originalStrokeColor;
+    private readonly originalStrokeWidth;
+    private readonly originalFillColor;
+    private readonly originalFillOpacity;
     private readonly childStates;
+    /** Glyph states for Text children, keyed by the Text VMobject reference. */
+    private readonly glyphStates;
     constructor(target: T);
-    /** Interpolates stroke drawing (0-0.5) and then fill fade (0.5-1). */
+    private createState;
     interpolate(progress: number): void;
-    /** Interpolates a single VMobject (non-VGroup). */
-    private interpolateVMobject;
-    /** Interpolates a VGroup by animating each child's paths. */
     private interpolateVGroup;
+    private interpolateGlyphs;
+    /** Interpolates a single VMobject: stroke (0-0.5), then fill (0.5-1). */
+    private interpolateVMobject;
 }
 
 /**
- * Animation that progressively draws a VMobject's paths from start to end.
- * Preserves both stroke and fill properties - the complete object is visible at the end.
+ * Animation that progressively draws VMobject paths from start to end.
  *
- * This is the canonical animation for progressive path drawing.
- * At progress 0, nothing is shown. At progress 1, the complete path is shown.
- *
- * Supports VGroup (including Text): animates each child's paths progressively.
+ * - Single VMobject: paths draw progressively
+ * - VGroup: all children animate together with same progress
+ * - Text (VGroup of Glyphs): Glyphs animate sequentially for handwriting effect
  *
  * This is an introductory animation - it auto-registers the target with the scene.
- *
- * @example
- * const circle = new Circle(1);
- * scene.play(new Write(circle));  // Circle is drawn progressively
- *
- * const text = new Text('Hello');
- * scene.play(new Write(text));  // Text is written progressively
  */
 declare class Write<T extends VMobject = VMobject> extends IntroductoryAnimation<T> {
-    private readonly isVGroup;
-    /** For non-VGroup targets: original paths on the target itself. */
     private readonly originalPaths;
     private readonly originalOpacity;
+    private readonly originalStrokeColor;
+    private readonly originalStrokeWidth;
+    private readonly originalFillColor;
     private readonly originalFillOpacity;
-    /** For VGroup targets: original state of each child. */
     private readonly childStates;
+    /** Glyph states for Text children, keyed by the Text VMobject reference. */
+    private readonly glyphStates;
     constructor(target: T);
+    private createState;
     interpolate(progress: number): void;
-    /** Interpolates a single VMobject (non-VGroup). */
-    private interpolateVMobject;
-    /** Interpolates a VGroup by animating each child's paths. */
     private interpolateVGroup;
+    private interpolateGlyphs;
+    /** Applies progress to a single VMobject, updating its paths and style. */
+    private applyProgress;
 }
 
 /**
@@ -1901,21 +1912,6 @@ declare class Shake extends TransformativeAnimation<CameraFrame> {
     private noise;
 }
 
-/**
- * Scene serialization - the main entry point for serializing/deserializing Scenes.
- */
-
-/**
- * Serializes a Scene into a JSON-formatted string.
- *
- * Useful for saving scene state to a file or transmitting it over a network.
- */
-declare function serialize(scene: Scene): string;
-/**
- * Restores a complete Scene from a JSON-formatted string.
- */
-declare function deserialize(json: string): Scene;
-
 /**
  * Supported render output formats.
  * - sprite: PNG sequence (frame_0000.png, frame_0001.png, ...)
@@ -2083,4 +2079,4 @@ declare class ProgressReporter {
     complete(): void;
 }
 
-export { Animation, type AnimationConfig, Arc, Arrow, Camera, type CameraConfig, CameraFrame, Circle, Color, Draw, type EasingFunction, type EdgeConfig, FadeIn, FadeOut, Follow, FrameRenderer, Glyph, Graph, GraphEdge, GraphNode, type GraphNodeId, type Keyframe, KeyframeAnimation, KeyframeTrack, type LayoutConfig, type LayoutType, Line, Mobject, MorphTo, MoveTo, type NodeConfig, Parallel, Point, Polygon, type ProgressCallback, ProgressReporter, Rectangle, type RenderConfig, type RenderFormat, type RenderProgress, type RenderQuality, Renderer, Resolution, type ResolvedCameraConfig, Rotate, Scale, Scene, type SceneConfig, type ScheduledAnimation, Sequence, Shake, Text, type TextStyle, Timeline, type TimelineConfig, Unwrite, VGroup, VMobject, Vector2, Write, clearRegistry, smooth as defaultEasing, deserialize, doubleSmooth, easeInBack, easeInBounce, easeInCirc, easeInCubic, easeInElastic, easeInExpo, easeInOutBack, easeInOutBounce, easeInOutCirc, easeInOutCubic, easeInOutElastic, easeInOutExpo, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInQuad, easeInQuart, easeInQuint, easeInSine, easeOutBack, easeOutBounce, easeOutCirc, easeOutCubic, easeOutElastic, easeOutExpo, easeOutQuad, easeOutQuart, easeOutQuint, easeOutSine, exponentialDecay, getEasing, hasEasing, linear, lingering, notQuiteThere, registerEasing, runningStart, rushFrom, rushInto, serialize, slowInto, smooth, thereAndBack, thereAndBackWithPause, unregisterEasing, wiggle };
+export { Animation, type AnimationConfig, Arc, Arrow, Camera, type CameraConfig, CameraFrame, Circle, Color, Draw, type EasingFunction, type EdgeConfig, FadeIn, FadeOut, Follow, FrameRenderer, Glyph, Graph, GraphEdge, GraphNode, type GraphNodeId, type Keyframe, KeyframeAnimation, KeyframeTrack, type LayoutConfig, type LayoutType, Line, Mobject, MorphTo, MoveTo, type NodeConfig, Parallel, Point, Polygon, type ProgressCallback, ProgressReporter, Rectangle, type RenderConfig, type RenderFormat, type RenderProgress, type RenderQuality, Renderer, Resolution, type ResolvedCameraConfig, Rotate, Scale, Scene, type SceneConfig, type ScheduledAnimation, Sequence, Shake, Text, type TextStyle, Timeline, type TimelineConfig, Unwrite, VGroup, VMobject, Vector2, Write, clearRegistry, smooth as defaultEasing, doubleSmooth, easeInBack, easeInBounce, easeInCirc, easeInCubic, easeInElastic, easeInExpo, easeInOutBack, easeInOutBounce, easeInOutCirc, easeInOutCubic, easeInOutElastic, easeInOutExpo, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInQuad, easeInQuart, easeInQuint, easeInSine, easeOutBack, easeOutBounce, easeOutCirc, easeOutCubic, easeOutElastic, easeOutExpo, easeOutQuad, easeOutQuart, easeOutQuint, easeOutSine, exponentialDecay, getEasing, hasEasing, linear, lingering, notQuiteThere, registerEasing, runningStart, rushFrom, rushInto, slowInto, smooth, thereAndBack, thereAndBackWithPause, unregisterEasing, wiggle };

package/dist/index.js

@@ -978,6 +978,18 @@ var AnimationQueue = class {
       last.config.easing = easing;
     }
   }
+  setLastDelay(seconds) {
+    if (seconds < 0) {
+      throw new Error("Delay must be non-negative");
+    }
+    const last = this.queue[this.queue.length - 1];
+    if (!last) return;
+    if (isPrebuilt(last)) {
+      last.animation.delay(seconds);
+    } else {
+      last.config.delaySeconds = seconds;
+    }
+  }
   isEmpty() {
     return this.queue.length === 0;
   }
@@ -1228,6 +1240,10 @@ var Mobject = class {
     this.getQueue().setLastEasing(easing);
     return this;
   }
+  delay(seconds) {
+    this.getQueue().setLastDelay(seconds);
+    return this;
+  }
   toAnimation() {
     return this.getQueue().toAnimation();
   }
@@ -1944,12 +1960,34 @@ var Scene = class {
         if (target instanceof CameraFrame) {
           break;
         }
-        if (!this.mobjects.has(target)) {
+        if (!this.isInScene(target)) {
           throw new AnimationTargetNotInSceneError(anim, target);
         }
         break;
     }
   }
+  /**
+   * Checks if a Mobject is in the scene.
+   * An object is "in scene" if:
+   * - It's directly registered in this.mobjects, OR
+   * - Any ancestor in its parent chain is registered
+   *
+   * This respects the scene graph hierarchy - children of registered
+   * VGroups are implicitly in scene via their parent.
+   */
+  isInScene(mobject) {
+    if (this.mobjects.has(mobject)) {
+      return true;
+    }
+    let current = mobject.parent;
+    while (current !== null) {
+      if (this.mobjects.has(current)) {
+        return true;
+      }
+      current = current.parent;
+    }
+    return false;
+  }
   /**
    * Gets children of composition animations (Sequence, Parallel).
    * Returns empty array for non-composition animations.
@@ -2635,94 +2673,103 @@ function appendPartialCommand(result, cmd, cursor, subpathStart, localT) {
 function isVGroup(target) {
   return typeof target.getChildren === "function";
 }
+function isGlyph(target) {
+  return typeof target.character === "string";
+}
+function isText(target) {
+  if (!isVGroup(target)) return false;
+  const children = target.getChildren();
+  return children.length > 0 && children.every(isGlyph);
+}
 var Draw = class extends IntroductoryAnimation {
-  isVGroup;
-  /** For non-VGroup targets: original paths on the target itself. */
   originalPaths;
-  originalFillOpacity;
   originalOpacity;
-  /** For VGroup targets: original state of each child. */
+  originalStrokeColor;
+  originalStrokeWidth;
+  originalFillColor;
+  originalFillOpacity;
   childStates;
+  /** Glyph states for Text children, keyed by the Text VMobject reference. */
+  glyphStates = /* @__PURE__ */ new Map();
   constructor(target) {
     super(target);
-    this.isVGroup = isVGroup(target);
     this.originalOpacity = target.opacity;
+    this.originalStrokeColor = target.getStrokeColor();
+    this.originalStrokeWidth = target.getStrokeWidth();
+    this.originalFillColor = target.getFillColor();
     this.originalFillOpacity = target.getFillOpacity();
-    if (this.isVGroup && isVGroup(target)) {
+    if (isVGroup(target)) {
       this.originalPaths = [];
-      this.childStates = [];
-      for (const child of target.getChildren()) {
-        this.childStates.push({
-          child,
-          originalPaths: child.paths.map((p) => p.clone()),
-          originalOpacity: child.opacity,
-          originalFillOpacity: child.getFillOpacity()
-        });
-      }
+      this.childStates = target.getChildren().map((child) => this.createState(child));
     } else {
       this.originalPaths = target.paths.map((p) => p.clone());
       this.childStates = [];
     }
   }
-  /** Interpolates stroke drawing (0-0.5) and then fill fade (0.5-1). */
+  createState(child) {
+    const state = {
+      child,
+      paths: child.paths.map((p) => p.clone()),
+      opacity: child.opacity,
+      strokeColor: child.getStrokeColor(),
+      strokeWidth: child.getStrokeWidth(),
+      fillColor: child.getFillColor(),
+      fillOpacity: child.getFillOpacity()
+    };
+    if (isText(child)) {
+      this.glyphStates.set(child, child.getChildren().map((g) => this.createState(g)));
+    }
+    return state;
+  }
   interpolate(progress) {
-    if (this.isVGroup) {
-      this.interpolateVGroup(progress);
+    if (this.childStates.length === 0) {
+      this.interpolateVMobject(this.target, this.originalPaths, this.originalOpacity, this.originalStrokeColor, this.originalStrokeWidth, this.originalFillColor, this.originalFillOpacity, progress);
     } else {
-      this.interpolateVMobject(progress);
+      this.interpolateVGroup(progress);
     }
   }
-  /** Interpolates a single VMobject (non-VGroup). */
-  interpolateVMobject(progress) {
+  interpolateVGroup(progress) {
     const targetOpacity = this.originalOpacity === 0 ? 1 : this.originalOpacity;
+    this.target.setOpacity(progress <= 0 ? 0 : targetOpacity);
+    for (const state of this.childStates) {
+      const glyphStates = this.glyphStates.get(state.child);
+      if (glyphStates) {
+        state.child.setOpacity(progress <= 0 ? 0 : state.opacity || 1);
+        this.interpolateGlyphs(glyphStates, progress);
+      } else {
+        this.interpolateVMobject(state.child, state.paths, state.opacity, state.strokeColor, state.strokeWidth, state.fillColor, state.fillOpacity, progress);
+      }
+    }
+  }
+  interpolateGlyphs(glyphs, progress) {
+    const lagRatio = 0.2;
+    const totalSpan = 1 + (glyphs.length - 1) * lagRatio;
+    glyphs.forEach((state, i) => {
+      const start = i * lagRatio / totalSpan;
+      const end = (i * lagRatio + 1) / totalSpan;
+      const p = Math.max(0, Math.min(1, (progress - start) / (end - start)));
+      this.interpolateVMobject(state.child, state.paths, state.opacity, state.strokeColor, state.strokeWidth, state.fillColor, state.fillOpacity, p);
+    });
+  }
+  /** Interpolates a single VMobject: stroke (0-0.5), then fill (0.5-1). */
+  interpolateVMobject(target, originalPaths, originalOpacity, originalStrokeColor, originalStrokeWidth, originalFillColor, originalFillOpacity, progress) {
     if (progress <= 0) {
-      this.target.paths = [];
-      this.target.setOpacity(0);
-      this.target.fill(this.target.getFillColor(), 0);
+      target.paths = [];
+      target.setOpacity(0);
       return;
     }
-    this.target.setOpacity(targetOpacity);
+    const opacity = originalOpacity === 0 ? 1 : originalOpacity;
+    target.setOpacity(opacity);
     if (progress < 0.5) {
       const strokeProgress = progress * 2;
-      const partialPaths = [];
-      for (const originalPath of this.originalPaths) {
-        partialPaths.push(getPartialPath(originalPath, strokeProgress));
-      }
-      this.target.paths = partialPaths;
-      this.target.fill(this.target.getFillColor(), 0);
+      target.paths = originalPaths.map((p) => getPartialPath(p, strokeProgress));
+      target.stroke(originalStrokeColor, originalStrokeWidth);
+      target.fill(originalFillColor, 0);
     } else {
-      this.target.paths = this.originalPaths.map((p) => p.clone());
       const fillProgress = (progress - 0.5) * 2;
-      this.target.fill(this.target.getFillColor(), this.originalFillOpacity * fillProgress);
-    }
-  }
-  /** Interpolates a VGroup by animating each child's paths. */
-  interpolateVGroup(progress) {
-    const targetOpacity = this.originalOpacity === 0 ? 1 : this.originalOpacity;
-    this.target.setOpacity(progress <= 0 ? 0 : targetOpacity);
-    for (const state of this.childStates) {
-      const { child, originalPaths, originalOpacity, originalFillOpacity } = state;
-      const childOpacity = originalOpacity === 0 ? 1 : originalOpacity;
-      if (progress <= 0) {
-        child.paths = [];
-        child.setOpacity(0);
-        child.fill(child.getFillColor(), 0);
-        continue;
-      }
-      child.setOpacity(childOpacity);
-      if (progress < 0.5) {
-        const strokeProgress = progress * 2;
-        const partialPaths = [];
-        for (const originalPath of originalPaths) {
-          partialPaths.push(getPartialPath(originalPath, strokeProgress));
-        }
-        child.paths = partialPaths;
-        child.fill(child.getFillColor(), 0);
-      } else {
-        child.paths = originalPaths.map((p) => p.clone());
-        const fillProgress = (progress - 0.5) * 2;
-        child.fill(child.getFillColor(), originalFillOpacity * fillProgress);
-      }
+      target.paths = originalPaths.map((p) => p.clone());
+      target.stroke(originalStrokeColor, originalStrokeWidth);
+      target.fill(originalFillColor, originalFillOpacity * fillProgress);
     }
   }
 };
@@ -2731,87 +2778,97 @@ var Draw = class extends IntroductoryAnimation {
 function isVGroup2(target) {
   return typeof target.getChildren === "function";
 }
+function isGlyph2(target) {
+  return typeof target.character === "string";
+}
+function isText2(target) {
+  if (!isVGroup2(target)) return false;
+  const children = target.getChildren();
+  return children.length > 0 && children.every(isGlyph2);
+}
 var Write = class extends IntroductoryAnimation {
-  isVGroup;
-  /** For non-VGroup targets: original paths on the target itself. */
   originalPaths;
   originalOpacity;
+  originalStrokeColor;
+  originalStrokeWidth;
+  originalFillColor;
   originalFillOpacity;
-  /** For VGroup targets: original state of each child. */
   childStates;
+  /** Glyph states for Text children, keyed by the Text VMobject reference. */
+  glyphStates = /* @__PURE__ */ new Map();
   constructor(target) {
     super(target);
-    this.isVGroup = isVGroup2(target);
     this.originalOpacity = target.opacity;
+    this.originalStrokeColor = target.getStrokeColor();
+    this.originalStrokeWidth = target.getStrokeWidth();
+    this.originalFillColor = target.getFillColor();
     this.originalFillOpacity = target.getFillOpacity();
-    if (this.isVGroup && isVGroup2(target)) {
+    if (isVGroup2(target)) {
       this.originalPaths = [];
-      this.childStates = [];
-      for (const child of target.getChildren()) {
-        this.childStates.push({
-          child,
-          originalPaths: child.paths.map((p) => p.clone()),
-          originalOpacity: child.opacity,
-          originalFillOpacity: child.getFillOpacity()
-        });
-      }
+      this.childStates = target.getChildren().map((child) => this.createState(child));
     } else {
       this.originalPaths = target.paths.map((p) => p.clone());
       this.childStates = [];
     }
   }
-  interpolate(progress) {
-    if (this.isVGroup) {
-      this.interpolateVGroup(progress);
-    } else {
-      this.interpolateVMobject(progress);
+  createState(child) {
+    const state = {
+      child,
+      paths: child.paths.map((p) => p.clone()),
+      opacity: child.opacity,
+      strokeColor: child.getStrokeColor(),
+      strokeWidth: child.getStrokeWidth(),
+      fillColor: child.getFillColor(),
+      fillOpacity: child.getFillOpacity()
+    };
+    if (isText2(child)) {
+      this.glyphStates.set(child, child.getChildren().map((g) => this.createState(g)));
     }
+    return state;
   }
-  /** Interpolates a single VMobject (non-VGroup). */
-  interpolateVMobject(progress) {
-    if (progress <= 0) {
-      this.target.paths = [];
-      this.target.setOpacity(0);
-      return;
-    }
-    const targetOpacity = this.originalOpacity === 0 ? 1 : this.originalOpacity;
-    this.target.setOpacity(targetOpacity);
-    this.target.fill(this.target.getFillColor(), this.originalFillOpacity);
-    if (progress >= 1) {
-      this.target.paths = this.originalPaths.map((p) => p.clone());
-      return;
-    }
-    const partialPaths = [];
-    for (const originalPath of this.originalPaths) {
-      partialPaths.push(getPartialPath(originalPath, progress));
+  interpolate(progress) {
+    if (this.childStates.length === 0) {
+      this.applyProgress(this.target, this.originalPaths, this.originalOpacity, this.originalStrokeColor, this.originalStrokeWidth, this.originalFillColor, this.originalFillOpacity, progress);
+    } else {
+      this.interpolateVGroup(progress);
     }
-    this.target.paths = partialPaths;
   }
-  /** Interpolates a VGroup by animating each child's paths. */
   interpolateVGroup(progress) {
     const targetOpacity = this.originalOpacity === 0 ? 1 : this.originalOpacity;
     this.target.setOpacity(progress <= 0 ? 0 : targetOpacity);
     for (const state of this.childStates) {
-      const { child, originalPaths, originalOpacity, originalFillOpacity } = state;
-      if (progress <= 0) {
-        child.paths = [];
-        child.setOpacity(0);
-        continue;
-      }
-      const childOpacity = originalOpacity === 0 ? 1 : originalOpacity;
-      child.setOpacity(childOpacity);
-      child.fill(child.getFillColor(), originalFillOpacity);
-      if (progress >= 1) {
-        child.paths = originalPaths.map((p) => p.clone());
-        continue;
-      }
-      const partialPaths = [];
-      for (const originalPath of originalPaths) {
-        partialPaths.push(getPartialPath(originalPath, progress));
+      const glyphStates = this.glyphStates.get(state.child);
+      if (glyphStates) {
+        state.child.setOpacity(progress <= 0 ? 0 : state.opacity || 1);
+        this.interpolateGlyphs(glyphStates, progress);
+      } else {
+        this.applyProgress(state.child, state.paths, state.opacity, state.strokeColor, state.strokeWidth, state.fillColor, state.fillOpacity, progress);
       }
-      child.paths = partialPaths;
     }
   }
+  interpolateGlyphs(glyphs, progress) {
+    const lagRatio = 0.2;
+    const totalSpan = 1 + (glyphs.length - 1) * lagRatio;
+    glyphs.forEach((state, i) => {
+      const start = i * lagRatio / totalSpan;
+      const end = (i * lagRatio + 1) / totalSpan;
+      const p = Math.max(0, Math.min(1, (progress - start) / (end - start)));
+      this.applyProgress(state.child, state.paths, state.opacity, state.strokeColor, state.strokeWidth, state.fillColor, state.fillOpacity, p);
+    });
+  }
+  /** Applies progress to a single VMobject, updating its paths and style. */
+  applyProgress(target, originalPaths, originalOpacity, originalStrokeColor, originalStrokeWidth, originalFillColor, originalFillOpacity, progress) {
+    if (progress <= 0) {
+      target.paths = [];
+      target.setOpacity(0);
+      return;
+    }
+    const opacity = originalOpacity === 0 ? 1 : originalOpacity;
+    target.setOpacity(opacity);
+    target.stroke(originalStrokeColor, originalStrokeWidth);
+    target.fill(originalFillColor, originalFillOpacity);
+    target.paths = progress >= 1 ? originalPaths.map((p) => p.clone()) : originalPaths.map((p) => getPartialPath(p, progress));
+  }
 };
 
 // src/core/animations/draw/Unwrite.ts
@@ -3564,6 +3621,7 @@ var Glyph = class extends VMobject {
 
 // src/mobjects/text/Text.ts
 import * as fontkit from "fontkit";
+import { join, resolve } from "path";
 
 // src/mobjects/text/types.ts
 var DEFAULT_TEXT_STYLE = {
@@ -3572,6 +3630,7 @@ var DEFAULT_TEXT_STYLE = {
 };
 
 // src/mobjects/text/Text.ts
+var DEFAULT_FONT_PATH = resolve(join(__dirname, "..", "..", "fonts", "ComicSansMS3.ttf"));
 var Text = class extends VGroup {
   text;
   style;
@@ -3579,7 +3638,7 @@ var Text = class extends VGroup {
   constructor(text, fontPath, options = {}) {
     super();
     this.text = text;
-    this.fontPath = fontPath;
+    this.fontPath = fontPath ?? DEFAULT_FONT_PATH;
     this.style = { ...DEFAULT_TEXT_STYLE, ...options };
     this.buildGlyphs();
     centerGroup(this);
@@ -3614,8 +3673,8 @@ var Text = class extends VGroup {
   applyStyle() {
     for (const child of this.getChildren()) {
       if (child instanceof Glyph) {
-        child.stroke(this.style.color, 0);
-        child.fill(this.style.color, 1);
+        child.stroke(this.getStrokeColor(), this.getStrokeWidth());
+        child.fill(this.getFillColor(), this.getFillOpacity());
       }
     }
   }
@@ -3627,6 +3686,18 @@ var Text = class extends VGroup {
   getStyle() {
     return { ...this.style };
   }
+  /** Override stroke to propagate to all Glyph children. */
+  stroke(color, width = 2) {
+    super.stroke(color, width);
+    this.applyStyle();
+    return this;
+  }
+  /** Override fill to propagate to all Glyph children. */
+  fill(color, opacity) {
+    super.fill(color, opacity);
+    this.applyStyle();
+    return this;
+  }
   getGlyph(index) {
     const child = this.get(index);
     return child instanceof Glyph ? child : void 0;
@@ -4306,542 +4377,6 @@ var Shake = class extends TransformativeAnimation {
   }
 };
 
-// src/core/serialization/primitives.ts
-function serializeVector2(v) {
-  return { x: v.x, y: v.y };
-}
-function deserializeVector2(data) {
-  return new Vector2(data.x, data.y);
-}
-function serializeMatrix3x3(m) {
-  return { values: Array.from(m.values) };
-}
-function deserializeMatrix3x3(data) {
-  const values = new Float32Array(data.values);
-  return new Matrix3x3(values);
-}
-function serializeColor(c) {
-  return { r: c.r, g: c.g, b: c.b, a: c.a };
-}
-function deserializeColor(data) {
-  return new Color(data.r, data.g, data.b, data.a);
-}
-function serializePathCommand(cmd) {
-  const result = {
-    type: cmd.type,
-    end: serializeVector2(cmd.end)
-  };
-  const withControl1 = cmd.control1 ? { ...result, control1: serializeVector2(cmd.control1) } : result;
-  const withControl2 = cmd.control2 ? { ...withControl1, control2: serializeVector2(cmd.control2) } : withControl1;
-  return withControl2;
-}
-function serializeBezierPath(path) {
-  const commands = path.getCommands().map(serializePathCommand);
-  return { commands };
-}
-function deserializeBezierPath(data) {
-  const path = new BezierPath();
-  for (const cmd of data.commands) {
-    const end = deserializeVector2(cmd.end);
-    switch (cmd.type) {
-      case "Move":
-        path.moveTo(end);
-        break;
-      case "Line":
-        path.lineTo(end);
-        break;
-      case "Quadratic":
-        if (cmd.control1) {
-          path.quadraticTo(deserializeVector2(cmd.control1), end);
-        }
-        break;
-      case "Cubic":
-        if (cmd.control1 && cmd.control2) {
-          path.cubicTo(
-            deserializeVector2(cmd.control1),
-            deserializeVector2(cmd.control2),
-            end
-          );
-        }
-        break;
-      case "Close":
-        path.closePath();
-        break;
-    }
-  }
-  return path;
-}
-
-// src/core/serialization/registry.ts
-var registry = /* @__PURE__ */ new Map();
-function getSerializer(typeName) {
-  return registry.get(typeName);
-}
-
-// src/core/serialization/mobject.ts
-var idCounter = 0;
-var mobjectIdMap = /* @__PURE__ */ new WeakMap();
-function getMobjectId(m) {
-  let id = mobjectIdMap.get(m);
-  if (!id) {
-    id = `mob_${idCounter++}`;
-    mobjectIdMap.set(m, id);
-  }
-  return id;
-}
-function resetIdCounter() {
-  idCounter = 0;
-}
-function getMobjectType(m) {
-  if (m instanceof Circle) return "Circle";
-  if (m instanceof Rectangle) return "Rectangle";
-  if (m instanceof Arrow) return "Arrow";
-  if (m instanceof Line) return "Line";
-  if (m instanceof Arc) return "Arc";
-  if (m instanceof Polygon) return "Polygon";
-  if (m instanceof Point) return "Point";
-  if (m instanceof VGroup) return "VGroup";
-  if (m instanceof VMobject) return "VMobject";
-  return "Mobject";
-}
-function serializeMobjectBase(m) {
-  return {
-    type: getMobjectType(m),
-    id: getMobjectId(m),
-    matrix: serializeMatrix3x3(m.matrix),
-    opacity: m.opacity
-  };
-}
-function serializeVMobjectBase(v) {
-  const base = serializeMobjectBase(v);
-  return {
-    ...base,
-    paths: v.paths.map(serializeBezierPath),
-    strokeColor: serializeColor(v.getStrokeColor()),
-    strokeWidth: v.getStrokeWidth(),
-    fillColor: serializeColor(v.getFillColor()),
-    fillOpacity: v.getFillOpacity()
-  };
-}
-function serializeCircle(c) {
-  const base = serializeVMobjectBase(c);
-  const arc = c;
-  return { ...base, type: "Circle", radius: arc.radius };
-}
-function serializeRectangle(r) {
-  const base = serializeVMobjectBase(r);
-  return { ...base, type: "Rectangle", width: r.width, height: r.height };
-}
-function serializeLine(l) {
-  const base = serializeVMobjectBase(l);
-  return {
-    ...base,
-    type: "Line",
-    start: serializeVector2(l.start),
-    end: serializeVector2(l.end)
-  };
-}
-function serializeArc(a) {
-  const base = serializeVMobjectBase(a);
-  return {
-    ...base,
-    type: "Arc",
-    radius: a.radius,
-    startAngle: a.startAngle,
-    endAngle: a.endAngle
-  };
-}
-function serializePolygon(p) {
-  const base = serializeVMobjectBase(p);
-  return {
-    ...base,
-    type: "Polygon",
-    vertices: p.vertices.map(serializeVector2)
-  };
-}
-function serializePoint(p) {
-  const base = serializeVMobjectBase(p);
-  return { ...base, type: "Point" };
-}
-function serializeVGroup(g) {
-  const base = serializeMobjectBase(g);
-  return {
-    ...base,
-    type: "VGroup",
-    children: g.getChildren().map(serializeMobject)
-  };
-}
-function serializeMobject(m) {
-  const typeName = m.constructor.name;
-  const customSerializer = getSerializer(typeName);
-  if (customSerializer) {
-    return customSerializer.serialize(m);
-  }
-  if (m instanceof Circle) return serializeCircle(m);
-  if (m instanceof Rectangle) return serializeRectangle(m);
-  if (m instanceof Arrow) return serializeLine(m);
-  if (m instanceof Line) return serializeLine(m);
-  if (m instanceof Arc) return serializeArc(m);
-  if (m instanceof Polygon) return serializePolygon(m);
-  if (m instanceof Point) return serializePoint(m);
-  if (m instanceof VGroup) return serializeVGroup(m);
-  if (m instanceof VMobject) return serializeVMobjectBase(m);
-  return serializeMobjectBase(m);
-}
-function applyMobjectBase(m, data) {
-  const matrix = deserializeMatrix3x3(data.matrix);
-  m.applyMatrix(matrix);
-  m.setOpacity(data.opacity);
-}
-function applyVMobjectBase(v, data) {
-  applyMobjectBase(v, data);
-  v.paths = data.paths.map(deserializeBezierPath);
-  v.stroke(deserializeColor(data.strokeColor), data.strokeWidth);
-  v.fill(deserializeColor(data.fillColor), data.fillOpacity);
-}
-function deserializeMobject(data) {
-  const customSerializer = getSerializer(data.type);
-  if (customSerializer) {
-    return customSerializer.deserialize(data);
-  }
-  switch (data.type) {
-    case "Circle": {
-      const d = data;
-      const circle = new Circle(d.radius);
-      applyVMobjectBase(circle, d);
-      return circle;
-    }
-    case "Rectangle": {
-      const d = data;
-      const rect = new Rectangle(d.width, d.height);
-      applyVMobjectBase(rect, d);
-      return rect;
-    }
-    case "Line": {
-      const d = data;
-      const start = deserializeVector2(d.start);
-      const end = deserializeVector2(d.end);
-      const line = new Line(start.x, start.y, end.x, end.y);
-      applyVMobjectBase(line, d);
-      return line;
-    }
-    case "Arc": {
-      const d = data;
-      const arc = new Arc(d.radius, d.startAngle, d.endAngle);
-      applyVMobjectBase(arc, d);
-      return arc;
-    }
-    case "Polygon": {
-      const d = data;
-      const vertices = d.vertices.map(deserializeVector2);
-      const polygon = new Polygon(vertices);
-      applyVMobjectBase(polygon, d);
-      return polygon;
-    }
-    case "Point": {
-      const d = data;
-      const point = new Point();
-      applyVMobjectBase(point, d);
-      return point;
-    }
-    case "VGroup": {
-      const d = data;
-      const children = d.children.map(deserializeMobject);
-      const group = new VGroup(...children);
-      applyMobjectBase(group, d);
-      return group;
-    }
-    case "VMobject": {
-      const d = data;
-      const vmob = new VMobject();
-      applyVMobjectBase(vmob, d);
-      return vmob;
-    }
-    default: {
-      const mob = new VMobject();
-      if ("paths" in data) {
-        applyVMobjectBase(mob, data);
-      } else {
-        applyMobjectBase(mob, data);
-      }
-      return mob;
-    }
-  }
-}
-
-// src/core/serialization/easingLookup.ts
-var easingToName = /* @__PURE__ */ new Map();
-var nameToEasing = /* @__PURE__ */ new Map();
-function register(name, fn) {
-  easingToName.set(fn, name);
-  nameToEasing.set(name, fn);
-}
-register("linear", linear);
-register("easeInQuad", easeInQuad);
-register("easeOutQuad", easeOutQuad);
-register("easeInOutQuad", easeInOutQuad);
-register("easeInCubic", easeInCubic);
-register("easeOutCubic", easeOutCubic);
-register("easeInOutCubic", easeInOutCubic);
-register("easeInQuart", easeInQuart);
-register("easeOutQuart", easeOutQuart);
-register("easeInOutQuart", easeInOutQuart);
-register("easeInQuint", easeInQuint);
-register("easeOutQuint", easeOutQuint);
-register("easeInOutQuint", easeInOutQuint);
-register("easeInSine", easeInSine);
-register("easeOutSine", easeOutSine);
-register("easeInOutSine", easeInOutSine);
-register("easeInExpo", easeInExpo);
-register("easeOutExpo", easeOutExpo);
-register("easeInOutExpo", easeInOutExpo);
-register("easeInCirc", easeInCirc);
-register("easeOutCirc", easeOutCirc);
-register("easeInOutCirc", easeInOutCirc);
-register("easeInBack", easeInBack);
-register("easeOutBack", easeOutBack);
-register("easeInOutBack", easeInOutBack);
-register("easeInElastic", easeInElastic);
-register("easeOutElastic", easeOutElastic);
-register("easeInOutElastic", easeInOutElastic);
-register("easeInBounce", easeInBounce);
-register("easeOutBounce", easeOutBounce);
-register("easeInOutBounce", easeInOutBounce);
-register("smooth", smooth);
-register("doubleSmooth", doubleSmooth);
-register("rushInto", rushInto);
-register("rushFrom", rushFrom);
-register("slowInto", slowInto);
-register("thereAndBack", thereAndBack);
-register("wiggle", wiggle);
-register("lingering", lingering());
-register("runningStart", runningStart());
-function getEasingName(fn) {
-  return easingToName.get(fn) ?? "smooth";
-}
-function getEasingByName(name) {
-  return nameToEasing.get(name);
-}
-
-// src/core/serialization/animation.ts
-function serializeAnimationConfig(anim) {
-  return {
-    durationSeconds: anim.getDuration(),
-    delaySeconds: anim.getDelay(),
-    easingName: getEasingName(anim.getEasing())
-  };
-}
-function getAnimationType(anim) {
-  if (anim instanceof FadeIn) return "FadeIn";
-  if (anim instanceof FadeOut) return "FadeOut";
-  if (anim instanceof MoveTo) return "MoveTo";
-  if (anim instanceof Rotate) return "Rotate";
-  if (anim instanceof Scale) return "Scale";
-  if (anim instanceof MorphTo) return "MorphTo";
-  if (anim instanceof Draw) return "Draw";
-  if (anim instanceof Write) return "Write";
-  if (anim instanceof Unwrite) return "Unwrite";
-  if (anim instanceof Sequence) return "Sequence";
-  if (anim instanceof Parallel) return "Parallel";
-  return "Unknown";
-}
-function serializeAnimation(anim, getMobjectId2) {
-  const baseData = {
-    type: getAnimationType(anim),
-    targetId: getMobjectId2(anim.getTarget()),
-    config: serializeAnimationConfig(anim)
-  };
-  if (anim instanceof MoveTo) {
-    const moveData = {
-      ...baseData,
-      type: "MoveTo",
-      destination: serializeVector2(anim.getDestination())
-    };
-    return moveData;
-  }
-  if (anim instanceof Rotate) {
-    const rotateData = {
-      ...baseData,
-      type: "Rotate",
-      angle: anim.getAngle()
-    };
-    return rotateData;
-  }
-  if (anim instanceof Scale) {
-    const scaleData = {
-      ...baseData,
-      type: "Scale",
-      factor: anim.getFactor()
-    };
-    return scaleData;
-  }
-  if (anim instanceof Sequence) {
-    const seqData = {
-      ...baseData,
-      type: "Sequence",
-      animations: anim.getChildren().map((a) => serializeAnimation(a, getMobjectId2))
-    };
-    return seqData;
-  }
-  if (anim instanceof Parallel) {
-    const parData = {
-      ...baseData,
-      type: "Parallel",
-      animations: anim.getChildren().map((a) => serializeAnimation(a, getMobjectId2))
-    };
-    return parData;
-  }
-  return baseData;
-}
-function applyConfig(anim, config) {
-  anim.duration(config.durationSeconds);
-  anim.delay(config.delaySeconds);
-  const easing = getEasingByName(config.easingName);
-  if (easing) {
-    anim.ease(easing);
-  }
-}
-function deserializeAnimation(data, registry2) {
-  const target = registry2.get(data.targetId);
-  if (!target) {
-    throw new Error(`Mobject not found: ${data.targetId}`);
-  }
-  let anim;
-  switch (data.type) {
-    case "FadeIn":
-      anim = new FadeIn(target);
-      break;
-    case "FadeOut":
-      anim = new FadeOut(target);
-      break;
-    case "MoveTo": {
-      const d = data;
-      anim = new MoveTo(target, d.destination.x, d.destination.y);
-      break;
-    }
-    case "Rotate": {
-      const d = data;
-      anim = new Rotate(target, d.angle);
-      break;
-    }
-    case "Scale": {
-      const d = data;
-      anim = new Scale(target, d.factor);
-      break;
-    }
-    case "Create":
-      anim = new Write(target);
-      break;
-    case "Draw":
-      anim = new Draw(target);
-      break;
-    case "Write":
-      anim = new Write(target);
-      break;
-    case "Unwrite":
-      anim = new Unwrite(target);
-      break;
-    case "Sequence": {
-      const d = data;
-      const children = d.animations.map((a) => deserializeAnimation(a, registry2));
-      anim = new Sequence(children);
-      break;
-    }
-    case "Parallel": {
-      const d = data;
-      const children = d.animations.map((a) => deserializeAnimation(a, registry2));
-      anim = new Parallel(children);
-      break;
-    }
-    default:
-      throw new Error(`Unknown animation type: ${data.type}`);
-  }
-  applyConfig(anim, data.config);
-  return anim;
-}
-
-// src/core/serialization/scene.ts
-var SERIALIZATION_VERSION = "1.0.0";
-var serializationIdMap = /* @__PURE__ */ new Map();
-var serializationIdCounter = 0;
-function getSerializationId(m) {
-  let id = serializationIdMap.get(m);
-  if (!id) {
-    id = `mob_${serializationIdCounter++}`;
-    serializationIdMap.set(m, id);
-  }
-  return id;
-}
-function resetSerializationState() {
-  serializationIdMap.clear();
-  serializationIdCounter = 0;
-  resetIdCounter();
-}
-function serializeSceneConfig(scene) {
-  return {
-    width: scene.getWidth(),
-    height: scene.getHeight(),
-    backgroundColor: serializeColor(scene.getBackgroundColor()),
-    frameRate: scene.getFrameRate()
-  };
-}
-function serializeTimeline(scene) {
-  const timeline = scene.getTimeline();
-  const scheduled = timeline.getScheduled();
-  const serializedScheduled = scheduled.map((s) => ({
-    animation: serializeAnimation(s.animation, getSerializationId),
-    startTime: s.startTime
-  }));
-  return {
-    loop: timeline.isLooping(),
-    scheduled: serializedScheduled
-  };
-}
-function serializeScene(scene) {
-  resetSerializationState();
-  const mobjects = scene.getMobjects();
-  const serializedMobjects = mobjects.map((m) => serializeMobject(m));
-  return {
-    version: SERIALIZATION_VERSION,
-    config: serializeSceneConfig(scene),
-    mobjects: serializedMobjects,
-    timeline: serializeTimeline(scene)
-  };
-}
-function serialize(scene) {
-  const data = serializeScene(scene);
-  return JSON.stringify(data);
-}
-function deserializeScene(data) {
-  if (!data.version) {
-    throw new Error("Missing serialization version");
-  }
-  const scene = new Scene({
-    width: data.config.width,
-    height: data.config.height,
-    backgroundColor: deserializeColor(data.config.backgroundColor),
-    frameRate: data.config.frameRate
-  });
-  const mobjectRegistry = /* @__PURE__ */ new Map();
-  const mobjects = [];
-  for (const serializedMob of data.mobjects) {
-    const mob = deserializeMobject(serializedMob);
-    mobjectRegistry.set(serializedMob.id, mob);
-    mobjects.push(mob);
-  }
-  scene.add(...mobjects);
-  const timeline = scene.getTimeline();
-  for (const scheduled of data.timeline.scheduled) {
-    const animation = deserializeAnimation(scheduled.animation, mobjectRegistry);
-    timeline.schedule(animation, scheduled.startTime);
-  }
-  return scene;
-}
-function deserialize(json) {
-  const data = JSON.parse(json);
-  return deserializeScene(data);
-}
-
 // src/core/renderer/FrameRenderer.ts
 import { createCanvas } from "@napi-rs/canvas";
 
@@ -5048,7 +4583,7 @@ async function writePng(canvas, outputPath) {
 }
 
 // src/core/renderer/formats/sprite.ts
-import { join } from "path";
+import { join as join2 } from "path";
 function padNumber(n, length) {
   return n.toString().padStart(length, "0");
 }
@@ -5059,7 +4594,7 @@ async function renderSpriteSequence(frameRenderer, outputDir, frameRate, totalDu
     const time = frameIndex / frameRate;
     const canvas = frameRenderer.renderFrame(time);
     const filename = `frame_${padNumber(frameIndex, digitCount)}.png`;
-    const outputPath = join(outputDir, filename);
+    const outputPath = join2(outputDir, filename);
     await writePng(canvas, outputPath);
     progressReporter.reportFrame(frameIndex);
   }
@@ -5291,7 +4826,6 @@ export {
   Write,
   clearRegistry,
   smooth as defaultEasing,
-  deserialize,
   doubleSmooth,
   easeInBack,
   easeInBounce,
@@ -5333,7 +4867,6 @@ export {
   runningStart,
   rushFrom,
   rushInto,
-  serialize,
   slowInto,
   smooth,
   thereAndBack,

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@redwilly/anima",
-  "version": "0.1.2",
+  "version": "0.1.22",
   "description": "Animation library for mathematical visualizations",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/RedWilly/Anima.git"
+  },
+  "homepage": "https://github.com/RedWilly/Anima#readme",
+  "bugs": {
+    "url": "https://github.com/RedWilly/Anima/issues"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",