@remotion/web-renderer 4.0.471 → 4.0.472

package/dist/create-scaffold.d.ts

@@ -7,7 +7,7 @@ export type ErrorHolder = {
     error: Error | null;
 };
 export declare function checkForError(errorHolder: ErrorHolder): void;
-export declare function createScaffold<Props extends Record<string, unknown>>({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, allowHtmlInCanvas }: {
+export declare function createScaffold<Props extends Record<string, unknown>>({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, allowHtmlInCanvas, pixelDensity }: {
     width: number;
     height: number;
     delayRenderTimeoutInMilliseconds: number;
@@ -25,6 +25,7 @@ export declare function createScaffold<Props extends Record<string, unknown>>({
     defaultCodec: Codec | null;
     defaultOutName: string | null;
     allowHtmlInCanvas: boolean;
+    pixelDensity: number;
 }): {
     delayRenderScope: DelayRenderScope;
     div: HTMLDivElement;

package/dist/esm/index.mjs

@@ -1020,7 +1020,8 @@ function createScaffold({
   videoEnabled,
   defaultCodec,
   defaultOutName,
-  allowHtmlInCanvas
+  allowHtmlInCanvas,
+  pixelDensity
 }) {
   if (!ReactDOM.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
@@ -1112,19 +1113,22 @@ function createScaffold({
               },
               folders: []
             },
-            children: /* @__PURE__ */ jsx2(Internals3.RenderAssetManagerProvider, {
-              collectAssets,
-              children: /* @__PURE__ */ jsx2(UpdateTime, {
-                audioEnabled,
-                videoEnabled,
-                logLevel,
-                compId: id,
-                initialFrame,
-                timeUpdater,
-                children: /* @__PURE__ */ jsx2(Internals3.CanUseRemotionHooks.Provider, {
-                  value: true,
-                  children: /* @__PURE__ */ jsx2(Component, {
-                    ...resolvedProps
+            children: /* @__PURE__ */ jsx2(Internals3.PixelDensityContext.Provider, {
+              value: pixelDensity,
+              children: /* @__PURE__ */ jsx2(Internals3.RenderAssetManagerProvider, {
+                collectAssets,
+                children: /* @__PURE__ */ jsx2(UpdateTime, {
+                  audioEnabled,
+                  videoEnabled,
+                  logLevel,
+                  compId: id,
+                  initialFrame,
+                  timeUpdater,
+                  children: /* @__PURE__ */ jsx2(Internals3.CanUseRemotionHooks.Provider, {
+                    value: true,
+                    children: /* @__PURE__ */ jsx2(Component, {
+                      ...resolvedProps
+                    })
                   })
                 })
               })
@@ -4184,6 +4188,8 @@ var drawText = ({
     span.textContent = transformedText;
     const tokens = findWords(span);
     const textShadows = parseTextShadow(textShadowValue);
+    const ctm = contextToDraw.getTransform();
+    const blurScale = Math.hypot(ctm.a, ctm.b);
     const { strokeFirst } = parsePaintOrder(paintOrder);
     for (const token of tokens) {
       const measurements = contextToDraw.measureText(originalText);
@@ -4196,9 +4202,9 @@ var drawText = ({
       for (let i = textShadows.length - 1;i >= 0; i--) {
         const shadow = textShadows[i];
         contextToDraw.shadowColor = shadow.color;
-        contextToDraw.shadowBlur = shadow.blurRadius;
-        contextToDraw.shadowOffsetX = shadow.offsetX;
-        contextToDraw.shadowOffsetY = shadow.offsetY;
+        contextToDraw.shadowBlur = shadow.blurRadius * blurScale;
+        contextToDraw.shadowOffsetX = shadow.offsetX * ctm.a + shadow.offsetY * ctm.c;
+        contextToDraw.shadowOffsetY = shadow.offsetX * ctm.b + shadow.offsetY * ctm.d;
         contextToDraw.fillText(token.text, x, y);
       }
       contextToDraw.shadowColor = "transparent";
@@ -4725,7 +4731,8 @@ var internalRenderMediaOnWeb = async ({
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas
+      allowHtmlInCanvas,
+      pixelDensity: scale
     }), 0);
     const {
       delayRenderScope,
@@ -5139,7 +5146,8 @@ async function internalRenderStillOnWeb({
       initialFrame: frame,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas
+      allowHtmlInCanvas,
+      pixelDensity: scale
     }), 0);
     const {
       delayRenderScope,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.471",
+	"version": "4.0.472",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,19 +22,19 @@
 		"@mediabunny/mp3-encoder": "1.45.0",
 		"@mediabunny/aac-encoder": "1.45.0",
 		"@mediabunny/flac-encoder": "1.45.0",
-		"@remotion/licensing": "4.0.471",
-		"remotion": "4.0.471",
+		"@remotion/licensing": "4.0.472",
+		"remotion": "4.0.472",
 		"mediabunny": "1.45.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.471",
-		"@remotion/paths": "4.0.471",
-		"@remotion/player": "4.0.471",
-		"@remotion/media": "4.0.471",
-		"@remotion/shapes": "4.0.471",
-		"@remotion/three": "4.0.471",
-		"@remotion/transitions": "4.0.471",
+		"@remotion/eslint-config-internal": "4.0.472",
+		"@remotion/paths": "4.0.472",
+		"@remotion/player": "4.0.472",
+		"@remotion/media": "4.0.472",
+		"@remotion/shapes": "4.0.472",
+		"@remotion/three": "4.0.472",
+		"@remotion/transitions": "4.0.472",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",