diff --git a/bun.lock b/bun.lock
index d8d4c36c6d6..18e175438ff 100644
--- a/bun.lock
+++ b/bun.lock
@@ -24,7 +24,7 @@
     },
     "packages/animated-emoji": {
       "name": "@remotion/animated-emoji",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -36,7 +36,7 @@
     },
     "packages/animation-utils": {
       "name": "@remotion/animation-utils",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -52,7 +52,7 @@
     },
     "packages/astro-example": {
       "name": "@remotion/astro-example",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@astrojs/react": "4.0.0",
         "@remotion/gif": "workspace:*",
@@ -71,7 +71,7 @@
     },
     "packages/babel-loader": {
       "name": "@remotion/babel-loader",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@babel/core": "7.29.6",
         "@babel/plugin-proposal-class-properties": "7.14.5",
@@ -95,7 +95,7 @@
     },
     "packages/brand": {
       "name": "@remotion/brand",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@mediabunny/prores": "catalog:",
       },
@@ -137,7 +137,7 @@
     },
     "packages/browser-studio": {
       "name": "@remotion/browser-studio",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/studio-codemods": "workspace:*",
         "@remotion/studio-protocol": "workspace:*",
@@ -164,7 +164,7 @@
     },
     "packages/bundler": {
       "name": "@remotion/bundler",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/media-parser": "workspace:*",
         "@remotion/studio": "workspace:*",
@@ -193,7 +193,7 @@
     },
     "packages/canvas": {
       "name": "@remotion/canvas",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/player": "workspace:*",
         "remotion": "workspace:*",
@@ -214,8 +214,9 @@
     },
     "packages/canvas-capture-extension": {
       "name": "@remotion/canvas-capture-extension",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
+        "@remotion/design": "workspace:*",
         "mediabunny": "catalog:",
         "react": "catalog:",
         "react-dom": "catalog:",
@@ -235,7 +236,7 @@
     },
     "packages/captions": {
       "name": "@remotion/captions",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -244,7 +245,7 @@
     },
     "packages/claude-code-plugin": {
       "name": "@remotion/claude-code-plugin",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -253,7 +254,7 @@
     },
     "packages/cli": {
       "name": "@remotion/cli",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "bin": {
         "remotion": "remotion-cli.js",
         "remotionb": "remotionb-cli.js",
@@ -298,7 +299,7 @@
     },
     "packages/cloudrun": {
       "name": "@remotion/cloudrun",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@google-cloud/artifact-registry": "3.5.1",
         "@google-cloud/functions-framework": "3.4.6",
@@ -324,7 +325,7 @@
     },
     "packages/codex-plugin": {
       "name": "@remotion/codex-plugin",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -333,39 +334,39 @@
     },
     "packages/compositor": {
       "name": "@remotion/compositor",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-darwin-arm64": {
       "name": "@remotion/compositor-darwin-arm64",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-darwin-x64": {
       "name": "@remotion/compositor-darwin-x64",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-linux-arm64-gnu": {
       "name": "@remotion/compositor-linux-arm64-gnu",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-linux-arm64-musl": {
       "name": "@remotion/compositor-linux-arm64-musl",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-linux-x64-gnu": {
       "name": "@remotion/compositor-linux-x64-gnu",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-linux-x64-musl": {
       "name": "@remotion/compositor-linux-x64-musl",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/compositor-win32-x64-msvc": {
       "name": "@remotion/compositor-win32-x64-msvc",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/convert": {
       "name": "@remotion/convert",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@mediabunny/aac-encoder": "catalog:",
         "@mediabunny/ac3": "catalog:",
@@ -428,7 +429,7 @@
     },
     "packages/core": {
       "name": "remotion",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@happy-dom/global-registrator": "14.5.1",
         "@remotion/eslint-config-internal": "workspace:*",
@@ -450,7 +451,7 @@
     },
     "packages/create-video": {
       "name": "create-video",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "bin": {
         "create-video": "bin.js",
       },
@@ -472,7 +473,7 @@
     },
     "packages/design": {
       "name": "@remotion/design",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@radix-ui/react-select": "2.1.1",
         "@radix-ui/react-slot": "1.2.4",
@@ -502,11 +503,11 @@
     },
     "packages/discord-poster": {
       "name": "@remotion/discord-poster",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/docs": {
       "name": "docs",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@aws-sdk/s3-request-presigner": "catalog:",
         "@babel/parser": "7.24.1",
@@ -527,6 +528,7 @@
         "@remotion/animated-emoji": "workspace:*",
         "@remotion/animation-utils": "workspace:*",
         "@remotion/babel-loader": "workspace:*",
+        "@remotion/brand": "workspace:*",
         "@remotion/browser-studio": "workspace:*",
         "@remotion/bundler": "workspace:*",
         "@remotion/captions": "workspace:*",
@@ -640,7 +642,7 @@
     },
     "packages/docusaurus-plugin": {
       "name": "@remotion/docusaurus-plugin",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@docusaurus/types": "3.6.0",
         "@shikijs/twoslash": "3.22.0",
@@ -659,7 +661,7 @@
     },
     "packages/effects": {
       "name": "@remotion/effects",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -673,7 +675,7 @@
     },
     "packages/elevenlabs": {
       "name": "@remotion/elevenlabs",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/captions": "workspace:*",
       },
@@ -685,7 +687,7 @@
     },
     "packages/enable-scss": {
       "name": "@remotion/enable-scss",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "css-loader": "7.1.4",
         "sass-loader": "14.2.1",
@@ -703,7 +705,7 @@
     },
     "packages/eslint-config": {
       "name": "@remotion/eslint-config",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@remotion/eslint-plugin": "workspace:*",
@@ -720,7 +722,7 @@
     },
     "packages/eslint-config-flat": {
       "name": "@remotion/eslint-config-flat",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "typescript-eslint": "8.21.0",
       },
@@ -739,7 +741,7 @@
     },
     "packages/eslint-config-internal": {
       "name": "@remotion/eslint-config-internal",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@eslint/compat": "1.2.2",
         "@eslint/eslintrc": "3.1.0",
@@ -758,7 +760,7 @@
     },
     "packages/eslint-plugin": {
       "name": "@remotion/eslint-plugin",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@typescript-eslint/utils": "5.19.0",
       },
@@ -773,7 +775,7 @@
     },
     "packages/example": {
       "name": "@remotion/example",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@mdx-js/loader": "2.3.0",
         "@mdx-js/react": "2.3.0",
@@ -870,7 +872,7 @@
     },
     "packages/example-videos": {
       "name": "@remotion/example-videos",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -881,7 +883,7 @@
     },
     "packages/example-without-zod": {
       "name": "@remotion/example-without-zod",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/cli": "workspace:*",
         "react": "catalog:",
@@ -891,7 +893,7 @@
     },
     "packages/fonts": {
       "name": "@remotion/fonts",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -903,7 +905,7 @@
     },
     "packages/gif": {
       "name": "@remotion/gif",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -924,7 +926,7 @@
     },
     "packages/google-fonts": {
       "name": "@remotion/google-fonts",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -937,7 +939,7 @@
     },
     "packages/gsap": {
       "name": "@remotion/gsap",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -960,7 +962,7 @@
     },
     "packages/install-whisper-cpp": {
       "name": "@remotion/install-whisper-cpp",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/captions": "workspace:*",
       },
@@ -972,7 +974,7 @@
     },
     "packages/it-tests": {
       "name": "@remotion/it-tests",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@mdx-js/loader": "2.3.0",
         "@remotion/babel-loader": "workspace:*",
@@ -1027,7 +1029,7 @@
     },
     "packages/jonnys-videos": {
       "name": "@remotion/jonnys-videos",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@mediabunny/prores": "catalog:",
         "@remotion/captions": "workspace:*",
@@ -1051,7 +1053,7 @@
     },
     "packages/kimi-code-plugin": {
       "name": "@remotion/kimi-code-plugin",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1060,7 +1062,7 @@
     },
     "packages/lambda": {
       "name": "@remotion/lambda",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@aws-sdk/client-cloudwatch-logs": "catalog:",
         "@aws-sdk/client-iam": "catalog:",
@@ -1102,7 +1104,7 @@
     },
     "packages/lambda-client": {
       "name": "@remotion/lambda-client",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@aws-sdk/client-cloudwatch-logs": "catalog:",
         "@aws-sdk/client-iam": "catalog:",
@@ -1126,25 +1128,25 @@
     },
     "packages/lambda-go": {
       "name": "@remotion/lambda-go",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "remotion": "workspace:*",
       },
     },
     "packages/lambda-go-example": {
       "name": "@remotion/lambda-go-example",
-      "version": "4.0.518",
+      "version": "4.0.519",
     },
     "packages/lambda-php": {
       "name": "@remotion/lambda-php",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "remotion": "workspace:*",
       },
     },
     "packages/lambda-python": {
       "name": "@remotion/lambda-python",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "dotenv": "17.3.1",
       },
@@ -1154,14 +1156,14 @@
     },
     "packages/lambda-ruby": {
       "name": "@remotion/lambda-ruby",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "remotion": "workspace:*",
       },
     },
     "packages/layout-utils": {
       "name": "@remotion/layout-utils",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1177,7 +1179,7 @@
     },
     "packages/licensing": {
       "name": "@remotion/licensing",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1188,7 +1190,7 @@
     },
     "packages/light-leaks": {
       "name": "@remotion/light-leaks",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/effects": "workspace:*",
         "remotion": "workspace:*",
@@ -1208,7 +1210,7 @@
     },
     "packages/lottie": {
       "name": "@remotion/lottie",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -1228,7 +1230,7 @@
     },
     "packages/mac-cursors": {
       "name": "@remotion/mac-cursors",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -1246,7 +1248,7 @@
     },
     "packages/maptiler": {
       "name": "@remotion/maptiler",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@maptiler/sdk": "4.0.2",
         "@turf/turf": "7.3.2",
@@ -1266,7 +1268,7 @@
     },
     "packages/mcp": {
       "name": "@remotion/mcp",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "bin": {
         "remotion-mcp": "./dist/esm/index.mjs",
       },
@@ -1283,7 +1285,7 @@
     },
     "packages/media": {
       "name": "@remotion/media",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "mediabunny": "catalog:",
         "remotion": "workspace:*",
@@ -1307,7 +1309,7 @@
     },
     "packages/media-parser": {
       "name": "@remotion/media-parser",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@remotion/example-videos": "workspace:*",
@@ -1320,7 +1322,7 @@
     },
     "packages/media-utils": {
       "name": "@remotion/media-utils",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "mediabunny": "catalog:",
         "remotion": "workspace:*",
@@ -1337,7 +1339,7 @@
     },
     "packages/motion-blur": {
       "name": "@remotion/motion-blur",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -1356,7 +1358,7 @@
     },
     "packages/noise": {
       "name": "@remotion/noise",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
         "simplex-noise": "4.0.1",
@@ -1369,7 +1371,7 @@
     },
     "packages/openai-whisper": {
       "name": "@remotion/openai-whisper",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/captions": "workspace:*",
       },
@@ -1382,7 +1384,7 @@
     },
     "packages/paths": {
       "name": "@remotion/paths",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1391,7 +1393,7 @@
     },
     "packages/player": {
       "name": "@remotion/player",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -1414,7 +1416,7 @@
     },
     "packages/player-a11y": {
       "name": "@remotion/player-a11y",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/player": "workspace:*",
         "remotion": "workspace:*",
@@ -1433,7 +1435,7 @@
     },
     "packages/player-example": {
       "name": "@remotion/player-example",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/bundler": "workspace:*",
         "@remotion/canvas": "workspace:*",
@@ -1456,7 +1458,7 @@
     },
     "packages/preload": {
       "name": "@remotion/preload",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1465,7 +1467,7 @@
     },
     "packages/promo-pages": {
       "name": "@remotion/promo-pages",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@mediabunny/aac-encoder": "catalog:",
         "@mediabunny/ac3": "catalog:",
@@ -1508,7 +1510,7 @@
     },
     "packages/react18-tests": {
       "name": "@remotion/react18-tests",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/zod-types": "workspace:*",
         "@remotion/zod-types-v3": "workspace:*",
@@ -1538,7 +1540,7 @@
     },
     "packages/remotion-media": {
       "name": "@remotion/remotion-media",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/cli": "workspace:*",
         "@remotion/paths": "workspace:*",
@@ -1561,7 +1563,7 @@
     },
     "packages/renderer": {
       "name": "@remotion/renderer",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/licensing": "workspace:*",
         "@remotion/streaming": "workspace:*",
@@ -1599,7 +1601,7 @@
     },
     "packages/rive": {
       "name": "@remotion/rive",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@rive-app/canvas-advanced": "2.31.5",
         "remotion": "workspace:*",
@@ -1618,7 +1620,7 @@
     },
     "packages/rough-notation": {
       "name": "@remotion/rough-notation",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/paths": "workspace:*",
         "remotion": "workspace:*",
@@ -1638,7 +1640,7 @@
     },
     "packages/rounded-text-box": {
       "name": "@remotion/rounded-text-box",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/layout-utils": "workspace:*",
         "@remotion/paths": "workspace:*",
@@ -1651,7 +1653,7 @@
     },
     "packages/serverless": {
       "name": "@remotion/serverless",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/bundler": "workspace:*",
         "@remotion/licensing": "workspace:*",
@@ -1666,7 +1668,7 @@
     },
     "packages/serverless-client": {
       "name": "@remotion/serverless-client",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@remotion/renderer": "workspace:*",
@@ -1678,7 +1680,7 @@
     },
     "packages/sfx": {
       "name": "@remotion/sfx",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1687,7 +1689,7 @@
     },
     "packages/shapes": {
       "name": "@remotion/shapes",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/paths": "workspace:*",
         "remotion": "workspace:*",
@@ -1708,7 +1710,7 @@
     },
     "packages/skia": {
       "name": "@remotion/skia",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -1732,7 +1734,7 @@
     },
     "packages/skills": {
       "name": "@remotion/skills",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/bundler": "workspace:*",
         "@remotion/cli": "workspace:*",
@@ -1750,7 +1752,7 @@
     },
     "packages/skills-evals": {
       "name": "@remotion/skills-evals",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/skills": "workspace:*",
         "react": "catalog:",
@@ -1767,7 +1769,7 @@
     },
     "packages/starburst": {
       "name": "@remotion/starburst",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/effects": "workspace:*",
         "remotion": "workspace:*",
@@ -1787,7 +1789,7 @@
     },
     "packages/streaming": {
       "name": "@remotion/streaming",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1796,7 +1798,7 @@
     },
     "packages/studio": {
       "name": "@remotion/studio",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.31",
         "@remotion/canvas": "workspace:*",
@@ -1836,7 +1838,7 @@
     },
     "packages/studio-codemods": {
       "name": "@remotion/studio-codemods",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@babel/parser": "7.24.1",
         "@babel/types": "7.24.0",
@@ -1853,7 +1855,7 @@
     },
     "packages/studio-protocol": {
       "name": "@remotion/studio-protocol",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -1862,7 +1864,7 @@
     },
     "packages/studio-server": {
       "name": "@remotion/studio-server",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@babel/parser": "7.24.1",
         "@babel/types": "7.24.0",
@@ -1894,7 +1896,7 @@
     },
     "packages/studio-shared": {
       "name": "@remotion/studio-shared",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/studio-protocol": "workspace:*",
         "remotion": "workspace:*",
@@ -1908,7 +1910,7 @@
     },
     "packages/svg-3d-engine": {
       "name": "@remotion/svg-3d-engine",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/paths": "workspace:*",
       },
