@mihirsarya/manim-scroll-runtime 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { NativeTextPlayer, registerNativeAnimation } from "./native-player";
 import type { ScrollAnimationOptions } from "./types";
-export type { RenderManifest, ScrollAnimationOptions, ScrollRange, ScrollRangePreset, ScrollRangeValue, } from "./types";
+export type { RenderManifest, ScrollAnimationOptions, ScrollRange, ScrollRangePreset, ScrollRangeValue, NativeAnimationOptions, } from "./types";
+export { NativeTextPlayer, registerNativeAnimation };
 export declare function registerScrollAnimation(options: ScrollAnimationOptions): Promise<() => void>;

package/dist/index.js

@@ -1,4 +1,6 @@
 import { ScrollPlayer } from "./player";
+import { NativeTextPlayer, registerNativeAnimation } from "./native-player";
+export { NativeTextPlayer, registerNativeAnimation };
 export async function registerScrollAnimation(options) {
     const player = new ScrollPlayer(options);
     await player.init();

package/dist/loader.d.ts

@@ -4,7 +4,10 @@ export declare class FrameCache {
     private readonly frameUrls;
     private frames;
     private loading;
+    private preloadAhead;
     constructor(frameUrls: string[]);
     get length(): number;
     load(index: number): Promise<HTMLImageElement>;
+    private loadFrame;
+    private preloadNearby;
 }

package/dist/loader.js

@@ -1,10 +1,17 @@
+/**
+ * Resolve an asset URL relative to the manifest URL.
+ * Handles both absolute manifest URLs (with protocol) and path-only URLs.
+ */
 function resolveAssetUrl(asset, manifestUrl) {
-    try {
-        return new URL(asset, manifestUrl).toString();
-    }
-    catch {
+    // If asset is already absolute, return as-is
+    if (asset.startsWith("http://") || asset.startsWith("https://") || asset.startsWith("/")) {
         return asset;
     }
+    // Get the directory of the manifest
+    const lastSlash = manifestUrl.lastIndexOf("/");
+    const baseDir = lastSlash >= 0 ? manifestUrl.substring(0, lastSlash + 1) : "";
+    // Resolve relative path
+    return baseDir + asset;
 }
 export async function loadManifest(url) {
     const response = await fetch(url);
@@ -23,17 +30,26 @@ export class FrameCache {
         this.frameUrls = frameUrls;
         this.frames = new Map();
         this.loading = new Map();
+        this.preloadAhead = 5; // Number of frames to preload ahead
     }
     get length() {
         return this.frameUrls.length;
     }
     async load(index) {
+        // Start preloading nearby frames
+        this.preloadNearby(index);
         if (this.frames.has(index)) {
             return this.frames.get(index);
         }
         if (this.loading.has(index)) {
             return this.loading.get(index);
         }
+        return this.loadFrame(index);
+    }
+    async loadFrame(index) {
+        if (index < 0 || index >= this.frameUrls.length) {
+            throw new Error(`Frame index out of bounds: ${index}`);
+        }
         const url = this.frameUrls[index];
         const promise = new Promise((resolve, reject) => {
             const img = new Image();
@@ -51,4 +67,17 @@ export class FrameCache {
         this.loading.set(index, promise);
         return promise;
     }
+    preloadNearby(currentIndex) {
+        // Preload frames ahead and behind
+        for (let offset = 1; offset <= this.preloadAhead; offset++) {
+            const ahead = currentIndex + offset;
+            const behind = currentIndex - offset;
+            if (ahead < this.frameUrls.length && !this.frames.has(ahead) && !this.loading.has(ahead)) {
+                this.loadFrame(ahead).catch(() => { }); // Silently ignore preload failures
+            }
+            if (behind >= 0 && !this.frames.has(behind) && !this.loading.has(behind)) {
+                this.loadFrame(behind).catch(() => { }); // Silently ignore preload failures
+            }
+        }
+    }
 }

package/dist/native-player.d.ts

@@ -0,0 +1,65 @@
+import type { NativeAnimationOptions } from "./types";
+/**
+ * NativeTextPlayer - Renders text animation natively in the browser
+ * using SVG paths, replicating Manim's Write/DrawBorderThenFill animation.
+ *
+ * Phase 1 (progress 0 to 0.5): Draw the stroke progressively
+ * Phase 2 (progress 0.5 to 1.0): Fill in the text
+ *
+ * Key difference from naive implementations: we split each character into
+ * individual contours (sub-paths) and apply the lag_ratio to ALL contours
+ * across all characters. This matches Manim's behavior where outlines
+ * appear progressively rather than all at once.
+ */
+export declare class NativeTextPlayer {
+    private readonly container;
+    private readonly options;
+    private svg;
+    private fallbackWrapper;
+    /** All sub-paths (segments) across all characters, for stroke animation */
+    private subPaths;
+    /** Fill paths (original closed contours) for the filled state */
+    private fillPaths;
+    private isActive;
+    private rafId;
+    private observer?;
+    private resizeObserver?;
+    private lastProgress;
+    private scrollHandler?;
+    private resizeHandler?;
+    private pendingDraw;
+    private pendingResize;
+    private font;
+    /** Last known font size, used to detect changes for inherited sizing */
+    private lastComputedFontSize;
+    constructor(options: NativeAnimationOptions);
+    init(): Promise<void>;
+    private createCharacterPaths;
+    /**
+     * Get the inherited font size from the container's computed style.
+     */
+    private getInheritedFontSize;
+    private createFallbackTextAnimation;
+    private render;
+    destroy(): void;
+    private setupObserver;
+    /**
+     * Set up resize handling for responsive behavior:
+     * 1. Window resize - recalculate scroll progress (viewport height changes)
+     * 2. Container resize - detect font-size changes when using inherited sizing
+     */
+    private setupResizeHandling;
+    /**
+     * Rebuild the animation when font size changes (for inherited sizing).
+     * This clears and recreates all character paths with the new size.
+     */
+    private rebuildAnimation;
+    private start;
+    private stop;
+    private tick;
+}
+/**
+ * Register a native text animation on a container element.
+ * This creates scroll-driven text animation without pre-rendered assets.
+ */
+export declare function registerNativeAnimation(options: NativeAnimationOptions): Promise<() => void>;