@effect-motion/react 0.5.0 → 0.6.0

package/README.md

@@ -9,7 +9,7 @@ Frames stream in as the scene runs rather than being rendered up front, so playb
 `effect` and `effect-motion` are peer dependencies — install them alongside:
 
 ```bash
-pnpm add @effect-motion/react effect-motion effect
+bun add @effect-motion/react effect-motion effect
 ```
 
 ## Play a scene

package/dist/Player.js

@@ -20,18 +20,32 @@ class PlayerError extends Data.TaggedError("PlayerError") {
     }
 }
 /**
- * The device pixel ratio to render at — 75% of the way from 1 to the
- * display's native ratio.
+ * The viewport for a `width` × `height` frame shown in `canvas`: logical size
+ * is the frame's, pixel density follows how big the canvas is displayed.
  *
  * @remarks
- * Rendering at full native ratio on a high-DPI display costs several times
- * the pixels for a difference nobody sees in motion. Softening it keeps text
- * and edges sharp at a fraction of the fill cost.
+ * Scene coordinates, camera and HUD stay in frame units; only the pixel ratio
+ * changes, set so the backing store matches the displayed CSS size at device
+ * density — a 1920-wide scene shown 700 CSS px wide on a 2× display renders
+ * 1400 px wide, not 3840. Capped at the device ratio, so never more detail
+ * than the display can show. Before layout (width 0) it falls back to the
+ * device ratio.
  *
- * Read on every render, so dragging a window between monitors picks up the
- * new ratio.
+ * `pw`/`ph` are the backing-store size three will set (it floors), used to
+ * skip resizes that would not change a pixel.
  */