@@ -1920,7 +1922,7 @@
     },
     "packages/tailwind": {
       "name": "@remotion/tailwind",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "autoprefixer": "10.4.20",
         "css-loader": "7.1.4",
@@ -1943,7 +1945,7 @@
     },
     "packages/tailwind-v4": {
       "name": "@remotion/tailwind-v4",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@tailwindcss/webpack": "4.2.0",
         "css-loader": "7.1.4",
@@ -2667,7 +2669,7 @@
     },
     "packages/test-utils": {
       "name": "@remotion/test-utils",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "devDependencies": {
         "@remotion/eslint-config-internal": "workspace:*",
         "@typescript/native-preview": "catalog:",
@@ -2679,7 +2681,7 @@
     },
     "packages/three": {
       "name": "@remotion/three",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -2706,7 +2708,7 @@
     },
     "packages/timeline-utils": {
       "name": "@remotion/timeline-utils",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "mediabunny": "catalog:",
         "remotion": "workspace:*",
@@ -2720,7 +2722,7 @@
     },
     "packages/transitions": {
       "name": "@remotion/transitions",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/paths": "workspace:*",
         "@remotion/shapes": "workspace:*",
@@ -2744,7 +2746,7 @@
     },
     "packages/vercel": {
       "name": "@remotion/vercel",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/renderer": "workspace:*",
         "remotion": "workspace:*",
@@ -2762,7 +2764,7 @@
     },
     "packages/web-renderer": {
       "name": "@remotion/web-renderer",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@mediabunny/aac-encoder": "catalog:",
         "@mediabunny/flac-encoder": "catalog:",
@@ -2800,7 +2802,7 @@
     },
     "packages/webcodecs": {
       "name": "@remotion/webcodecs",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/media-parser": "workspace:*",
       },
@@ -2817,7 +2819,7 @@
     },
     "packages/whisper-web": {
       "name": "@remotion/whisper-web",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/captions": "workspace:*",
       },
@@ -2829,7 +2831,7 @@
     },
     "packages/whisper-webgpu": {
       "name": "@remotion/whisper-webgpu",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@huggingface/transformers": "catalog:",
         "@remotion/captions": "workspace:*",
@@ -2842,7 +2844,7 @@
     },
     "packages/zod-types": {
       "name": "@remotion/zod-types",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "remotion": "workspace:*",
       },
@@ -2855,7 +2857,7 @@
     },
     "packages/zod-types-v3": {
       "name": "@remotion/zod-types-v3",
-      "version": "4.0.518",
+      "version": "4.0.519",
       "dependencies": {
         "@remotion/zod-types": "workspace:*",
         "remotion": "workspace:*",
diff --git a/packages/animated-emoji/package.json b/packages/animated-emoji/package.json
index 5729a1acc7d..7664d5b1706 100644
--- a/packages/animated-emoji/package.json
+++ b/packages/animated-emoji/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/animated-emoji",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
 	"module": "dist/esm/index.mjs",
diff --git a/packages/animation-utils/package.json b/packages/animation-utils/package.json
index 32cb030f572..78ac0455ac9 100644
--- a/packages/animation-utils/package.json
+++ b/packages/animation-utils/package.json
@@ -7,7 +7,7 @@
 		"name": "Chetan Karwa",
 		"email": "cbkarwa@gmail.com"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Helpers for animating CSS properties",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
diff --git a/packages/astro-example/package.json b/packages/astro-example/package.json
index de429577188..0fc8c7e5f06 100644
--- a/packages/astro-example/package.json
+++ b/packages/astro-example/package.json
@@ -5,7 +5,7 @@
 	"name": "@remotion/astro-example",
 	"private": true,
 	"type": "module",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {
 		"dev": "astro dev",
 		"start": "astro dev",
diff --git a/packages/babel-loader/package.json b/packages/babel-loader/package.json
index 0238d7ae9c7..1b810b89796 100644
--- a/packages/babel-loader/package.json
+++ b/packages/babel-loader/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/babel-loader"
 	},
 	"name": "@remotion/babel-loader",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Babel loader for Remotion",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/brand/package.json b/packages/brand/package.json
index ad7deee80fa..c446433b812 100644
--- a/packages/brand/package.json
+++ b/packages/brand/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/brand"
 	},
 	"name": "@remotion/brand",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"sideEffects": [
 		"*.css"
diff --git a/packages/browser-studio/package.json b/packages/browser-studio/package.json
index b091a500822..b7d6c41e08a 100644
--- a/packages/browser-studio/package.json
+++ b/packages/browser-studio/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/browser-studio",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Run Remotion Studio in the browser",
 	"main": "dist/esm/index.mjs",
 	"types": "dist/index.d.ts",
diff --git a/packages/bugs/package.json b/packages/bugs/package.json
index 869fa7fc480..2019d942ecb 100644
--- a/packages/bugs/package.json
+++ b/packages/bugs/package.json
@@ -4,5 +4,5 @@
 	},
 	"name": "bugs",
 	"private": true,
-	"version": "4.0.518"
+	"version": "4.0.519"
 }
diff --git a/packages/bundler/package.json b/packages/bundler/package.json
index 424c5654ed5..b1755bf1e78 100644
--- a/packages/bundler/package.json
+++ b/packages/bundler/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/bundler"
 	},
 	"name": "@remotion/bundler",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Bundle Remotion compositions using Webpack",
 	"main": "dist/index.js",
 	"bugs": {
diff --git a/packages/canvas-capture-extension/package.json b/packages/canvas-capture-extension/package.json
index ff42eae8f46..5a2b648c8a9 100644
--- a/packages/canvas-capture-extension/package.json
+++ b/packages/canvas-capture-extension/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/canvas-capture-extension",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/packages/canvas/package.json b/packages/canvas/package.json
index baed23c55c3..bde1f5bf5bc 100644
--- a/packages/canvas/package.json
+++ b/packages/canvas/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/canvas"
 	},
 	"name": "@remotion/canvas",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Headless primitives for Remotion authoring interfaces",
 	"main": "dist/index.cjs",
 	"types": "dist/index.d.ts",
diff --git a/packages/captions/package.json b/packages/captions/package.json
index 79b79c7e985..fa2b323d796 100644
--- a/packages/captions/package.json
+++ b/packages/captions/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/captions"
 	},
 	"name": "@remotion/captions",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Primitives for dealing with captions",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/claude-code-plugin/.claude-plugin/plugin.json b/packages/claude-code-plugin/.claude-plugin/plugin.json
index bb0d5bebe5b..9f29ab90c93 100644
--- a/packages/claude-code-plugin/.claude-plugin/plugin.json
+++ b/packages/claude-code-plugin/.claude-plugin/plugin.json
@@ -2,7 +2,7 @@
 	"$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
 	"name": "remotion",
 	"displayName": "Remotion",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Remotion video creation skills — best practices, animations, audio, captions, 3D, and more for building programmatic videos with React.",
 	"author": {
 		"name": "Remotion",
diff --git a/packages/claude-code-plugin/package.json b/packages/claude-code-plugin/package.json
index aaed54317d3..1e387144750 100644
--- a/packages/claude-code-plugin/package.json
+++ b/packages/claude-code-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/claude-code-plugin",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"repository": {
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 86b60265bee..26091a4a464 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/cli"
 	},
 	"name": "@remotion/cli",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Control Remotion features using the `npx remotion` command",
 	"main": "dist/index.js",
 	"bin": {
diff --git a/packages/cloudrun/container/package.json b/packages/cloudrun/container/package.json
index 753664ed113..d2dea479269 100644
--- a/packages/cloudrun/container/package.json
+++ b/packages/cloudrun/container/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "cloud-run-render",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Render media and stills on GCP Cloud Run",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/cloudrun/package.json b/packages/cloudrun/package.json
index dd39e8fb720..414b2d48527 100644
--- a/packages/cloudrun/package.json
+++ b/packages/cloudrun/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/cloudrun"
 	},
 	"name": "@remotion/cloudrun",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Render Remotion videos on Google Cloud Run",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/codex-plugin/.codex-plugin/plugin.json b/packages/codex-plugin/.codex-plugin/plugin.json
