@mihirsarya/manim-scroll-runtime 0.1.2 → 0.2.1

package/dist/player.d.ts

@@ -11,11 +11,24 @@ export declare class ScrollPlayer {
     private isActive;
     private rafId;
     private observer?;
+    private lastProgress;
+    private lastFrameIndex;
+    private scrollHandler?;
+    private resizeHandler?;
+    private pendingDraw;
+    private pendingResize;
+    private isTransparent;
     constructor(options: ScrollAnimationOptions);
     init(): Promise<void>;
     destroy(): void;
     private selectMode;
+    private drawInitialFrame;
     private setupObserver;
+    /**
+     * Set up window resize handling for responsive scroll progress calculation.
+     * When the viewport height changes, scroll progress needs to be recalculated.
+     */
+    private setupResizeHandling;
     private start;
     private stop;
     private tick;

package/dist/player.js

@@ -84,37 +84,75 @@ export class ScrollPlayer {
         this.mode = "video";
         this.isActive = false;
         this.rafId = null;
+        this.lastProgress = -1;
+        this.lastFrameIndex = -1;
+        this.pendingDraw = false;
+        this.pendingResize = false;
+        this.isTransparent = false;
         this.container = options.container;
         this.canvas = (_a = options.canvas) !== null && _a !== void 0 ? _a : document.createElement("canvas");
-        this.ctx = this.canvas.getContext("2d");
+        // Use willReadFrequently: false for better performance with transparent compositing
+        this.ctx = this.canvas.getContext("2d", { alpha: true });
         if (!options.canvas) {
             this.container.appendChild(this.canvas);
         }
     }
     async init() {
-        var _a, _b;
+        var _a, _b, _c;
         this.manifest = await loadManifest(this.options.manifestUrl);
         this.frameCache = new FrameCache(this.manifest.frames);
         this.mode = this.selectMode(this.manifest, this.options.mode);
+        this.isTransparent = (_a = this.manifest.transparent) !== null && _a !== void 0 ? _a : false;
         this.canvas.width = this.manifest.width;
         this.canvas.height = this.manifest.height;
+        // For inline mode, style the canvas to match text flow
+        if (this.manifest.inline) {
+            this.canvas.style.background = "transparent";
+            this.canvas.style.display = "inline-block";
+            this.canvas.style.verticalAlign = "middle";
+            // Height matches line height (set in em units for text scaling)
+            this.canvas.style.height = "1em";
+            // Width is calculated from aspect ratio
+            if (this.manifest.aspectRatio) {
+                this.canvas.style.width = `${this.manifest.aspectRatio}em`;
+            }
+            else {
+                this.canvas.style.width = "auto";
+            }
+        }
+        else if (this.isTransparent) {
+            // Non-inline transparent mode
+            this.canvas.style.background = "transparent";
+        }
         if (this.mode === "video" && this.manifest.video) {
             const video = document.createElement("video");
             video.src = this.manifest.video;
             video.muted = true;
             video.playsInline = true;
-            await new Promise((resolve) => {
-                video.addEventListener("loadedmetadata", () => resolve(), { once: true });
+            video.preload = "auto";
+            // Wait for enough data to be loaded to allow seeking
+            await new Promise((resolve, reject) => {
+                video.addEventListener("canplaythrough", () => resolve(), { once: true });
+                video.addEventListener("error", () => reject(new Error("Failed to load video")), { once: true });
+                // Fallback timeout
+                setTimeout(() => resolve(), 5000);
             });
             this.videoEl = video;
         }
         this.setupObserver();
-        (_b = (_a = this.options).onReady) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.setupResizeHandling();
+        // Draw the first frame immediately so the canvas isn't blank
+        await this.drawInitialFrame();
+        (_c = (_b = this.options).onReady) === null || _c === void 0 ? void 0 : _c.call(_b);
     }
     destroy() {
         var _a;
         this.stop();
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.resizeHandler) {
+            window.removeEventListener("resize", this.resizeHandler);
+            this.resizeHandler = undefined;
+        }
         if (!this.options.canvas) {
             this.canvas.remove();
         }
@@ -128,6 +166,33 @@ export class ScrollPlayer {
             return "frames";
         return manifest.video ? "video" : "frames";
     }
+    async drawInitialFrame() {
+        if (!this.manifest || !this.frameCache)
+            return;
+        try {
+            // Clear canvas for transparent mode
+            if (this.isTransparent) {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            }
+            if (this.mode === "video" && this.videoEl) {
+                // Seek to start and draw first frame
+                this.videoEl.currentTime = 0;
+                // Wait for seek to complete
+                await new Promise((resolve) => {
+                    this.videoEl.addEventListener("seeked", () => resolve(), { once: true });
+                    setTimeout(() => resolve(), 100); // Fallback
+                });
+                this.ctx.drawImage(this.videoEl, 0, 0, this.canvas.width, this.canvas.height);
+            }
+            else if (this.frameCache.length > 0) {
+                const frame = await this.frameCache.load(0);
+                this.ctx.drawImage(frame, 0, 0, this.canvas.width, this.canvas.height);
+            }
+        }
+        catch (e) {
+            console.warn("[manim-scroll] Failed to draw initial frame:", e);
+        }
+    }
     setupObserver() {
         this.observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
@@ -141,15 +206,43 @@ export class ScrollPlayer {
         }, { root: null, threshold: 0 });
         this.observer.observe(this.container);
     }
+    /**
+     * Set up window resize handling for responsive scroll progress calculation.
+     * When the viewport height changes, scroll progress needs to be recalculated.
+     */
+    setupResizeHandling() {
+        this.resizeHandler = () => {
+            if (!this.pendingResize) {
+                this.pendingResize = true;
+                requestAnimationFrame(() => {
+                    this.pendingResize = false;
+                    // Force recalculation of scroll progress by resetting last progress
+                    this.lastProgress = -1;
+                    if (this.isActive) {
+                        this.tick();
+                    }
+                });
+            }
+        };
+        window.addEventListener("resize", this.resizeHandler, { passive: true });
+    }
     start() {
         if (this.isActive)
             return;
         this.isActive = true;
-        const loop = () => {
-            this.tick();
-            this.rafId = requestAnimationFrame(loop);
+        // Use scroll event listener with RAF throttling for efficiency
+        this.scrollHandler = () => {
+            if (!this.pendingDraw) {
+                this.pendingDraw = true;
+                this.rafId = requestAnimationFrame(() => {
+                    this.pendingDraw = false;
+                    this.tick();
+                });
+            }
         };
-        this.rafId = requestAnimationFrame(loop);
+        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        // Initial tick
+        this.tick();
     }
     stop() {
         if (!this.isActive)
@@ -158,6 +251,10 @@ export class ScrollPlayer {
         if (this.rafId !== null) {
             cancelAnimationFrame(this.rafId);
         }
+        if (this.scrollHandler) {
+            window.removeEventListener("scroll", this.scrollHandler);
+            this.scrollHandler = undefined;
+        }
     }
     async tick() {
         var _a, _b;
@@ -165,14 +262,36 @@ export class ScrollPlayer {
             return;
         const rect = this.container.getBoundingClientRect();
         const progress = resolveScrollProgress(rect, window.innerHeight, this.options.scrollRange);
+        // Skip if progress hasn't changed significantly (threshold: 0.1%)
+        if (Math.abs(progress - this.lastProgress) < 0.001) {
+            return;
+        }
+        this.lastProgress = progress;
         (_b = (_a = this.options).onProgress) === null || _b === void 0 ? void 0 : _b.call(_a, progress);
         if (this.mode === "video" && this.videoEl) {
             const duration = this.videoEl.duration || 0;
-            this.videoEl.currentTime = duration * progress;
-            this.ctx.drawImage(this.videoEl, 0, 0, this.canvas.width, this.canvas.height);
+            const targetTime = duration * progress;
+            // Only seek if time changed by more than half a frame (assuming 30fps)
+            if (Math.abs(this.videoEl.currentTime - targetTime) > 0.016) {
+                this.videoEl.currentTime = targetTime;
+                // Clear before drawing for transparent mode
+                if (this.isTransparent) {
+                    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                }
+                this.ctx.drawImage(this.videoEl, 0, 0, this.canvas.width, this.canvas.height);
+            }
             return;
         }
         const index = Math.round(progress * (this.frameCache.length - 1));
+        // Skip if same frame
+        if (index === this.lastFrameIndex) {
+            return;
+        }
+        this.lastFrameIndex = index;
+        // Clear before drawing for transparent mode
+        if (this.isTransparent) {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
         const frame = await this.frameCache.load(index);
         this.ctx.drawImage(frame, 0, 0, this.canvas.width, this.canvas.height);
     }

package/dist/types.d.ts

@@ -5,6 +5,12 @@ export type RenderManifest = {
     height: number;
     frames: string[];
     video: string | null;
+    /** Whether the animation was rendered with transparent background */
+    transparent?: boolean;
+    /** Whether this is an inline animation with tight bounds */
+    inline?: boolean;
+    /** Aspect ratio of the text content (for inline sizing) */
+    aspectRatio?: number | null;
 };
 /**
  * Legacy scroll range format (pixels).
@@ -36,3 +42,27 @@ export type ScrollAnimationOptions = {
     onReady?: () => void;
     onProgress?: (progress: number) => void;
 };
+/**
+ * Options for native text animation (no pre-rendered assets).
+ * Replicates Manim's Write/DrawBorderThenFill animation in the browser.
+ */
+export type NativeAnimationOptions = {
+    /** The container element to render the animation into */
+    container: HTMLElement;
+    /** The text to animate */
+    text: string;
+    /** Font size in pixels. If not specified, inherits from parent element. */
+    fontSize?: number;
+    /** Text color (hex or CSS color) */
+    color?: string;
+    /** URL to a font file (woff, woff2, ttf, otf) for opentype.js */
+    fontUrl?: string;
+    /** Stroke width for the drawing phase (default: 2, matches Manim's DrawBorderThenFill) */
+    strokeWidth?: number;
+    /** Scroll range configuration */
+    scrollRange?: ScrollRangeValue;
+    /** Called when animation is loaded and ready */
+    onReady?: () => void;
+    /** Called on scroll progress updates */
+    onProgress?: (progress: number) => void;
+};

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@mihirsarya/manim-scroll-runtime",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Scroll-driven playback runtime for pre-rendered Manim animations.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "opentype.js": "^1.3.4"
+  },
   "devDependencies": {
+    "@types/opentype.js": "^1.3.8",
     "typescript": "^5.4.5"
   },
   "scripts": {