-const calculateDpr = () => typeof window === "undefined" ? 1 : 1 + (window.devicePixelRatio - 1) * 0.75;
+const viewportFor = (canvas, width, height) => {
+    const dpr = window.devicePixelRatio;
+    const displayed = canvas.clientWidth;
+    const ratio = displayed > 0 ? Math.min(dpr, (displayed * dpr) / width) : dpr;
+    return {
+        width,
+        height,
+        ratio,
+        pw: Math.floor(width * ratio),
+        ph: Math.floor(height * ratio),
+    };
+};
 const PlayerScene = Context.Service("PlayerScene");
 /**
  * The frame buffer: keeps the most recent `capacity` frames, keyed by
@@ -147,8 +161,9 @@ const useScene = (sceneProp, options) => {
             width: 1,
             height: 1,
         }).pipe(Effect.mapError(PlayerError.of("Error acquiring the renderer")));
-        // viewport tracking: sized from frame metadata on first render
-        let sized = { width: 0, height: 0, dpr: 0 };
+        // viewport tracking: sized from frame metadata + displayed size
+        // on first render, then on every resize / DPR change
+        let sized = { width: 0, height: 0, ratio: 0, pw: 0, ph: 0 };
         // pipeline pre-warm happens once, on the first rendered frame,
         // before playback reveals motion — no first-frame compile jank
         let prewarmed = false;
@@ -203,7 +218,8 @@ const useScene = (sceneProp, options) => {
             };
         }).pipe(Effect.mapError(PlayerError.of("Error getting frame buffer")));
         const renderSemaphore = yield* Semaphore.make(1);
-        const render = (frameIndex) => renderSemaphore.withPermitsIfAvailable(1)(Effect.gen(function* () {
+        // unlocked: callers hold renderSemaphore
+        const renderFrame = (frameIndex) => Effect.gen(function* () {
             if (!canvasRef.current) {
                 return;
             }
@@ -216,12 +232,13 @@ const useScene = (sceneProp, options) => {
             // loadFrameBuffer), and the playhead must reflect what's shown
             updateCurrentFrame(framebuffer.index);
             const frame = framebuffer.frame;
-            const dpr = calculateDpr();
-            if (sized.width !== frame.width ||
-                sized.height !== frame.height ||
-                sized.dpr !== dpr) {
-                sized = { width: frame.width, height: frame.height, dpr };
-                FrameRenderer.setViewport(sink, frame.width, frame.height, dpr);
+            const next = viewportFor(canvas, frame.width, frame.height);
+            if (next.width !== sized.width ||
+                next.height !== sized.height ||
+                next.pw !== sized.pw ||
+                next.ph !== sized.ph) {
+                sized = next;
+                FrameRenderer.setViewport(sink, next.width, next.height, next.ratio);
             }
             // font loaders resolve from this runtime's context (the
             // renderLayers merge); missing loaders defect loudly
@@ -232,7 +249,30 @@ const useScene = (sceneProp, options) => {
                 yield* FrameRenderer.prewarm(sink);
             }
             yield* FrameRenderer.render(sink);
-        }).pipe(Effect.mapError(PlayerError.of("Error rendering frame"))));
+        }).pipe(Effect.mapError(PlayerError.of("Error rendering frame")));
+        const render = (frameIndex) => renderSemaphore.withPermitsIfAvailable(1)(renderFrame(frameIndex));
+        // resize / DPR change: resizing clears the canvas, so re-render
+        // the shown frame (a paused player would otherwise stay blank or
+        // scaled). Waits for the permit rather than dropping, so the
+        // final size of a drag is never lost; at most one waits.
+        let redrawQueued = false;
+        const redraw = Effect.suspend(() => {
+            if (redrawQueued) {
+                return Effect.void;
+            }
+            redrawQueued = true;
+            return renderSemaphore.withPermits(1)(Effect.suspend(() => {
+                redrawQueued = false;
+                // unsized: the first render has not run yet and will size
+                if (sized.width === 0) {
+                    return Effect.void;
+                }
+                const next = viewportFor(canvas, sized.width, sized.height);
+                return next.pw === sized.pw && next.ph === sized.ph
+                    ? Effect.void
+                    : renderFrame(currentFrame);
+            }));
+        });
         const play = Effect.suspend(() => {
             if (isPlaying)
                 return Effect.void;
@@ -312,6 +352,7 @@ const useScene = (sceneProp, options) => {
         return Context.make(PlayerScene, {
             play,
             pause,
+            redraw,
             frameIndex: Effect.sync(() => currentFrame),
             render,
             load: (frameIndex) => loadFrameBuffer(frameIndex),
@@ -378,6 +419,30 @@ const useScene = (sceneProp, options) => {
             play();
         }
     }, []);
+    const redraw = useEffectEvent(() => runReported(Effect.service(PlayerScene).pipe(Effect.flatMap((e) => e.redraw), Effect.scoped)));
+    // keep the backing store at displayed size × device pixel ratio: the
+    // observer covers container resize and fullscreen; the resolution query
+    // covers DPR changes that leave the CSS size alone (monitor move, zoom)
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (canvas === null) {
+            return;
+        }
+        const observer = new ResizeObserver(() => redraw());
+        observer.observe(canvas);
+        let media = null;
+        const onDprChange = () => {
+            media?.removeEventListener("change", onDprChange);
+            media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+            media.addEventListener("change", onDprChange);
+            redraw();
+        };
+        onDprChange();
+        return () => {
+            observer.disconnect();
+            media?.removeEventListener("change", onDprChange);
+        };
+    }, []);
     // scene time in seconds of the current frame, and total when known
     const currentTime = Time.frameToMillis(currentFrame, fps) / 1000;
     const totalTime = totalFrames !== null

package/package.json

@@ -1,63 +1,63 @@
 {
-  "name": "@effect-motion/react",
-  "version": "0.5.0",
-  "description": "React bindings for effect-motion: usePlayer hook and Player component",
-  "type": "module",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/julia-script/effect-motion.git",
-    "directory": "packages/react"
-  },
-  "homepage": "https://github.com/julia-script/effect-motion#readme",
-  "bugs": "https://github.com/julia-script/effect-motion/issues",
-  "keywords": [
-    "effect",
-    "motion",
-    "react",
-    "animation",
-    "motion-graphics"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./*": {
-      "types": "./dist/*.d.ts",
-      "default": "./dist/*.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@effect-motion/renderer": "^0.5.0",
-    "effect-motion": "^0.5.0"
-  },
-  "peerDependencies": {
-    "effect": ">=4.0.0-beta.98",
-    "react": ">=18"
-  },
-  "devDependencies": {
-    "@testing-library/react": "^16.3.0",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "effect": "4.0.0-beta.98",
-    "happy-dom": "^20.10.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "^7.0.2",
-    "vitest": "^4.1.10"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
-    "test": "vitest run --passWithNoTests",
-    "check": "tsc --noEmit"
-  }
-}
+	"name": "@effect-motion/react",
+	"version": "0.6.0",
+	"description": "React bindings for effect-motion: usePlayer hook and Player component",
+	"type": "module",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/julia-script/effect-motion.git",
+		"directory": "packages/react"
+	},
+	"homepage": "https://github.com/julia-script/effect-motion#readme",
+	"bugs": "https://github.com/julia-script/effect-motion/issues",
+	"keywords": [
+		"effect",
+		"motion",
+		"react",
+		"animation",
+		"motion-graphics"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./*": {
+			"types": "./dist/*.d.ts",
+			"default": "./dist/*.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc -p tsconfig.build.json",
+		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+		"test": "vitest run --passWithNoTests",
+		"check": "tsc --noEmit"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"dependencies": {
+		"@effect-motion/renderer": "workspace:^",
+		"effect-motion": "workspace:^"
+	},
+	"peerDependencies": {
+		"effect": ">=4.0.0-rc.115",
+		"react": ">=18"
+	},
+	"devDependencies": {
+		"@testing-library/react": "^16.3.0",
+		"@types/node": "^26.1.1",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.0",
+		"effect": "4.0.0-rc.115",
+		"happy-dom": "^20.10.6",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"typescript": "^7.0.2",
+		"vitest": "^4.1.10"
+	}
+}