index 058820d01cf..309931c92b5 100644
--- a/packages/codex-plugin/.codex-plugin/plugin.json
+++ b/packages/codex-plugin/.codex-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Remotion video creation skills — best practices, animations, audio, captions, 3D, and more for building programmatic videos with React.",
 	"author": {
 		"name": "Remotion",
diff --git a/packages/codex-plugin/package.json b/packages/codex-plugin/package.json
index 80baacbe5e6..461b3641b79 100644
--- a/packages/codex-plugin/package.json
+++ b/packages/codex-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/codex-plugin",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"repository": {
diff --git a/packages/codex-plugin/plugin.json b/packages/codex-plugin/plugin.json
index a642f49f65f..532044b4339 100644
--- a/packages/codex-plugin/plugin.json
+++ b/packages/codex-plugin/plugin.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
 	"name": "remotion",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Remotion video creation skills — best practices, animations, audio, captions, 3D, and more for building programmatic videos with React.",
 	"author": {
 		"name": "Remotion",
diff --git a/packages/compositor-darwin-arm64/package.json b/packages/compositor-darwin-arm64/package.json
index 4ccb403cba2..cea50545d79 100644
--- a/packages/compositor-darwin-arm64/package.json
+++ b/packages/compositor-darwin-arm64/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-darwin-arm64"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-darwin-arm64",
 	"os": [
 		"darwin"
diff --git a/packages/compositor-darwin-x64/package.json b/packages/compositor-darwin-x64/package.json
index 6395cb4b9bd..efcdb226fc0 100644
--- a/packages/compositor-darwin-x64/package.json
+++ b/packages/compositor-darwin-x64/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-darwin-x64"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-darwin-x64",
 	"os": [
 		"darwin"
diff --git a/packages/compositor-linux-arm64-gnu/package.json b/packages/compositor-linux-arm64-gnu/package.json
index 0bf09b44db4..1c73734136c 100644
--- a/packages/compositor-linux-arm64-gnu/package.json
+++ b/packages/compositor-linux-arm64-gnu/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-linux-arm64-gnu"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-linux-arm64-gnu",
 	"os": [
 		"linux"
diff --git a/packages/compositor-linux-arm64-musl/package.json b/packages/compositor-linux-arm64-musl/package.json
index a84bf39b9b4..c3687e2ad38 100644
--- a/packages/compositor-linux-arm64-musl/package.json
+++ b/packages/compositor-linux-arm64-musl/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-linux-arm64-musl"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-linux-arm64-musl",
 	"os": [
 		"linux"
diff --git a/packages/compositor-linux-x64-gnu/package.json b/packages/compositor-linux-x64-gnu/package.json
index e4bae653ea2..da33e9df734 100644
--- a/packages/compositor-linux-x64-gnu/package.json
+++ b/packages/compositor-linux-x64-gnu/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-linux-x64-gnu"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-linux-x64-gnu",
 	"os": [
 		"linux"
diff --git a/packages/compositor-linux-x64-musl/package.json b/packages/compositor-linux-x64-musl/package.json
index 2358499e5fc..302c29d65eb 100644
--- a/packages/compositor-linux-x64-musl/package.json
+++ b/packages/compositor-linux-x64-musl/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-linux-x64-musl"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-linux-x64-musl",
 	"os": [
 		"linux"
diff --git a/packages/compositor-win32-x64-msvc/package.json b/packages/compositor-win32-x64-msvc/package.json
index 3b2def6fcc7..08d7cb0d736 100644
--- a/packages/compositor-win32-x64-msvc/package.json
+++ b/packages/compositor-win32-x64-msvc/package.json
@@ -2,7 +2,7 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor-win32-x64-msvc"
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"name": "@remotion/compositor-win32-x64-msvc",
 	"os": [
 		"win32"
diff --git a/packages/compositor/package.json b/packages/compositor/package.json
index 6655455bb43..9969f39167d 100644
--- a/packages/compositor/package.json
+++ b/packages/compositor/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/compositor"
 	},
 	"name": "@remotion/compositor",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Rust binary for Remotion",
 	"scripts": {
 		"build-all": "bun build.ts --all"
diff --git a/packages/convert/package.json b/packages/convert/package.json
index d59189365df..d124f4e7eed 100644
--- a/packages/convert/package.json
+++ b/packages/convert/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/convert",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
diff --git a/packages/core/package.json b/packages/core/package.json
index 8fc3510dc54..a5e7cc28b0c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/core/src/version.ts b/packages/core/src/version.ts
index 50a9667f921..664b485c814 100644
--- a/packages/core/src/version.ts
+++ b/packages/core/src/version.ts
@@ -5,4 +5,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export const VERSION = '4.0.518';
+export const VERSION = '4.0.519';
diff --git a/packages/create-video/package.json b/packages/create-video/package.json
index d928ac8fc1f..683c4d97ec0 100644
--- a/packages/create-video/package.json
+++ b/packages/create-video/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/create-video"
 	},
 	"name": "create-video",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Create a new Remotion project",
 	"main": "dist/index.js",
 	"bin": {
diff --git a/packages/design/package.json b/packages/design/package.json
index 611a7075622..085406fbca9 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/design",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
diff --git a/packages/discord-poster/package.json b/packages/discord-poster/package.json
index 3a7dd48a90c..c3bb6835046 100644
--- a/packages/discord-poster/package.json
+++ b/packages/discord-poster/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/discord-poster"
 	},
 	"name": "@remotion/discord-poster",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"type": "module",
 	"scripts": {
diff --git a/packages/docs/docs/resources.mdx b/packages/docs/docs/resources.mdx
index 568d936975b..410609e2bc9 100644
--- a/packages/docs/docs/resources.mdx
+++ b/packages/docs/docs/resources.mdx
@@ -24,6 +24,7 @@ This list tries to compile all templates, libraries, building blocks and example
 - [Free Remotion Components](https://www.clippkit.com/)
 - [Remotion Bits - Ready-made blocks to use for you and your agents](https://remotion-bits.dev/)
 - [SwiftClip - 30 production-ready Remotion templates](https://swift-clip.vercel.app/) ([Source code](https://github.com/zz41354899/SwiftClip))
+- [RenderComp Free - 50 MIT-licensed Remotion templates](https://rendercomp.com/free) ([Source code](https://github.com/RenderComp/free-remotion-templates))
 - Docker Build & Render ([Source code](https://github.com/scotthavird/remotion-docker-template))
 - [Template for deploying Remotion on Railway](https://railway.com/deploy/remotion-on-rails) ([Blog](https://medium.com/@viveknathani/remotion-on-rails-0852acc9595e))
 - [Multiple shared Remotion components in a Monorepo template](https://github.com/Takamasa045/remotion-studio-monorepo)
diff --git a/packages/docs/elements/audio/oscilloscope/audio-oscilloscope.tsx b/packages/docs/elements/audio/oscilloscope/audio-oscilloscope.tsx
index c11fcab332b..bda47ea1664 100644
--- a/packages/docs/elements/audio/oscilloscope/audio-oscilloscope.tsx
+++ b/packages/docs/elements/audio/oscilloscope/audio-oscilloscope.tsx
@@ -35,7 +35,7 @@ const audioOscilloscopeSchema = {
 	},
 	lineColor: {
 		type: 'color',
-		default: '#55e6ff',
+		default: '#0b84f3',
 		description: 'Waveform color',
 	},
 	lineWidth: {
@@ -170,7 +170,7 @@ const AudioOscilloscopeInner = forwardRef<
 			amplitude = 2,
 			audioSrc = 'https://remotion.media/elements/remotion-made-this-picture-move.mp3',
 			controls,
-			lineColor = '#55e6ff',
+			lineColor = '#0b84f3',
 			lineWidth = 6,
 			name,
 			style,
diff --git a/packages/docs/elements/backgrounds/liquid-contours/liquid-contours.tsx b/packages/docs/elements/backgrounds/liquid-contours/liquid-contours.tsx
index 672bd50475c..4f4c995c275 100644
--- a/packages/docs/elements/backgrounds/liquid-contours/liquid-contours.tsx
+++ b/packages/docs/elements/backgrounds/liquid-contours/liquid-contours.tsx
@@ -8,10 +8,13 @@ export const LiquidContours: React.FC = () => {
 
 	return (
 		<Solid
+			color="#dff4ff"
 			width={width}
 			height={height}
 			effects={[
 				liquidContours({
+					firstColor: '#dff4ff',
+					secondColor: '#7cc6ff',
 					phase: interpolate(frame, [0, 240], [3.23, 4.23]),
 				}),
 			]}
diff --git a/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx b/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx
index b5a4a5f704c..3c805961fde 100644
--- a/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx
+++ b/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx
@@ -44,7 +44,7 @@ const desiredFontSize = 80;
 const maximumTextWidth = 800;
 const fontWeight = '700';
 const textColor = '#ffffff';
-const highlightColor = '#18ff0e';
+const highlightColor = '#4da3ff';
 const activeWordScale = 1.03;
 const defaultCombineTokensWithinMilliseconds = 800;
 
diff --git a/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx b/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx
index d6b54bfa01c..e2062e6222e 100644
--- a/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx
+++ b/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx
@@ -42,7 +42,7 @@ const desiredFontSize = 80;
 const maximumTextWidth = 800;
 const fontWeight = '700';
 const textColor = '#ffffff';
-const highlightColor = '#18ff0e';
+const highlightColor = '#4da3ff';
 const defaultCombineTokensWithinMilliseconds = 800;
 
 const wordHighlightCaptionsSchema = {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6e899a24c9d..0f617e5b2f3 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "docs",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {
 		"formatting": "oxfmt src standalone --check",
 		"format": "oxfmt src standalone",
@@ -44,6 +44,7 @@
 		"@remotion/animated-emoji": "workspace:*",
 		"@remotion/animation-utils": "workspace:*",
 		"@remotion/babel-loader": "workspace:*",
+		"@remotion/brand": "workspace:*",
 		"@remotion/browser-studio": "workspace:*",
 		"@remotion/bundler": "workspace:*",
 		"@remotion/captions": "workspace:*",
diff --git a/packages/docusaurus-plugin/package.json b/packages/docusaurus-plugin/package.json
index 50880ee6ca5..5222add2066 100644
--- a/packages/docusaurus-plugin/package.json
+++ b/packages/docusaurus-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/docusaurus-plugin",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"scripts": {
diff --git a/packages/effects/package.json b/packages/effects/package.json
index 59cd84cda66..5fd889c1ae5 100644
--- a/packages/effects/package.json
+++ b/packages/effects/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/effects",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Effects that can be applied to Remotion-based canvas components",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/elevenlabs/package.json b/packages/elevenlabs/package.json
index c0aa41ca2b0..945e02bf889 100644
--- a/packages/elevenlabs/package.json
+++ b/packages/elevenlabs/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/elevenlabs"
 	},
 	"name": "@remotion/elevenlabs",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Work with the output of the ElevenLabs API",
 	"main": "dist/index.js",
 	"bugs": {
diff --git a/packages/enable-scss/package.json b/packages/enable-scss/package.json
index f907d5b8d73..e482855fe3e 100644
--- a/packages/enable-scss/package.json
+++ b/packages/enable-scss/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/enable-scss"
 	},
 	"name": "@remotion/enable-scss",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Enable SCSS support in Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/eslint-config-flat/package.json b/packages/eslint-config-flat/package.json
index b7b0ab30e90..268b96b180d 100644
--- a/packages/eslint-config-flat/package.json
+++ b/packages/eslint-config-flat/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-config-flat"
 	},
 	"name": "@remotion/eslint-config-flat",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Default configuration for Remotion templates (ESLint >= 9)",
 	"main": "dist/esm/index.mjs",
 	"type": "module",
diff --git a/packages/eslint-config-internal/package.json b/packages/eslint-config-internal/package.json
index 953a57937d9..9d8e25918b3 100644
--- a/packages/eslint-config-internal/package.json
+++ b/packages/eslint-config-internal/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-config-internal"
 	},
 	"name": "@remotion/eslint-config-internal",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index 451435ee42f..d501c83085d 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-config"
 	},
 	"name": "@remotion/eslint-config",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Default configuration for Remotion templates (ESLint <= 8)",
 	"main": "dist/index.js",
 	"files": [
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 47fe8953c32..00519e8fa2e 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/eslint-plugin"
 	},
 	"name": "@remotion/eslint-plugin",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Rules for writing Remotion code",
 	"scripts": {
 		"test": "node src/tests/execute.mjs",
diff --git a/packages/example-videos/package.json b/packages/example-videos/package.json
index a017ad089db..4cacd4d8878 100644
--- a/packages/example-videos/package.json
+++ b/packages/example-videos/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/example-videos"
 	},
 	"name": "@remotion/example-videos",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"scripts": {
diff --git a/packages/example-without-zod/package.json b/packages/example-without-zod/package.json
index 5afae6bdb2a..37c6bed59a6 100644
--- a/packages/example-without-zod/package.json
+++ b/packages/example-without-zod/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/example-without-zod",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"author": "Jonny Burger",
 	"main": "dist/index.js",
diff --git a/packages/example/e2e/inspector-control-layout.test.mts b/packages/example/e2e/inspector-control-layout.test.mts
index 6561b94c672..77e988dad1b 100644
--- a/packages/example/e2e/inspector-control-layout.test.mts
+++ b/packages/example/e2e/inspector-control-layout.test.mts
@@ -61,7 +61,7 @@ test.describe('Inspector control layout', () => {
 		await stopStudio();
 	});
 
-	test('does not indent controls after array fields', async ({page}) => {
+	test('keeps inspector controls aligned', async ({page}) => {
 		await page.goto(`${STUDIO_URL}/inspector-control-layout-e2e`);
 		await expect(page).toHaveURL(/inspector-control-layout-e2e/, {
 			timeout: 15_000,
@@ -92,6 +92,18 @@ test.describe('Inspector control layout', () => {
 			.getByRole('button', {name: 'Add keyframe'})
 			.first();
 		const colorButton = page.getByRole('button', {name: '#ff5c4d'});
+		const sourceAction = page.getByRole('button', {name: 'tablet.mp4'});
+		const duplicateAction = page.getByRole('button', {
+			name: 'Duplicate',
+			exact: true,
+		});
+		const [sourceActionBox, duplicateActionBox] = await Promise.all([
+			getBox(sourceAction),
+			getBox(duplicateAction),
+		]);
+		expect(
+			Math.abs(sourceActionBox.x - duplicateActionBox.x),
+		).toBeLessThanOrEqual(1);
 
 		await expectInspectorControlsToUseAvailableWidth(
 			origin,
diff --git a/packages/example/e2e/studio.test.mts b/packages/example/e2e/studio.test.mts
index 6dfb1e38df4..c4df58a209a 100644
--- a/packages/example/e2e/studio.test.mts
+++ b/packages/example/e2e/studio.test.mts
@@ -348,6 +348,67 @@ test.describe('visual mode', () => {
 			await page.goto(`${STUDIO_URL}/effect-keyframe-e2e`);
 			const timeline = page.locator('[data-timeline-scrollable]');
 			await expect(timeline).toBeVisible();
+			const timelineBox = await timeline.boundingBox();
+			if (timelineBox === null) {
+				throw new Error('Expected timeline to have a bounding box');
+			}
+
+			const dragData = StudioProtocolInternals.makeDragData({
+				type: 'asset',
+				assetPath: 'quick.mov',
+				durationInSeconds: 5.866667,
+				height: null,
+				width: null,
+			});
+			const dragAssetOver = (target: Locator) => {
+				return target.evaluate(
+					(element, {coordinates, data}) => {
+						const dataTransfer = new DataTransfer();
+						dataTransfer.setData(data.mimeType, data.payload);
+						element.dispatchEvent(
+							new DragEvent('dragover', {
+								bubbles: true,
+								cancelable: true,
+								clientX: coordinates.clientX,
+								clientY: coordinates.clientY,
+								dataTransfer,
+							}),
+						);
+					},
+					{
+						coordinates: {
+							clientX: timelineBox.x + timelineBox.width / 2,
+							clientY: timelineBox.y + timelineBox.height / 2,
+						},
+						data: dragData,
+					},
+				);
+			};
+			const dropIndicator = page.locator(
+				'[data-timeline-asset-drop-indicator]',
+			);
+			await dragAssetOver(timeline);
+			await expect(dropIndicator).toBeVisible();
+			await page.evaluate(() => {
+				document.dispatchEvent(new DragEvent('dragend', {bubbles: true}));
+			});
+			await expect(dropIndicator).toBeHidden();
+
+			await page.getByRole('button', {name: /Search\.\.\./}).click();
+			const quickSwitcher = page.getByRole('dialog');
+			await quickSwitcher.getByRole('textbox').fill('> Settings');
+			await quickSwitcher.getByText('Settings...', {exact: true}).click();
+			const settings = page.getByRole('dialog');
+			await expect(
+				settings.getByText('Default codec', {exact: true}),
+			).toBeVisible();
+			await dragAssetOver(settings);
+			await expect(dropIndicator).toBeHidden();
+			await expect(
+				settings.getByText('Default codec', {exact: true}),
+			).toBeVisible();
+			await page.keyboard.press('Escape');
+
 			expect(await dropFile({...file, target: timeline})).toBe(true);
 			await expect(modalTitle).toBeVisible();
 		} finally {
diff --git a/packages/example/package.json b/packages/example/package.json
index ddae347986b..4f4d41a662e 100644
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/example",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"author": "Jonny Burger",
 	"main": "dist/index.js",
diff --git a/packages/example/src/InspectorControlLayoutE2e.tsx b/packages/example/src/InspectorControlLayoutE2e.tsx
index 1e82642c921..b8322a3b7a2 100644
--- a/packages/example/src/InspectorControlLayoutE2e.tsx
+++ b/packages/example/src/InspectorControlLayoutE2e.tsx
@@ -3,11 +3,17 @@ import {
 	AbsoluteFill,
 	Interactive,
 	Sequence,
+	staticFile,
 	type InteractivitySchema,
 	type SequenceControls,
 } from 'remotion';
 
 const inspectorControlLayoutSchema = {
+	src: {
+		type: 'asset',
+		default: undefined,
+		description: 'Source',
+	},
 	first: {
 		type: 'array',
 		item: {type: 'number', step: 0.0001},
@@ -49,6 +55,7 @@ const inspectorControlLayoutSchema = {
 
 type InspectorControlLayoutProps = {
 	readonly name: string;
+	readonly src: string;
 	readonly first: readonly number[];
 	readonly second: readonly number[];
 	readonly label: string;
@@ -80,6 +87,7 @@ export const InspectorControlLayoutE2e: React.FC = () => {
 	return (
 		<InteractiveInspectorControlLayout
 			name="Inspector control layout"
+			src={staticFile('tablet.mp4')}
 			first={[-0.1276, 51.5072]}
 			second={[139.6917, 35.6895]}
 			label="London"
diff --git a/packages/example/src/MovingPillCaptionsComposition.tsx b/packages/example/src/MovingPillCaptionsComposition.tsx
new file mode 100644
index 00000000000..cb648c74bfb
--- /dev/null
+++ b/packages/example/src/MovingPillCaptionsComposition.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {MovingPillCaptions} from './moving-pill-captions.element';
+import {AudioOscilloscope} from './oscilloscope.element';
+
+export const MovingPillCaptionsComposition: React.FC = () => {
+	return (
+		<>
+			<MovingPillCaptions
+				durationInFrames={210}
+				name="Moving Pill Captions"
+				style={{
+					position: 'absolute',
+					translate: '-12.2px -10.3px',
+				}}
+			/>
+			<AudioOscilloscope
+				durationInFrames={271}
+				name="Audio Oscilloscope"
+				style={{
+					position: 'absolute',
+					translate: '-28.2px -67.4px',
+				}}
+			/>
+		</>
+	);
+};
diff --git a/packages/example/src/mirrored-spectrum.element.tsx b/packages/example/src/mirrored-spectrum.element.tsx
new file mode 100644
index 00000000000..e9632dd0d4b
--- /dev/null
+++ b/packages/example/src/mirrored-spectrum.element.tsx
@@ -0,0 +1,176 @@
+import {Audio} from '@remotion/media';
+import {useWindowedAudioData, visualizeAudio} from '@remotion/media-utils';
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import {
+	Interactive,
+	Sequence,
+	useCurrentFrame,
+	useVideoConfig,
+	type InteractiveBaseProps,
+	type InteractiveTransformProps,
+	type InteractivitySchema,
+	type SequenceControls,
+} from 'remotion';
+
+type MirroredAudioSpectrumProps = InteractiveBaseProps &
+	InteractiveTransformProps & {
+		readonly audioSrc?: string;
+		readonly barColor?: string;
+		readonly numberOfBars?: number;
+		readonly sensitivity?: number;
+	};
+
+const mirroredAudioSpectrumSchema = {
+	...Interactive.baseSchema,
+	audioSrc: {
+		type: 'asset',
+		default:
+			'https://remotion.media/elements/remotion-made-this-picture-move.mp3',
+		description: 'Audio source',
+	},
+	barColor: {
+		type: 'color',
+		default: '#0b84f3',
+		description: 'Bar color',
+	},
+	numberOfBars: {
+		type: 'number',
+		min: 3,
+		max: 127,
+		step: 2,
+		default: 65,
+		description: 'Number of bars',
+		hiddenFromList: false,
+		keyframable: false,
+	},
+	sensitivity: {
+		type: 'number',
+		min: 0.25,
+		max: 3,
+		step: 0.05,
+		default: 1.5,
+		description: 'Sensitivity',
+		hiddenFromList: false,
+	},
+	...Interactive.transformSchema,
+} as const satisfies InteractivitySchema;
+
+const MirroredAudioSpectrumContent: React.FC<{
+	readonly audioSrc: string;
+	readonly barColor: string;
+	readonly numberOfBars: number;
+	readonly outlineRef: React.RefObject<HTMLDivElement | null>;
+	readonly sensitivity: number;
+	readonly style: MirroredAudioSpectrumProps['style'];
+}> = ({audioSrc, barColor, numberOfBars, outlineRef, sensitivity, style}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+	const {audioData, dataOffsetInSeconds} = useWindowedAudioData({
+		fps,
+		frame,
+		src: audioSrc,
+		windowInSeconds: 10,
+	});
+	const roundedNumberOfBars = Math.max(
+		3,
+		Math.min(127, Math.round(numberOfBars)),
+	);
+	const numberOfFrequencies = Math.ceil(roundedNumberOfBars / 2);
+	const frequencyData = audioData
+		? visualizeAudio({
+				audioData,
+				dataOffsetInSeconds,
+				fps,
+				frame,
+				numberOfSamples: 256,
+				optimizeFor: 'speed',
+			})
+		: [];
+	const frequencyDataSubset = frequencyData.slice(0, numberOfFrequencies);
+	const frequenciesToDisplay = [
+		...frequencyDataSubset.slice(roundedNumberOfBars % 2).reverse(),
+		...frequencyDataSubset,
+	];
+
+	return (
+		<div
+			ref={outlineRef}
+			style={{
+				alignItems: 'center',
+				boxSizing: 'border-box',
+				display: 'flex',
+				gap: 8,
+				height: 300,
+				justifyContent: 'center',
+				width: 900,
+				...style,
+			}}
+		>
+			<Audio showInTimeline={false} src={audioSrc} />
+			{frequenciesToDisplay.map((value, index) => (
+				<div
+					key={index}
+					style={{
+						backgroundColor: barColor,
+						borderRadius: 999,
+						flex: 1,
+						height: Math.max(
+							4,
+							Math.min(300, 300 * Math.sqrt(value) * sensitivity),
+						),
+						minWidth: 2,
+					}}
+				/>
+			))}
+		</div>
+	);
+};
+
+const MirroredAudioSpectrumInner = forwardRef<
+	HTMLDivElement,
+	MirroredAudioSpectrumProps & {readonly controls: SequenceControls | undefined}
+>(
+	(
+		{
+			audioSrc = 'https://remotion.media/elements/remotion-made-this-picture-move.mp3',
+			barColor = '#0b84f3',
+			controls,
+			name,
+			numberOfBars = 65,
+			sensitivity = 1.5,
+			style,
+			...sequenceProps
+		},
+		ref,
+	) => {
+		const outlineRef = useRef<HTMLDivElement>(null);
+		useImperativeHandle(ref, () => outlineRef.current as HTMLDivElement, []);
+
+		return (
+			<Sequence
+				layout="none"
+				{...sequenceProps}
+				controls={controls}
+				name={name ?? 'Mirrored audio spectrum'}
+				outlineRef={outlineRef}
+			>
+				<MirroredAudioSpectrumContent
+					audioSrc={audioSrc}
+					barColor={barColor}
+					numberOfBars={numberOfBars}
+					outlineRef={outlineRef}
+					sensitivity={sensitivity}
+					style={style}
+				/>
+			</Sequence>
+		);
+	},
+);
+
+export const MirroredAudioSpectrum = Interactive.withSchema({
+	Component: MirroredAudioSpectrumInner,
+	componentName: '<MirroredAudioSpectrum>',
+	componentIdentity: null,
+	schema: mirroredAudioSpectrumSchema,
+	supportsEffects: false,
+}) as React.FC<MirroredAudioSpectrumProps>;
diff --git a/packages/example/src/moving-pill-captions.element.tsx b/packages/example/src/moving-pill-captions.element.tsx
new file mode 100644
index 00000000000..a80f5808fcb
--- /dev/null
+++ b/packages/example/src/moving-pill-captions.element.tsx
@@ -0,0 +1,573 @@
+import type {Caption, TikTokPage, TikTokToken} from '@remotion/captions';
+import {createTikTokStyleCaptions} from '@remotion/captions';
+import {loadFont} from '@remotion/google-fonts/Montserrat';
+import {fitText} from '@remotion/layout-utils';
+import React, {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import {
+	cancelRender,
+	Interactive,
+	interpolate,
+	Sequence,
+	spring,
+	useCurrentFrame,
+	useVideoConfig,
+	type InteractiveBaseProps,
+	type InteractiveTransformProps,
+	type InteractivitySchema,
+	type SequenceControls,
+	type SequenceProps,
+} from 'remotion';
+
+type MovingPillCaptionsProps = InteractiveBaseProps &
+	InteractiveTransformProps &
+	Pick<SequenceProps, 'width' | 'height'> & {
+		readonly captions?: Caption[];
+		readonly combineTokensWithinMilliseconds?: number;
+	};
+
+type MovingPillCaptionsLayerProps = Omit<
+	MovingPillCaptionsProps,
+	'captions'
+> & {
+	readonly callerStyle: React.CSSProperties | null;
+	readonly captions: Caption[];
+};
+
+const desiredFontSize = 80;
+const maximumTextWidth = 800;
+const fontWeight = '700';
+const textColor = '#ffffff';
+const backgroundColor = '#0b84f3';
+const pillHorizontalPadding = 12;
+const pillVerticalPadding = 12;
+const pillBorderRadius = 10;
+const pillMoveDurationInFrames = 5;
+const defaultCombineTokensWithinMilliseconds = 800;
+
+const movingPillCaptionsSchema = {
+	...Interactive.baseSchema,
+	...Interactive.captionsSchema,
+	width: {
+		type: 'number',
+		min: 1,
+		step: 1,
+		default: undefined,
+		description: 'Caption area width',
+		hiddenFromList: false,
+	},
+	height: {
+		type: 'number',
+		min: 1,
+		step: 1,
+		default: undefined,
+		description: 'Caption area height',
+		hiddenFromList: false,
+	},
+	combineTokensWithinMilliseconds: {
+		type: 'number',
+		min: 0,
+		step: 50,
+		default: defaultCombineTokensWithinMilliseconds,
+		description: 'Time between caption pages',
+		hiddenFromList: false,
+	},
+	callerStyle: {type: 'hidden'},
+	...Interactive.transformSchema,
+} as const satisfies InteractivitySchema;
+
+const {fontFamily, waitUntilDone} = loadFont('normal', {
+	weights: [fontWeight],
+	subsets: ['latin'],
+});
+
+const frameToMilliseconds = (frame: number, fps: number) =>
+	(frame / fps) * 1000;
+
+const isTimeWithinHalfOpenInterval = (
+	timeMs: number,
+	fromMs: number,
+	toMs: number,
+) => timeMs >= fromMs && timeMs < toMs;
+
+const getActivePageIndex = (
+	pages: readonly Pick<TikTokPage, 'startMs' | 'durationMs'>[],
+	timeMs: number,
+) =>
+	pages.findIndex((page) =>
+		isTimeWithinHalfOpenInterval(
+			timeMs,
+			page.startMs,
+			page.startMs + page.durationMs,
+		),
+	);
+
+const getLatestStartedTokenIndex = (
+	tokens: readonly Pick<TikTokToken, 'fromMs'>[],
+	timeMs: number,
+) =>
+	tokens.reduce(
+		(latestIndex, token, tokenIndex) =>
+			token.fromMs <= timeMs ? tokenIndex : latestIndex,
+		-1,
+	);
+
+type TokenLayout = {
+	readonly height: number;
+	readonly left: number;
+	readonly top: number;
+	readonly width: number;
+};
+
+const CaptionPage: React.FC<{
+	readonly captionAreaWidth: number | null;
+	readonly currentTimeMs: number;
+	readonly fps: number;
+	readonly page: TikTokPage;
+	readonly pageIndex: number;
+}> = ({captionAreaWidth, currentTimeMs, fps, page, pageIndex}) => {
+	const fontSize = useMemo(() => {
+		const availableWidth = Math.min(
+			maximumTextWidth,
+			captionAreaWidth ?? maximumTextWidth,
+		);
+		const maximumTokenWidth = Math.max(
+			1,
+			availableWidth - pillHorizontalPadding * 2,
+		);
+		const tokenFontSizes = page.tokens
+			.map((token) => token.text.trim())
+			.filter(Boolean)
+			.map(
+				(text) =>
+					fitText({
+						fontFamily,
+						fontWeight,
+						text,
+						validateFontIsLoaded: true,
+						withinWidth: maximumTokenWidth,
+					}).fontSize,
+			);
+
+		return Math.min(
+			desiredFontSize,
+			fitText({
+				fontFamily,
+				fontWeight,
+				text: page.text,
+				validateFontIsLoaded: true,
+				withinWidth: maximumTextWidth,
+			}).fontSize,
+			...tokenFontSizes,
+		);
+	}, [captionAreaWidth, page.text, page.tokens]);
+	const textContainerRef = useRef<HTMLDivElement>(null);
+	const tokenRefs = useRef<Array<HTMLSpanElement | null>>([]);
+	const [tokenLayouts, setTokenLayouts] = useState<TokenLayout[]>([]);
+
+	useLayoutEffect(() => {
+		const container = textContainerRef.current;
+
+		if (!container) {
+			return;
+		}
+
+		const updateTokenLayouts = () => {
+			setTokenLayouts(
+				page.tokens.map((_, tokenIndex) => {
+					const token = tokenRefs.current[tokenIndex];
+
+					if (!token) {
+						return {height: 0, left: 0, top: 0, width: 0};
+					}
+
+					return {
+						height: token.offsetHeight,
+						left: token.offsetLeft,
+						top: token.offsetTop,
+						width: token.offsetWidth,
+					};
+				}),
+			);
+		};
+
+		updateTokenLayouts();
+		const resizeObserver = new ResizeObserver(updateTokenLayouts);
+		resizeObserver.observe(container);
+
+		return () => resizeObserver.disconnect();
+	}, [fontSize, page.tokens]);
+	const latestStartedTokenIndex = getLatestStartedTokenIndex(
+		page.tokens,
+		currentTimeMs,
+	);
+	const pageLocalFrame = ((currentTimeMs - page.startMs) / 1000) * fps;
+	const backgroundWordIndex = page.tokens.reduce(
+		(wordIndex, token, tokenIndex) => {
+			if (tokenIndex === 0) {
+				return wordIndex;
+			}
+
+			const tokenStartFrame = ((token.fromMs - page.startMs) / 1000) * fps;
+			return (
+				wordIndex +
+				spring({
+					config: {damping: 100},
+					delay: Math.max(0, tokenStartFrame - pillMoveDurationInFrames / 2),
+					durationInFrames: pillMoveDurationInFrames,
+					fps,
+					frame: pageLocalFrame,
+				})
+			);
+		},
+		0,
+	);
+	const hasTokenLayouts = tokenLayouts.length === page.tokens.length;
+	const clampedBackgroundWordIndex = Math.min(
+		Math.max(backgroundWordIndex, 0),
+		Math.max(0, tokenLayouts.length - 1),
+	);
+	const interpolationInput = tokenLayouts.map((_, tokenIndex) =>
+		Number(tokenIndex),
+	);
+	const interpolateTokenLayout = (values: number[]) => {
+		if (values.length === 0) {
+			return 0;
+		}
+
+		if (values.length === 1) {
+			return values[0];
+		}
+
+		return interpolate(clampedBackgroundWordIndex, interpolationInput, values);
+	};
+	const pillHeight = fontSize + pillVerticalPadding * 2;
+	const pillLeft = interpolateTokenLayout(
+		tokenLayouts.map((measurement) => measurement.left),
+	);
+	const pillTop = interpolateTokenLayout(
+		tokenLayouts.map(
+			(measurement) => measurement.top + (measurement.height - pillHeight) / 2,
+		),
+	);
+	const pillWidth = interpolateTokenLayout(
+		tokenLayouts.map((measurement) => measurement.width),
+	);
+	const textStrokeWidth = fontSize / 7;
+
+	return (
+		<div
+			aria-label={page.text}
+			aria-live="off"
+			role="group"
+			style={{
+				alignItems: 'center',
+				display: 'flex',
+				height: '100%',
+				justifyContent: 'center',
+				width: '100%',
+			}}
+		>
+			<div
+				ref={textContainerRef}
+				aria-hidden="true"
+				style={{
+					color: textColor,
+					fontFamily,
+					fontSize,
+					fontWeight,
+					lineHeight: 1.5,
+					maxWidth: maximumTextWidth,
+					paintOrder: 'stroke fill',
+					position: 'relative',
+					textAlign: 'center',
+					WebkitTextStroke: `${textStrokeWidth}px #000000`,
+					whiteSpace: 'normal',
+					width: '100%',
+				}}
+			>
+				{hasTokenLayouts && latestStartedTokenIndex >= 0 ? (
+					<div
+						aria-hidden="true"
+						style={{
+							backgroundColor,
+							borderRadius: pillBorderRadius,
+							height: pillHeight,
+							left: pillLeft - pillHorizontalPadding,
+							position: 'absolute',
+							top: pillTop,
+							width: pillWidth + pillHorizontalPadding * 2,
+						}}
+					/>
+				) : null}
+				{page.tokens.map((token, tokenIndex) => {
+					const visibleText = token.text.trim();
+					const visibleTextIndex = token.text.indexOf(visibleText);
+					const leadingWhitespace = visibleText
+						? token.text.slice(0, visibleTextIndex)
+						: token.text;
+					const trailingWhitespace = visibleText
+						? token.text.slice(visibleTextIndex + visibleText.length)
+						: '';
+
+					return (
+						<React.Fragment
+							key={`${pageIndex}-${page.startMs}-${token.fromMs}-${tokenIndex}`}
+						>
+							{leadingWhitespace}
+							<span
+								ref={(element) => {
+									tokenRefs.current[tokenIndex] = element;
+								}}
+								style={{
+									color: textColor,
+									display: 'inline-block',
+									position: 'relative',
+									whiteSpace: 'pre',
+									zIndex: 1,
+								}}
+							>
+								{visibleText}
+							</span>
+							{trailingWhitespace}
+						</React.Fragment>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+const MovingPillCaptionsContent: React.FC<{
+	readonly captionAreaWidth: number | null;
+	readonly captions: Caption[];
+	readonly combineTokensWithinMilliseconds: number;
+	readonly fontLoaded: boolean;
+}> = ({
+	captionAreaWidth,
+	captions,
+	combineTokensWithinMilliseconds,
+	fontLoaded,
+}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+	const pages = useMemo(
+		() =>
+			createTikTokStyleCaptions({
+				captions,
+				combineTokensWithinMilliseconds,
+			}).pages,
+		[captions, combineTokensWithinMilliseconds],
+	);
+	const currentTimeMs = frameToMilliseconds(frame, fps);
+	const activePageIndex = getActivePageIndex(pages, currentTimeMs);
+	const page = pages[activePageIndex];
+
+	if (!fontLoaded || !page) {
+		return null;
+	}
+
+	return (
+		<CaptionPage
+			key={`${activePageIndex}-${page.startMs}`}
+			captionAreaWidth={captionAreaWidth}
+			currentTimeMs={currentTimeMs}
+			fps={fps}
+			page={page}
+			pageIndex={activePageIndex}
+		/>
+	);
+};
+
+const MovingPillCaptionsInner = forwardRef<
+	HTMLDivElement,
+	MovingPillCaptionsLayerProps & {
+		readonly controls: SequenceControls | undefined;
+	}
+>(
+	(
+		{
+			callerStyle,
+			captions,
+			combineTokensWithinMilliseconds = defaultCombineTokensWithinMilliseconds,
+			controls,
+			height,
+			name,
+			style,
+			width,
+			...interactiveProps
+		},
+		ref,
+	) => {
+		const outlineRef = useRef<HTMLDivElement>(null);
+		const [fontLoaded, setFontLoaded] = useState(false);
+		const {
+			rotate: callerRotate,
+			scale: callerScale,
+			transform: callerTransform,
+			transformBox: callerTransformBox,
+			transformOrigin: callerTransformOrigin,
+			transformStyle: callerTransformStyle,
+			translate: callerTranslate,
+			...callerContentStyle
+		} = callerStyle ?? {};
+
+		useImperativeHandle(ref, () => outlineRef.current as HTMLDivElement, []);
+
+		useEffect(() => {
+			waitUntilDone()
+				.then(() => {
+					setFontLoaded(true);
+				})
+				.catch((error) => {
+					cancelRender(
+						error instanceof Error ? error : new Error(String(error)),
+					);
+				});
+		}, []);
+
+		return (
+			<Sequence
+				layout="none"
+				{...interactiveProps}
+				controls={controls}
+				name={name ?? '<MovingPillCaptions>'}
+				outlineRef={outlineRef}
+			>
+				<div
+					style={{
+						height: height ?? '100%',
+						rotate: callerRotate,
+						scale: callerScale,
+						transform: callerTransform,
+						transformBox: callerTransformBox,
+						transformOrigin: callerTransformOrigin,
+						transformStyle: callerTransformStyle,
+						translate: callerTranslate,
+						width: width ?? '100%',
+					}}
+				>
+					<div
+						ref={outlineRef}
+						style={{
+							height: '100%',
+							width: '100%',
+							...style,
+							...callerContentStyle,
+						}}
+					>
+						<MovingPillCaptionsContent
+							captionAreaWidth={width ?? null}
+							captions={captions}
+							combineTokensWithinMilliseconds={combineTokensWithinMilliseconds}
+							fontLoaded={fontLoaded}
+						/>
+					</div>
+				</div>
+			</Sequence>
+		);
+	},
+);
+
+const MovingPillCaptionsWithControls: React.FC<
+	MovingPillCaptionsProps & {readonly controls: SequenceControls | undefined}
+> = ({captions, controls, style, ...props}) => {
+	if (captions) {
+		return (
+			<MovingPillCaptionsInner
+				{...props}
+				callerStyle={style ?? null}
+				captions={captions}
+				controls={controls}
+				style={{translate: '0px 0px'}}
+			/>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				alignItems: 'center',
+				display: 'flex',
+				height: 180,
+				justifyContent: 'center',
+				width: 900,
+			}}
+		>
+			<MovingPillCaptionsInner
+				{...props}
+				callerStyle={style ?? null}
+				captions={[
+					{
+						text: 'Captions',
+						startMs: 0,
+						endMs: 800,
+						timestampMs: 400,
+						confidence: null,
+					},
+					{
+						text: ' can',
+						startMs: 800,
+						endMs: 1500,
+						timestampMs: 1150,
+						confidence: null,
+					},
+					{
+						text: ' move',
+						startMs: 1500,
+						endMs: 2300,
+						timestampMs: 1900,
+						confidence: null,
+					},
+					{
+						text: ' with',
+						startMs: 2300,
+						endMs: 3100,
+						timestampMs: 2700,
+						confidence: null,
+					},
+					{
+						text: ' every',
+						startMs: 3100,
+						endMs: 4000,
+						timestampMs: 3550,
+						confidence: null,
+					},
+					{
+						text: ' spoken',
+						startMs: 4000,
+						endMs: 5100,
+						timestampMs: 4550,
+						confidence: null,
+					},
+					{
+						text: ' word.',
+						startMs: 5100,
+						endMs: 6500,
+						timestampMs: 5800,
+						confidence: null,
+					},
+				]}
+				controls={controls}
+				width={props.width ?? 681}
+				height={props.height ?? 252}
+				style={{translate: '0px 0px'}}
+			/>
+		</div>
+	);
+};
+
+export const MovingPillCaptions = Interactive.withSchema({
+	Component: MovingPillCaptionsWithControls,
+	componentName: '<MovingPillCaptions>',
+	componentIdentity: null,
+	schema: movingPillCaptionsSchema,
+	supportsEffects: false,
+}) as React.FC<MovingPillCaptionsProps>;
diff --git a/packages/example/src/oscilloscope.element.tsx b/packages/example/src/oscilloscope.element.tsx
new file mode 100644
index 00000000000..c11fcab332b
--- /dev/null
+++ b/packages/example/src/oscilloscope.element.tsx
@@ -0,0 +1,214 @@
+import {Audio} from '@remotion/media';
+import {
+	createSmoothSvgPath,
+	getWaveformPortion,
+	useWindowedAudioData,
+} from '@remotion/media-utils';
+import React, {forwardRef, useImperativeHandle, useRef} from 'react';
+import {
+	Interactive,
+	Sequence,
+	useCurrentFrame,
+	useVideoConfig,
+	type InteractiveBaseProps,
+	type InteractiveTransformProps,
+	type InteractivitySchema,
+	type SequenceControls,
+} from 'remotion';
+
+type AudioOscilloscopeProps = InteractiveBaseProps &
+	InteractiveTransformProps & {
+		readonly amplitude?: number;
+		readonly audioSrc?: string;
+		readonly lineColor?: string;
+		readonly lineWidth?: number;
+		readonly windowInSeconds?: number;
+	};
+
+const audioOscilloscopeSchema = {
+	...Interactive.baseSchema,
+	audioSrc: {
+		type: 'asset',
+		default:
+			'https://remotion.media/elements/remotion-made-this-picture-move.mp3',
+		description: 'Audio source',
+	},
+	lineColor: {
+		type: 'color',
+		default: '#55e6ff',
+		description: 'Waveform color',
+	},
+	lineWidth: {
+		type: 'number',
+		min: 1,
+		max: 16,
+		step: 1,
+		default: 6,
+		description: 'Line width',
+		hiddenFromList: false,
+	},
+	amplitude: {
+		type: 'number',
+		min: 0.25,
+		max: 4,
+		step: 0.05,
+		default: 2,
+		description: 'Amplitude',
+		hiddenFromList: false,
+	},
+	windowInSeconds: {
+		type: 'number',
+		min: 0.05,
+		max: 1,
+		step: 0.05,
+		default: 0.35,
+		description: 'Time window in seconds',
+		hiddenFromList: false,
+	},
+	...Interactive.transformSchema,
+} as const satisfies InteractivitySchema;
+
+const AudioOscilloscopeContent: React.FC<{
+	readonly amplitude: number;
+	readonly audioSrc: string;
+	readonly lineColor: string;
+	readonly lineWidth: number;
+	readonly outlineRef: React.RefObject<HTMLDivElement | null>;
+	readonly style: AudioOscilloscopeProps['style'];
+	readonly windowInSeconds: number;
+}> = ({
+	amplitude,
+	audioSrc,
+	lineColor,
+	lineWidth,
+	outlineRef,
+	style,
+	windowInSeconds,
+}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+	const {audioData, dataOffsetInSeconds} = useWindowedAudioData({
+		fps,
+		frame,
+		src: audioSrc,
+		windowInSeconds: 10,
+	});
+	const waveform = audioData
+		? getWaveformPortion({
+				audioData,
+				channel: 0,
+				dataOffsetInSeconds,
+				durationInSeconds: windowInSeconds,
+				normalize: false,
+				numberOfSamples: 128,
+				outputRange: 'minus-one-to-one',
+				startTimeInSeconds: frame / fps - windowInSeconds / 2,
+			}).map((sample) => sample.amplitude)
+		: [];
+	const path = createSmoothSvgPath({
+		points: waveform.map((value, index) => ({
+			x:
+				lineWidth * 2 + (index / (waveform.length - 1)) * (900 - lineWidth * 4),
+			y: 150 + value * 150 * amplitude,
+		})),
+	});
+
+	return (
+		<div
+			ref={outlineRef}
+			style={{
+				boxSizing: 'border-box',
+				height: 300,
+				overflow: 'hidden',
+				width: 900,
+				...style,
+			}}
+		>
+			<Audio showInTimeline={false} src={audioSrc} />
+			<svg height={300} viewBox="0 0 900 300" width={900}>
+				<line
+					x1={0}
+					x2={900}
+					y1={150}
+					y2={150}
+					stroke={lineColor}
+					strokeOpacity={0.18}
+					strokeWidth={1}
+				/>
+				{path ? (
+					<>
+						<path
+							d={path}
+							fill="none"
+							stroke={lineColor}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeOpacity={0.22}
+							strokeWidth={lineWidth * 4}
+						/>
+						<path
+							d={path}
+							fill="none"
+							stroke={lineColor}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={lineWidth}
+						/>
+					</>
+				) : null}
+			</svg>
+		</div>
+	);
+};
+
+const AudioOscilloscopeInner = forwardRef<
+	HTMLDivElement,
+	AudioOscilloscopeProps & {readonly controls: SequenceControls | undefined}
+>(
+	(
+		{
+			amplitude = 2,
+			audioSrc = 'https://remotion.media/elements/remotion-made-this-picture-move.mp3',
+			controls,
+			lineColor = '#55e6ff',
+			lineWidth = 6,
+			name,
+			style,
+			windowInSeconds = 0.35,
+			...sequenceProps
+		},
+		ref,
+	) => {
+		const outlineRef = useRef<HTMLDivElement>(null);
+
+		useImperativeHandle(ref, () => outlineRef.current as HTMLDivElement, []);
+
+		return (
+			<Sequence
+				layout="none"
+				{...sequenceProps}
+				controls={controls}
+				name={name ?? 'Audio oscilloscope'}
+				outlineRef={outlineRef}
+			>
+				<AudioOscilloscopeContent
+					amplitude={amplitude}
+					audioSrc={audioSrc}
+					lineColor={lineColor}
+					lineWidth={lineWidth}
+					outlineRef={outlineRef}
+					style={style}
+					windowInSeconds={windowInSeconds}
+				/>
+			</Sequence>
+		);
+	},
+);
+
+export const AudioOscilloscope = Interactive.withSchema({
+	Component: AudioOscilloscopeInner,
+	componentName: '<AudioOscilloscope>',
+	componentIdentity: null,
+	schema: audioOscilloscopeSchema,
+	supportsEffects: false,
+}) as React.FC<AudioOscilloscopeProps>;
diff --git a/packages/fonts/package.json b/packages/fonts/package.json
index 60ef5fc2901..c19673c63fb 100644
--- a/packages/fonts/package.json
+++ b/packages/fonts/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/fonts"
 	},
 	"name": "@remotion/fonts",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Helpers for loading local fonts into Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/gif/package.json b/packages/gif/package.json
index cdc524a18c7..328b771cd63 100644
--- a/packages/gif/package.json
+++ b/packages/gif/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Embed GIFs in a Remotion video",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
diff --git a/packages/google-fonts/package.json b/packages/google-fonts/package.json
index 340452e48a8..0e18d8bdd1f 100644
--- a/packages/google-fonts/package.json
+++ b/packages/google-fonts/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/google-fonts"
 	},
 	"name": "@remotion/google-fonts",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Use Google Fonts in Remotion",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.mjs",
diff --git a/packages/google-fonts/scripts/incompatible-fonts.ts b/packages/google-fonts/scripts/incompatible-fonts.ts
index 31aa1cf1864..9e8c24ce19f 100644
--- a/packages/google-fonts/scripts/incompatible-fonts.ts
+++ b/packages/google-fonts/scripts/incompatible-fonts.ts
@@ -1,124 +1,124 @@
 export const incompatibleFonts = [
   "Allkin",
   "Chiron GoRound TC",
-  "Chiron Hei HK",
   "Chiron Sung HK",
+  "Chiron Hei HK",
   "Libertinus Math",
   "Linefont",
   "Material Icons",
-  "Material Icons Round",
   "Material Icons Outlined",
+  "Material Icons Round",
+  "Material Icons Sharp",
   "Material Icons Two Tone",
   "Material Symbols",
   "Material Symbols Outlined",
-  "Material Icons Sharp",
-  "Material Symbols Rounded",
   "Material Symbols Sharp",
+  "Material Symbols Rounded",
   "Noto Sans Math",
   "Playwrite AR",
-  "Playwrite AT Guides",
   "Playwrite AR Guides",
+  "Playwrite AT Guides",
+  "Playwrite AU NSW",
   "Playwrite AU NSW Guides",
-  "Playwrite AU QLD",
+  "Playwrite AU QLD Guides",
   "Playwrite AT",
-  "Playwrite AU SA",
+  "Playwrite AU QLD",
+  "Playwrite AU TAS",
   "Playwrite AU SA Guides",
+  "Playwrite AU SA",
   "Playwrite AU TAS Guides",
+  "Playwrite BE VLG",
+  "Playwrite BE WAL",
   "Playwrite AU VIC",
-  "Playwrite AU TAS",
   "Playwrite AU VIC Guides",
-  "Playwrite AU QLD Guides",
-  "Playwrite BE VLG",
   "Playwrite BE VLG Guides",
-  "Playwrite BE WAL",
   "Playwrite BR",
-  "Playwrite CA",
+  "Playwrite BR Guides",
   "Playwrite BE WAL Guides",
-  "Playwrite AU NSW",
+  "Playwrite CA Guides",
   "Playwrite CL Guides",
+  "Playwrite CA",
+  "Playwrite CU Guides",
   "Playwrite CL",
-  "Playwrite CO Guides",
   "Playwrite CO",
   "Playwrite CU",
-  "Playwrite CU Guides",
-  "Playwrite CZ",
-  "Playwrite DE Grund",
-  "Playwrite CZ Guides",
+  "Playwrite CO Guides",
   "Playwrite DE Grund Guides",
+  "Playwrite CZ Guides",
+  "Playwrite DE Grund",
+  "Playwrite DE SAS Guides",
   "Playwrite DE LA",
-  "Playwrite DE LA Guides",
-  "Playwrite BR Guides",
   "Playwrite DE SAS",
-  "Playwrite DE SAS Guides",
+  "Playwrite CZ",
+  "Playwrite DE LA Guides",
   "Playwrite DE VA",
-  "Playwrite DE VA Guides",
-  "Playwrite DK Loopet",
   "Playwrite DK Loopet Guides",
+  "Playwrite DK Loopet",
+  "Playwrite ES Deco",
   "Playwrite DK Uloopet Guides",
+  "Playwrite DE VA Guides",
   "Playwrite DK Uloopet",
   "Playwrite ES",
-  "Playwrite ES Deco",
-  "Playwrite ES Guides",
-  "Playwrite FR Moderne Guides",
-  "Playwrite FR Moderne",
   "Playwrite FR Trad Guides",
+  "Playwrite ES Deco Guides",
+  "Playwrite FR Moderne",
+  "Playwrite FR Trad",
   "Playwrite GB J",
+  "Playwrite ES Guides",
+  "Playwrite GB J Guides",
+  "Playwrite FR Moderne Guides",
+  "Playwrite HU",
+  "Playwrite HR Lijeva Guides",
   "Playwrite GB S",
-  "Playwrite GB S Guides",
-  "Playwrite HR Guides",
   "Playwrite HR Lijeva",
-  "Playwrite HR Lijeva Guides",
-  "Playwrite HU",
-  "Playwrite ES Deco Guides",
-  "Playwrite GB J Guides",
+  "Playwrite HR Guides",
+  "Playwrite GB S Guides",
   "Playwrite HU Guides",
-  "Playwrite ID",
-  "Playwrite ID Guides",
-  "Playwrite IE",
+  "Playwrite HR",
   "Playwrite IE Guides",
+  "Playwrite IE",
   "Playwrite IN Guides",
   "Playwrite IS",
-  "Playwrite IN",
   "Playwrite IS Guides",
+  "Playwrite IN",
+  "Playwrite ID",
+  "Playwrite ID Guides",
   "Playwrite IT Moderna",
-  "Playwrite IT Trad",
   "Playwrite IT Moderna Guides",
+  "Playwrite IT Trad",
+  "Playwrite NG Modern",
   "Playwrite IT Trad Guides",
-  "Playwrite MX",
   "Playwrite MX Guides",
-  "Playwrite NG Modern",
   "Playwrite NG Modern Guides",
-  "Playwrite NL Guides",
-  "Playwrite NL",
+  "Playwrite MX",
   "Playwrite NO",
-  "Playwrite NO Guides",
+  "Playwrite NL",
+  "Playwrite NL Guides",
   "Playwrite NZ",
   "Playwrite NZ Basic",
-  "Playwrite NZ Guides",
   "Playwrite NZ Basic Guides",
-  "Playwrite PE Guides",
+  "Playwrite NZ Guides",
+  "Playwrite NO Guides",
   "Playwrite PE",
-  "Playwrite PL",
+  "Playwrite PE Guides",
   "Playwrite PT",
   "Playwrite RO",
-  "Playwrite CA Guides",
+  "Playwrite PT Guides",
+  "Playwrite PL",
   "Playwrite RO Guides",
   "Playwrite SK",
+  "Playwrite PL Guides",
   "Playwrite SK Guides",
   "Playwrite TZ",
   "Playwrite TZ Guides",
   "Playwrite US Modern",
   "Playwrite US Trad",
-  "Playwrite US Trad Guides",
   "Playwrite US Modern Guides",
-  "Playwrite VN",
+  "Playwrite US Trad Guides",
   "Playwrite VN Guides",
-  "Playwrite ZA",
   "Playwrite ZA Guides",
-  "Playwrite FR Trad",
-  "Playwrite HR",
-  "Playwrite PT Guides",
-  "Playwrite PL Guides",
+  "Playwrite ZA",
+  "Playwrite VN",
   "STIX Two Math",
   "Wavefont"
 ];
\ No newline at end of file
diff --git a/packages/gsap/package.json b/packages/gsap/package.json
index a13345e4d77..2ca6957eee3 100644
--- a/packages/gsap/package.json
+++ b/packages/gsap/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/gsap",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Use GSAP timelines in Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/install-whisper-cpp/package.json b/packages/install-whisper-cpp/package.json
index d7286d1bfdb..ba37d23e9cf 100644
--- a/packages/install-whisper-cpp/package.json
+++ b/packages/install-whisper-cpp/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/install-whisper-cpp"
 	},
 	"name": "@remotion/install-whisper-cpp",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Helpers for installing and using Whisper.cpp",
 	"main": "dist/index.js",
 	"bugs": {
diff --git a/packages/it-tests/package.json b/packages/it-tests/package.json
index 699613aa94c..ffa9d82d4df 100644
--- a/packages/it-tests/package.json
+++ b/packages/it-tests/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/it-tests"
 	},
 	"name": "@remotion/it-tests",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"scripts": {
 		"test": " node --test src/node-version/media-parser.mjs && bun test src/rendering --run --timeout 60000",
diff --git a/packages/it-tests/src/monorepo/no-dev-files.test.ts b/packages/it-tests/src/monorepo/no-dev-files.test.ts
index 8c4b120a5e4..71aa111dd88 100644
--- a/packages/it-tests/src/monorepo/no-dev-files.test.ts
+++ b/packages/it-tests/src/monorepo/no-dev-files.test.ts
@@ -89,11 +89,28 @@ const assertNoDevFilesPublished = async (pkgPath: string) => {
 	}
 };
 
-for (const pkg of packages) {
-	test.concurrent(
-		'should not publish any dev files for @remotion/' + pkg.pkg,
-		async () => {
-			await assertNoDevFilesPublished(pkg.path);
-		},
-	);
-}
+test(
+	'should not publish any dev files',
+	async () => {
+		const results = await Promise.allSettled(
+			packages.map((pkg) => assertNoDevFilesPublished(pkg.path)),
+		);
+		const errors = results.flatMap((result, index) => {
+			if (result.status === 'fulfilled') {
+				return [];
+			}
+
+			return [
+				`@remotion/${packages[index].pkg}: ${
+					result.reason instanceof Error
+						? result.reason.message
+						: String(result.reason)
+				}`,
+			];
+		});
+		if (errors.length > 0) {
+			throw new Error(errors.join('\n'));
+		}
+	},
+	{timeout: 40000},
+);
diff --git a/packages/jonnys-videos/package.json b/packages/jonnys-videos/package.json
index 41a2ef4e179..041ab393dc8 100644
--- a/packages/jonnys-videos/package.json
+++ b/packages/jonnys-videos/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/jonnys-videos"
 	},
 	"name": "@remotion/jonnys-videos",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/packages/kimi-code-plugin/.kimi-plugin/plugin.json b/packages/kimi-code-plugin/.kimi-plugin/plugin.json
index 39a2628a855..acd36a31804 100644
--- a/packages/kimi-code-plugin/.kimi-plugin/plugin.json
+++ b/packages/kimi-code-plugin/.kimi-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Remotion video creation skills — best practices, animations, audio, captions, 3D, and more for building programmatic videos with React.",
 	"author": {
 		"name": "Remotion",
diff --git a/packages/kimi-code-plugin/package.json b/packages/kimi-code-plugin/package.json
index 6c797203a33..9d57b9055d2 100644
--- a/packages/kimi-code-plugin/package.json
+++ b/packages/kimi-code-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/kimi-code-plugin",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"repository": {
diff --git a/packages/lambda-client/package.json b/packages/lambda-client/package.json
index 5ee9811f734..45613a495e5 100644
--- a/packages/lambda-client/package.json
+++ b/packages/lambda-client/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/lambda-client"
 	},
 	"name": "@remotion/lambda-client",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/cjs/index.js",
 	"scripts": {
 		"formatting": "oxfmt src --check",
diff --git a/packages/lambda-go-example/package.json b/packages/lambda-go-example/package.json
index 2276d156623..3dd65cc91d1 100644
--- a/packages/lambda-go-example/package.json
+++ b/packages/lambda-go-example/package.json
@@ -4,6 +4,6 @@
 	},
 	"name": "@remotion/lambda-go-example",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {}
 }
diff --git a/packages/lambda-go/package.json b/packages/lambda-go/package.json
index 6ffe814cc69..781042b6731 100644
--- a/packages/lambda-go/package.json
+++ b/packages/lambda-go/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/lambda-go",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {
 		"lint": "node build.mjs",
 		"publishprivate": "node publish.mjs"
diff --git a/packages/lambda-go/version.go b/packages/lambda-go/version.go
index 6e60f1a96c6..7a6d92cf9c8 100644
--- a/packages/lambda-go/version.go
+++ b/packages/lambda-go/version.go
@@ -1,3 +1,3 @@
 package lambda_go_sdk;
 
-const VERSION = "4.0.518"
\ No newline at end of file
+const VERSION = "4.0.519"
\ No newline at end of file
diff --git a/packages/lambda-php-example/composer.json b/packages/lambda-php-example/composer.json
index f2ed86fb354..416587c04d0 100644
--- a/packages/lambda-php-example/composer.json
+++ b/packages/lambda-php-example/composer.json
@@ -19,6 +19,6 @@
   ],
   "require": {
     "vlucas/phpdotenv": "^5.5",
-    "remotion/lambda": "4.0.518"
+    "remotion/lambda": "4.0.519"
   }
 }
diff --git a/packages/lambda-php/composer.json b/packages/lambda-php/composer.json
index ef81083746f..e65c123a015 100644
--- a/packages/lambda-php/composer.json
+++ b/packages/lambda-php/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "remotion/lambda",
   "type": "library",
-  "version": "4.0.518",
+  "version": "4.0.519",
   "description": "A PHP library for working with Remotion Lambda",
   "license": "proprietary",
   "autoload": {
diff --git a/packages/lambda-php/composer.lock b/packages/lambda-php/composer.lock
index 47ef7e63d2a..df048deaead 100644
--- a/packages/lambda-php/composer.lock
+++ b/packages/lambda-php/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "8454a94907735c086541672655a0fd7e",
+    "content-hash": "d0164d32378e86774bbb4ba2b335c04a",
     "packages": [
         {
             "name": "aws/aws-crt-php",
diff --git a/packages/lambda-php/package.json b/packages/lambda-php/package.json
index 3d7c53274ac..2021f788c20 100644
--- a/packages/lambda-php/package.json
+++ b/packages/lambda-php/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/lambda-php",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {
 		"lint": "node build.mjs",
 		"publishprivate": "node publish.mjs"
diff --git a/packages/lambda-php/src/Semantic.php b/packages/lambda-php/src/Semantic.php
index f44c1852bdd..3d76b130b57 100644
--- a/packages/lambda-php/src/Semantic.php
+++ b/packages/lambda-php/src/Semantic.php
@@ -4,5 +4,5 @@
 
 class Semantic
 {
-    public const VERSION = "4.0.518";
+    public const VERSION = "4.0.519";
 }
\ No newline at end of file
diff --git a/packages/lambda-python/package.json b/packages/lambda-python/package.json
index e327b80bfe2..a2944e67801 100644
--- a/packages/lambda-python/package.json
+++ b/packages/lambda-python/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/lambda-python",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {
 		"publishprivate": "node publish.mjs"
 	},
diff --git a/packages/lambda-python/remotion_lambda/version.py b/packages/lambda-python/remotion_lambda/version.py
index 7cb503ec7f9..9d8d00e2786 100644
--- a/packages/lambda-python/remotion_lambda/version.py
+++ b/packages/lambda-python/remotion_lambda/version.py
@@ -1,2 +1,2 @@
 # pylint: disable=missing-module-docstring, missing-final-newline
-VERSION = "4.0.518"
\ No newline at end of file
+VERSION = "4.0.519"
\ No newline at end of file
diff --git a/packages/lambda-ruby/lib/remotion_lambda/version.rb b/packages/lambda-ruby/lib/remotion_lambda/version.rb
index e52a5b61e52..11bdb35a9c9 100644
--- a/packages/lambda-ruby/lib/remotion_lambda/version.rb
+++ b/packages/lambda-ruby/lib/remotion_lambda/version.rb
@@ -1 +1 @@
-VERSION = "4.0.518"
\ No newline at end of file
+VERSION = "4.0.519"
\ No newline at end of file
diff --git a/packages/lambda-ruby/package.json b/packages/lambda-ruby/package.json
index 6ee9b3edddd..6514a15bc95 100644
--- a/packages/lambda-ruby/package.json
+++ b/packages/lambda-ruby/package.json
@@ -4,7 +4,7 @@
 	},
 	"name": "@remotion/lambda-ruby",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"scripts": {
 		"publishprivate": "bun publish.ts"
 	},
diff --git a/packages/lambda-ruby/remotion_lambda.gemspec b/packages/lambda-ruby/remotion_lambda.gemspec
index 4010a017618..cf621bdcadb 100644
--- a/packages/lambda-ruby/remotion_lambda.gemspec
+++ b/packages/lambda-ruby/remotion_lambda.gemspec
@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name        = "remotion_lambda"
-  s.version     = "4.0.518"
+  s.version     = "4.0.519"
   s.summary     = "Remotion Lambda SDK"
   s.description = "A Ruby SDK for Remotion Lambda"
   s.authors     = ["Jonny Burger"]
diff --git a/packages/lambda/package.json b/packages/lambda/package.json
index db2c638b62b..034ff0ff871 100644
--- a/packages/lambda/package.json
+++ b/packages/lambda/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/lambda"
 	},
 	"name": "@remotion/lambda",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Render Remotion videos on AWS Lambda",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/layout-utils/package.json b/packages/layout-utils/package.json
index f3a654f3e99..1c76fa365ae 100644
--- a/packages/layout-utils/package.json
+++ b/packages/layout-utils/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/layout-utils"
 	},
 	"name": "@remotion/layout-utils",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Utilities for working with layouts",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/licensing/package.json b/packages/licensing/package.json
index bac70bc8d4b..1bd44d767e0 100644
--- a/packages/licensing/package.json
+++ b/packages/licensing/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/licensing"
 	},
 	"name": "@remotion/licensing",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Manage your Remotion.pro license",
 	"main": "dist",
 	"scripts": {
diff --git a/packages/light-leaks/package.json b/packages/light-leaks/package.json
index 533dca02711..645eca7d1ab 100644
--- a/packages/light-leaks/package.json
+++ b/packages/light-leaks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/light-leaks",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Light leak effects for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/lottie/package.json b/packages/lottie/package.json
index c567803a079..5815854d626 100644
--- a/packages/lottie/package.json
+++ b/packages/lottie/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/lottie"
 	},
 	"name": "@remotion/lottie",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Include Lottie animations in Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/mac-cursors/package.json b/packages/mac-cursors/package.json
index 6b0bc9a170a..f976c7a3269 100644
--- a/packages/mac-cursors/package.json
+++ b/packages/mac-cursors/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/mac-cursors",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "macOS cursor components for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/maptiler/package.json b/packages/maptiler/package.json
index fc9c8603477..bb25b12582e 100644
--- a/packages/maptiler/package.json
+++ b/packages/maptiler/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/maptiler",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "MapTiler components for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/mcp/package.json b/packages/mcp/package.json
index 61e69f35e3c..c68af0a5a33 100644
--- a/packages/mcp/package.json
+++ b/packages/mcp/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/mcp"
 	},
 	"name": "@remotion/mcp",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Remotion's Model Context Protocol",
 	"main": "dist/esm/index.mjs",
 	"type": "module",
diff --git a/packages/media-parser/package.json b/packages/media-parser/package.json
index f44d9bed0cb..172bd844af2 100644
--- a/packages/media-parser/package.json
+++ b/packages/media-parser/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/media-parser"
 	},
 	"name": "@remotion/media-parser",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"scripts": {
 		"formatting": "oxfmt src --check",
diff --git a/packages/media-parser/src/version.ts b/packages/media-parser/src/version.ts
index de3d60d32b9..6f1eca1d942 100644
--- a/packages/media-parser/src/version.ts
+++ b/packages/media-parser/src/version.ts
@@ -1,2 +1,2 @@
 // Automatically generated on publish
-export const VERSION = '4.0.518';
+export const VERSION = '4.0.519';
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index e65c3164d99..9feb150090a 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/media-utils"
 	},
 	"name": "@remotion/media-utils",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Utilities for working with media files",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/media/package.json b/packages/media/package.json
index 9c8ba58c1c8..c5b8a961f2f 100644
--- a/packages/media/package.json
+++ b/packages/media/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
diff --git a/packages/motion-blur/package.json b/packages/motion-blur/package.json
index 1af3bcbaf86..5665bce516f 100644
--- a/packages/motion-blur/package.json
+++ b/packages/motion-blur/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/motion-blur"
 	},
 	"name": "@remotion/motion-blur",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Motion blur effect for Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/noise/package.json b/packages/noise/package.json
index ebda23b3252..6a10b268578 100644
--- a/packages/noise/package.json
+++ b/packages/noise/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/noise"
 	},
 	"name": "@remotion/noise",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Noise generation functions",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/openai-whisper/package.json b/packages/openai-whisper/package.json
index 793f06a48e2..b12a5162d42 100644
--- a/packages/openai-whisper/package.json
+++ b/packages/openai-whisper/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/openai-whisper"
 	},
 	"name": "@remotion/openai-whisper",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Work with the output of the OpenAI Whisper API",
 	"main": "dist/index.js",
 	"bugs": {
diff --git a/packages/paths/package.json b/packages/paths/package.json
index 55f6ead163c..fe1e31a9622 100644
--- a/packages/paths/package.json
+++ b/packages/paths/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/paths"
 	},
 	"name": "@remotion/paths",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Utilities for working with SVG paths",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/player-a11y/package.json b/packages/player-a11y/package.json
index eaccb636ebf..6e95276be76 100644
--- a/packages/player-a11y/package.json
+++ b/packages/player-a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player-a11y",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Internal accessibility wrapper around @remotion/player",
 	"private": true,
 	"main": "dist/index.js",
diff --git a/packages/player-example/package.json b/packages/player-example/package.json
index 081761a86d5..4b0ac21dc36 100644
--- a/packages/player-example/package.json
+++ b/packages/player-example/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player-example"
 	},
 	"name": "@remotion/player-example",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"maintainers": [
diff --git a/packages/player/package.json b/packages/player/package.json
index 2b6a76b09c7..48db55371f7 100644
--- a/packages/player/package.json
+++ b/packages/player/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/preload/package.json b/packages/preload/package.json
index 083616c923f..731d1c895d4 100644
--- a/packages/preload/package.json
+++ b/packages/preload/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/preload"
 	},
 	"name": "@remotion/preload",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Preloads assets for use in Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/promo-pages/package.json b/packages/promo-pages/package.json
index e820260552b..2e719246c58 100644
--- a/packages/promo-pages/package.json
+++ b/packages/promo-pages/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"publishConfig": {
 		"access": "public"
 	},
diff --git a/packages/react18-tests/package.json b/packages/react18-tests/package.json
index 7ebb794f5fd..47b5c1f54fb 100644
--- a/packages/react18-tests/package.json
+++ b/packages/react18-tests/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/react18-tests"
 	},
 	"name": "@remotion/react18-tests",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"scripts": {
 		"formatting": "oxfmt src --check",
diff --git a/packages/remotion-media/package.json b/packages/remotion-media/package.json
index c2df96edad4..a16ee80a1fb 100644
--- a/packages/remotion-media/package.json
+++ b/packages/remotion-media/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/remotion-media",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"repository": {
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index e263893aaa7..9cabd0b2078 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/renderer"
 	},
 	"name": "@remotion/renderer",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Render Remotion videos using Node.js or Bun",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/rive/package.json b/packages/rive/package.json
index 78554fb0ca2..db80f6a304d 100644
--- a/packages/rive/package.json
+++ b/packages/rive/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rive"
 	},
 	"name": "@remotion/rive",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Embed Rive animations in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/rough-notation/package.json b/packages/rough-notation/package.json
index c724613c497..6c509849826 100644
--- a/packages/rough-notation/package.json
+++ b/packages/rough-notation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/rough-notation",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Rough annotation primitives for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/rounded-text-box/package.json b/packages/rounded-text-box/package.json
index a3b8d30f242..8ee32f70629 100644
--- a/packages/rounded-text-box/package.json
+++ b/packages/rounded-text-box/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rounded-text-box"
 	},
 	"name": "@remotion/rounded-text-box",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Create a TikTok-like multiline text box SVG path with rounded corners",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/serverless-client/package.json b/packages/serverless-client/package.json
index ed85fe73fed..e7dfe199dfe 100644
--- a/packages/serverless-client/package.json
+++ b/packages/serverless-client/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/serverless-client"
 	},
 	"name": "@remotion/serverless-client",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist",
 	"scripts": {
 		"lint": "eslint src",
diff --git a/packages/serverless/package.json b/packages/serverless/package.json
index 6479b7bba3e..a0a6d285da0 100644
--- a/packages/serverless/package.json
+++ b/packages/serverless/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/serverless"
 	},
 	"name": "@remotion/serverless",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "A runtime for distributed rendering",
 	"main": "dist",
 	"scripts": {
diff --git a/packages/sfx/package.json b/packages/sfx/package.json
index 27fff80754b..a5d57755e03 100644
--- a/packages/sfx/package.json
+++ b/packages/sfx/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/sfx",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Sound effect library",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/shapes/package.json b/packages/shapes/package.json
index b9a8e2b3c43..79b9eb70baa 100644
--- a/packages/shapes/package.json
+++ b/packages/shapes/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
 	},
 	"name": "@remotion/shapes",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Generate SVG shapes",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/skia/package.json b/packages/skia/package.json
index 28e3e5f3a0c..8b79bf38a70 100644
--- a/packages/skia/package.json
+++ b/packages/skia/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/skia"
 	},
 	"name": "@remotion/skia",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Include React Native Skia components in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/skills-evals/package.json b/packages/skills-evals/package.json
index f4fb51d01ad..0e8c6e5e2b5 100644
--- a/packages/skills-evals/package.json
+++ b/packages/skills-evals/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/skills-evals"
 	},
 	"name": "@remotion/skills-evals",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/packages/skills/package.json b/packages/skills/package.json
index 7119270e409..cda9c22cade 100644
--- a/packages/skills/package.json
+++ b/packages/skills/package.json
@@ -7,7 +7,7 @@
 	},
 	"name": "@remotion/skills",
 	"private": true,
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"devDependencies": {
 		"@remotion/eslint-config-internal": "workspace:*",
 		"eslint": "catalog:",
diff --git a/packages/skills/skills/remotion-best-practices/SKILL.md b/packages/skills/skills/remotion-best-practices/SKILL.md
index f8871d646b1..179cbf9b08e 100644
--- a/packages/skills/skills/remotion-best-practices/SKILL.md
+++ b/packages/skills/skills/remotion-best-practices/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-best-practices
 description: Router for all Remotion skills
-version: 4.0.518
+version: 4.0.519
 ---
 
 ## Preserve user changes
diff --git a/packages/skills/skills/remotion-captions/SKILL.md b/packages/skills/skills/remotion-captions/SKILL.md
index 055b42aeddf..d2007b2257d 100644
--- a/packages/skills/skills/remotion-captions/SKILL.md
+++ b/packages/skills/skills/remotion-captions/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-captions
 description: Transcribing, displaying and animating captions
-version: 4.0.518
+version: 4.0.519
 ---
 
 All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:
diff --git a/packages/skills/skills/remotion-create/SKILL.md b/packages/skills/skills/remotion-create/SKILL.md
index 28b49fa8183..aeb25b2062a 100644
--- a/packages/skills/skills/remotion-create/SKILL.md
+++ b/packages/skills/skills/remotion-create/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-create
 description: Create a new Remotion video
-version: 4.0.518
+version: 4.0.519
 ---
 
 These are instructions for making a new Remotion project and composition.  
diff --git a/packages/skills/skills/remotion-docs/SKILL.md b/packages/skills/skills/remotion-docs/SKILL.md
index 71e49f11d9c..14f1db61792 100644
--- a/packages/skills/skills/remotion-docs/SKILL.md
+++ b/packages/skills/skills/remotion-docs/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-docs
 description: Search Remotion documentation
-version: 4.0.518
+version: 4.0.519
 ---
 
 This skill teaches you how to discover and read current Remotion documentation.
diff --git a/packages/skills/skills/remotion-interactivity/SKILL.md b/packages/skills/skills/remotion-interactivity/SKILL.md
index 468d6b09ce0..ac4a9287c1d 100644
--- a/packages/skills/skills/remotion-interactivity/SKILL.md
+++ b/packages/skills/skills/remotion-interactivity/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-interactivity
 description: Structure Remotion markup for interactivity
-version: 4.0.518
+version: 4.0.519
 ---
 
 By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
diff --git a/packages/skills/skills/remotion-maps/SKILL.md b/packages/skills/skills/remotion-maps/SKILL.md
index 585c2d1e2a5..190dfa0e705 100644
--- a/packages/skills/skills/remotion-maps/SKILL.md
+++ b/packages/skills/skills/remotion-maps/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-maps
 description: Remotion Map animation knowledge
-version: 4.0.518
+version: 4.0.519
 ---
 
 # Remotion Maps
diff --git a/packages/skills/skills/remotion-markup/SKILL.md b/packages/skills/skills/remotion-markup/SKILL.md
index f0a6c1eb8ff..d3584db8df7 100644
--- a/packages/skills/skills/remotion-markup/SKILL.md
+++ b/packages/skills/skills/remotion-markup/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-markup
 description: Content, animation and effects best practices
-version: 4.0.518
+version: 4.0.519
 ---
 
 This is guidance for writing Remotion React Markup.
diff --git a/packages/skills/skills/remotion-multimedia/SKILL.md b/packages/skills/skills/remotion-multimedia/SKILL.md
index 6b3d363297e..001c7bb6d2f 100644
--- a/packages/skills/skills/remotion-multimedia/SKILL.md
+++ b/packages/skills/skills/remotion-multimedia/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-multimedia
 description: Interacting with Mediabunny
-version: 4.0.518
+version: 4.0.519
 ---
 
 Mediabunny is a multimedia library for dealing with audio and video in the browser.
diff --git a/packages/skills/skills/remotion-render/SKILL.md b/packages/skills/skills/remotion-render/SKILL.md
index b992dbda377..53621e8c830 100644
--- a/packages/skills/skills/remotion-render/SKILL.md
+++ b/packages/skills/skills/remotion-render/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-render
 description: Export a Remotion video
-version: 4.0.518
+version: 4.0.519
 ---
 
 ## General rendering strategy
diff --git a/packages/skills/skills/remotion-saas/SKILL.md b/packages/skills/skills/remotion-saas/SKILL.md
index 8f317322a7e..1c0a9a767ff 100644
--- a/packages/skills/skills/remotion-saas/SKILL.md
+++ b/packages/skills/skills/remotion-saas/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-saas
 description: Build an app with Remotion
-version: 4.0.518
+version: 4.0.519
 ---
 
 One can build apps with Remotion.  
diff --git a/packages/skills/skills/remotion-studio/SKILL.md b/packages/skills/skills/remotion-studio/SKILL.md
index 0c08812a6b4..dff6c3716e7 100644
--- a/packages/skills/skills/remotion-studio/SKILL.md
+++ b/packages/skills/skills/remotion-studio/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-studio
 description: Preview a Remotion video
-version: 4.0.518
+version: 4.0.519
 ---
 
 Execute the following command:
diff --git a/packages/skills/skills/remotion-upgrade/SKILL.md b/packages/skills/skills/remotion-upgrade/SKILL.md
index c8a3a1c726a..3e51fa1b8dc 100644
--- a/packages/skills/skills/remotion-upgrade/SKILL.md
+++ b/packages/skills/skills/remotion-upgrade/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: remotion-upgrade
 description: Upgrade Remotion, and related packages
-version: 4.0.518
+version: 4.0.519
 ---
 
 # Upgrade Remotion
diff --git a/packages/starburst/package.json b/packages/starburst/package.json
index fab82c930b1..bafc7f82ae4 100644
--- a/packages/starburst/package.json
+++ b/packages/starburst/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/starburst",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Starburst ray effect for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/streaming/package.json b/packages/streaming/package.json
index dac381ddbee..72ce99adecf 100644
--- a/packages/streaming/package.json
+++ b/packages/streaming/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/streaming"
 	},
 	"name": "@remotion/streaming",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Utilities for streaming data between programs",
 	"main": "dist",
 	"scripts": {
diff --git a/packages/studio-codemods/package.json b/packages/studio-codemods/package.json
index 6b89dd6d3aa..6c2921f74f0 100644
--- a/packages/studio-codemods/package.json
+++ b/packages/studio-codemods/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/studio-codemods",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Shared codemods for Remotion Studio",
 	"main": "dist/index.cjs",
 	"types": "dist/index.d.ts",
diff --git a/packages/studio-protocol/package.json b/packages/studio-protocol/package.json
index 37fa4fe9706..0d194d7b4c5 100644
--- a/packages/studio-protocol/package.json
+++ b/packages/studio-protocol/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/studio-protocol",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Create Element payloads and request installation into Remotion Studio",
 	"main": "dist/index.cjs",
 	"types": "dist/index.d.ts",
diff --git a/packages/studio-protocol/src/studio-discovery.ts b/packages/studio-protocol/src/studio-discovery.ts
index 68aa8029b19..e1fc3b30fff 100644
--- a/packages/studio-protocol/src/studio-discovery.ts
+++ b/packages/studio-protocol/src/studio-discovery.ts
@@ -150,6 +150,20 @@ export const isStudioProtocolDescriptor = (
 	return new Set(capabilityTypes).size === capabilityTypes.length;
 };
 
+const parseStudioProtocolDescriptor = (
+	value: unknown,
+): StudioProtocolDescriptor | null => {
+	if (!isRecord(value) || !Array.isArray(value.capabilities)) {
+		return null;
+	}
+
+	const descriptor = {
+		...value,
+		capabilities: value.capabilities.filter(isCapability),
+	};
+	return isStudioProtocolDescriptor(descriptor) ? descriptor : null;
+};
+
 export const getInstallCapability = (
 	descriptor: StudioProtocolDescriptor,
 ): StudioProtocolInstallCapability | null =>
@@ -224,13 +238,14 @@ export const discoverStudios = async (
 				return null;
 			}
 
-			if (!isStudioProtocolDescriptor(value)) {
+			const descriptor = parseStudioProtocolDescriptor(value);
+			if (descriptor === null) {
 				foundInvalidResponse = true;
 				return null;
 			}
 
 			return {
-				descriptor: value,
+				descriptor,
 				discoveredAt: dependencies.now(),
 				origin,
 			};
diff --git a/packages/studio-protocol/src/test/install-in-studio.test.ts b/packages/studio-protocol/src/test/install-in-studio.test.ts
index b0e8a744a8f..c8b53a59024 100644
--- a/packages/studio-protocol/src/test/install-in-studio.test.ts
+++ b/packages/studio-protocol/src/test/install-in-studio.test.ts
@@ -53,8 +53,14 @@ const dependencies = {
 	ports: [3000, 3001],
 };
 
-test('delivers the payload to the exact most recently focused Studio target', async () => {
+test('delivers the payload when a newer Studio advertises an unknown capability', async () => {
 	const requests: Array<{url: string; options?: RequestInit}> = [];
+	const newestStudio = descriptor({
+		compositionId: 'Main',
+		lastFocusedAt: 950_000,
+		projectName: 'Newest project',
+		targetId: 'newest-target',
+	});
 	const fetchFn = (input: string | URL | Request, options?: RequestInit) => {
 		const url = String(input);
 		requests.push({url, options});
@@ -73,14 +79,13 @@ test('delivers the payload to the exact most recently focused Studio target', as
 
 		if (url === 'http://localhost:3001/api/studio-protocol') {
 			return Promise.resolve(
-				jsonResponse(
-					descriptor({
-						compositionId: 'Main',
-						lastFocusedAt: 950_000,
-						projectName: 'Newest project',
-						targetId: 'newest-target',
-					}),
-				),
+				jsonResponse({
+					...newestStudio,
+					capabilities: [
+						...newestStudio.capabilities,
+						{type: 'future-capability'},
+					],
+				}),
 			);
 		}
 
diff --git a/packages/studio-server/package.json b/packages/studio-server/package.json
index 6dde8e6a56b..281bd8f8a21 100644
--- a/packages/studio-server/package.json
+++ b/packages/studio-server/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
diff --git a/packages/studio-shared/package.json b/packages/studio-shared/package.json
index 6aa84df51aa..53455a48d3c 100644
--- a/packages/studio-shared/package.json
+++ b/packages/studio-shared/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
 	},
 	"name": "@remotion/studio-shared",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"module": "dist/esm/index.mjs",
diff --git a/packages/studio/package.json b/packages/studio/package.json
index 433063f453b..94f49ca438f 100644
--- a/packages/studio/package.json
+++ b/packages/studio/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
diff --git a/packages/studio/src/components/PreviewToolbar.tsx b/packages/studio/src/components/PreviewToolbar.tsx
index fdddc394960..b190b856b42 100644
--- a/packages/studio/src/components/PreviewToolbar.tsx
+++ b/packages/studio/src/components/PreviewToolbar.tsx
@@ -227,7 +227,7 @@ export const PreviewToolbar: React.FC<{
 			<Flex />
 			<div style={sideContainer}>
 				<Flex />
-				<FpsCounter playbackSpeed={playbackRate} />
+				{isMobileLayout ? null : <FpsCounter playbackSpeed={playbackRate} />}
 				<Spacing x={2} />
 				<PreviewToolbarControl>
 					<RenderButton
diff --git a/packages/studio/src/components/ResetZoomButton.tsx b/packages/studio/src/components/ResetZoomButton.tsx
index 8efcc370294..96e0ba6b566 100644
--- a/packages/studio/src/components/ResetZoomButton.tsx
+++ b/packages/studio/src/components/ResetZoomButton.tsx
@@ -1,5 +1,22 @@
 import React, {useCallback} from 'react';
-import {Button} from './Button';
+import {BLACK_ALPHA_60, INPUT_BACKGROUND, WHITE} from '../helpers/colors';
+
+const button: React.CSSProperties = {
+	appearance: 'none',
+	backgroundColor: INPUT_BACKGROUND,
+	border: `1px solid ${BLACK_ALPHA_60}`,
+	borderRadius: 4,
+	color: WHITE,
+	flexDirection: 'row',
+	fontFamily: 'inherit',
+	fontSize: 14,
+};
+
+const buttonContainer: React.CSSProperties = {
+	cursor: 'pointer',
+	fontSize: 14,
+	padding: 10,
+};
 
 export const ResetZoomButton: React.FC<{
 	readonly onClick: () => void;
@@ -12,8 +29,15 @@ export const ResetZoomButton: React.FC<{
 	);
 
 	return (
-		<Button onClick={onClick} onPointerDown={onPointerDown}>
-			Reset zoom
-		</Button>
+		<button
+			style={button}
+			type="button"
+			onClick={onClick}
+			onPointerDown={onPointerDown}
+		>
+			<div className="css-reset" style={buttonContainer}>
+				Reset zoom
+			</div>
+		</button>
 	);
 };
diff --git a/packages/studio/src/components/Timeline/TimelineAssetField.tsx b/packages/studio/src/components/Timeline/TimelineAssetField.tsx
index 5d1ee3f995b..42de7502663 100644
--- a/packages/studio/src/components/Timeline/TimelineAssetField.tsx
+++ b/packages/studio/src/components/Timeline/TimelineAssetField.tsx
@@ -29,6 +29,7 @@ const sourceActions: React.CSSProperties = {
 	display: 'flex',
 	flex: 1,
 	gap: 4,
+	margin: '0 4px',
 	minWidth: 0,
 };
 
diff --git a/packages/studio/src/components/Timeline/use-timeline-asset-drop.ts b/packages/studio/src/components/Timeline/use-timeline-asset-drop.ts
index 1a0769fd6df..9b68d9b3815 100644
--- a/packages/studio/src/components/Timeline/use-timeline-asset-drop.ts
+++ b/packages/studio/src/components/Timeline/use-timeline-asset-drop.ts
@@ -15,18 +15,8 @@ import {scrollableRef, timelineVerticalScroll} from './timeline-refs';
 import {getFrameFromTimelineDrop} from './timeline-scroll-logic';
 import {useResolvedStack} from './use-resolved-stack';
 
-const isEventInsideElement = (event: DragEvent, element: HTMLElement) => {
-	if (event.target instanceof Node && element.contains(event.target)) {
-		return true;
-	}
-
-	const rect = element.getBoundingClientRect();
-	return (
-		event.clientX >= rect.left &&
-		event.clientX <= rect.right &&
-		event.clientY >= rect.top &&
-		event.clientY <= rect.bottom
-	);
+const isEventTargetInsideElement = (event: DragEvent, element: HTMLElement) => {
+	return event.target instanceof Node && element.contains(event.target);
 };
 
 export const useTimelineAssetDrop = () => {
@@ -76,7 +66,8 @@ export const useTimelineAssetDrop = () => {
 			}
 
 			const scrollable = scrollableRef.current;
-			return scrollable !== null && isEventInsideElement(event, scrollable)
+			return scrollable !== null &&
+				isEventTargetInsideElement(event, scrollable)
 				? getFrameFromTimelineDrop({
 						clientX: event.clientX,
 						durationInFrames: videoConfig.durationInFrames,
@@ -97,7 +88,7 @@ export const useTimelineAssetDrop = () => {
 				timeline === null ||
 				dataTransfer === null ||
 				!isSupportedDropEvent(event) ||
-				!isEventInsideElement(event, timeline)
+				!isEventTargetInsideElement(event, timeline)
 			) {
 				setAssetDropFrame(null);
 				return;
@@ -110,7 +101,7 @@ export const useTimelineAssetDrop = () => {
 			const shouldShowDropFrame =
 				canInsertAsset &&
 				scrollable !== null &&
-				isEventInsideElement(event, scrollable);
+				isEventTargetInsideElement(event, scrollable);
 			setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
 		},
 		[canInsertAsset, getDropFrame],
@@ -125,7 +116,7 @@ export const useTimelineAssetDrop = () => {
 				timeline === null ||
 				dataTransfer === null ||
 				!isSupportedDropEvent(event) ||
-				!isEventInsideElement(event, timeline)
+				!isEventTargetInsideElement(event, timeline)
 			) {
 				return;
 			}
diff --git a/packages/svg-3d-engine/package.json b/packages/svg-3d-engine/package.json
index bdeaecdeb6b..4bc27b3117e 100644
--- a/packages/svg-3d-engine/package.json
+++ b/packages/svg-3d-engine/package.json
@@ -24,7 +24,7 @@
 			"require": "./dist/cjs/index.js"
 		}
 	},
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/svg-3d-engine"
 	},
diff --git a/packages/tailwind-v4/package.json b/packages/tailwind-v4/package.json
index 9e374fbcbf3..afc829594c5 100644
--- a/packages/tailwind-v4/package.json
+++ b/packages/tailwind-v4/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/tailwind-v4"
 	},
 	"name": "@remotion/tailwind-v4",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Enable TailwindCSS support in Remotion (TailwindCSS v4)",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 767d7b15f40..4758ca2c1df 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/tailwind"
 	},
 	"name": "@remotion/tailwind",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Enable TailwindCSS support in Remotion (TailwindCSS v3)",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index d11249d3637..cf1bd9cca98 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/test-utils"
 	},
 	"name": "@remotion/test-utils",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist",
 	"scripts": {
 		"lint": "eslint src",
diff --git a/packages/three/package.json b/packages/three/package.json
index 7f9eb802316..6cb9bd0baeb 100644
--- a/packages/three/package.json
+++ b/packages/three/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
 	},
 	"name": "@remotion/three",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Include React Three Fiber components in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
diff --git a/packages/timeline-utils/package.json b/packages/timeline-utils/package.json
index 73c3b73acac..779b2cd9c32 100644
--- a/packages/timeline-utils/package.json
+++ b/packages/timeline-utils/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/timeline-utils"
 	},
 	"name": "@remotion/timeline-utils",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
diff --git a/packages/transitions/package.json b/packages/transitions/package.json
index 61e71ad9382..8e2f19b4d09 100644
--- a/packages/transitions/package.json
+++ b/packages/transitions/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Library for creating transitions in Remotion",
 	"main": "dist/esm/index.mjs",
 	"module": "dist/esm/index.js",
diff --git a/packages/vercel/package.json b/packages/vercel/package.json
index ba99a3e7f9b..3e20866c3d9 100644
--- a/packages/vercel/package.json
+++ b/packages/vercel/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/vercel",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Render Remotion videos on Vercel Sandbox",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/web-renderer/package.json b/packages/web-renderer/package.json
index 40c9b06a45a..8e0ffc4f3a4 100644
--- a/packages/web-renderer/package.json
+++ b/packages/web-renderer/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.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
diff --git a/packages/webcodecs/package.json b/packages/webcodecs/package.json
index 351eeec8a2e..d2497b0d390 100644
--- a/packages/webcodecs/package.json
+++ b/packages/webcodecs/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/webcodecs",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
diff --git a/packages/whisper-web/package.json b/packages/whisper-web/package.json
index 4323c506698..ea290fa6831 100644
--- a/packages/whisper-web/package.json
+++ b/packages/whisper-web/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/whisper-web"
 	},
 	"name": "@remotion/whisper-web",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"main": "dist/index.js",
 	"scripts": {
 		"formatting": "oxfmt src --check",
diff --git a/packages/whisper-webgpu/package.json b/packages/whisper-webgpu/package.json
index 4e5b834346b..19853c0c5c3 100644
--- a/packages/whisper-webgpu/package.json
+++ b/packages/whisper-webgpu/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/whisper-webgpu",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Transcribe audio in the browser using Whisper and WebGPU",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/zod-types-v3/package.json b/packages/zod-types-v3/package.json
index be50d75e5dc..b9bffc49433 100644
--- a/packages/zod-types-v3/package.json
+++ b/packages/zod-types-v3/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/zod-types-v3",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Zod 3.22.3 types for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
diff --git a/packages/zod-types/package.json b/packages/zod-types/package.json
index a0b2d8f6e1b..729d2ac83cb 100644
--- a/packages/zod-types/package.json
+++ b/packages/zod-types/package.json
@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/zod-types"
 	},
 	"name": "@remotion/zod-types",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Zod types for Remotion",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",