diff --git a/package-lock.json b/package-lock.json
index 73fa37de..46f5b207 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,13 @@
       "workspaces": [
         "packages/*"
       ],
+      "dependencies": {
+        "uuid": "^9.0.1"
+      },
       "devDependencies": {
         "@commitlint/cli": "^18.4.2",
         "@commitlint/config-conventional": "^18.4.2",
+        "@types/uuid": "^9.0.8",
         "@typescript-eslint/eslint-plugin": "^6.11.0",
         "@typescript-eslint/parser": "^6.11.0",
         "eslint": "^8.54.0",
@@ -3788,6 +3792,243 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@ffmpeg-installer/darwin-arm64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-arm64/-/darwin-arm64-4.1.5.tgz",
+      "integrity": "sha512-hYqTiP63mXz7wSQfuqfFwfLOfwwFChUedeCVKkBtl/cliaTM7/ePI9bVzfZ2c+dWu3TqCwLDRWNSJ5pqZl8otA==",
+      "cpu": [
+        "arm64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/darwin-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-x64/-/darwin-x64-4.1.0.tgz",
+      "integrity": "sha512-Z4EyG3cIFjdhlY8wI9aLUXuH8nVt7E9SlMVZtWvSPnm2sm37/yC2CwjUzyCQbJbySnef1tQwGG2Sx+uWhd9IAw==",
+      "cpu": [
+        "x64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/ffmpeg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/ffmpeg/-/ffmpeg-1.1.0.tgz",
+      "integrity": "sha512-Uq4rmwkdGxIa9A6Bd/VqqYbT7zqh1GrT5/rFwCwKM70b42W5gIjWeVETq6SdcL0zXqDtY081Ws/iJWhr1+xvQg==",
+      "optionalDependencies": {
+        "@ffmpeg-installer/darwin-arm64": "4.1.5",
+        "@ffmpeg-installer/darwin-x64": "4.1.0",
+        "@ffmpeg-installer/linux-arm": "4.1.3",
+        "@ffmpeg-installer/linux-arm64": "4.1.4",
+        "@ffmpeg-installer/linux-ia32": "4.1.0",
+        "@ffmpeg-installer/linux-x64": "4.1.0",
+        "@ffmpeg-installer/win32-ia32": "4.1.0",
+        "@ffmpeg-installer/win32-x64": "4.1.0"
+      }
+    },
+    "node_modules/@ffmpeg-installer/linux-arm": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-arm/-/linux-arm-4.1.3.tgz",
+      "integrity": "sha512-NDf5V6l8AfzZ8WzUGZ5mV8O/xMzRag2ETR6+TlGIsMHp81agx51cqpPItXPib/nAZYmo55Bl2L6/WOMI3A5YRg==",
+      "cpu": [
+        "arm"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/linux-arm64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-arm64/-/linux-arm64-4.1.4.tgz",
+      "integrity": "sha512-dljEqAOD0oIM6O6DxBW9US/FkvqvQwgJ2lGHOwHDDwu/pX8+V0YsDL1xqHbj1DMX/+nP9rxw7G7gcUvGspSoKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/linux-ia32": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-ia32/-/linux-ia32-4.1.0.tgz",
+      "integrity": "sha512-0LWyFQnPf+Ij9GQGD034hS6A90URNu9HCtQ5cTqo5MxOEc7Rd8gLXrJvn++UmxhU0J5RyRE9KRYstdCVUjkNOQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/linux-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-x64/-/linux-x64-4.1.0.tgz",
+      "integrity": "sha512-Y5BWhGLU/WpQjOArNIgXD3z5mxxdV8c41C+U15nsE5yF8tVcdCGet5zPs5Zy3Ta6bU7haGpIzryutqCGQA/W8A==",
+      "cpu": [
+        "x64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/win32-ia32": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/win32-ia32/-/win32-ia32-4.1.0.tgz",
+      "integrity": "sha512-FV2D7RlaZv/lrtdhaQ4oETwoFUsUjlUiasiZLDxhEUPdNDWcH1OU9K1xTvqz+OXLdsmYelUDuBS/zkMOTtlUAw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@ffmpeg-installer/win32-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/win32-x64/-/win32-x64-4.1.0.tgz",
+      "integrity": "sha512-Drt5u2vzDnIONf4ZEkKtFlbvwj6rI3kxw1Ck9fpudmtgaZIHD4ucsWB2lCZBXRxJgXR+2IMSti+4rtM4C4rXgg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@ffprobe-installer/darwin-arm64": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/darwin-arm64/-/darwin-arm64-5.0.1.tgz",
+      "integrity": "sha512-vwNCNjokH8hfkbl6m95zICHwkSzhEvDC3GVBcUp5HX8+4wsX10SP3B+bGur7XUzTIZ4cQpgJmEIAx6TUwRepMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@ffprobe-installer/darwin-x64": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/darwin-x64/-/darwin-x64-5.1.0.tgz",
+      "integrity": "sha512-J+YGscZMpQclFg31O4cfVRGmDpkVsQ2fZujoUdMAAYcP0NtqpC49Hs3SWJpBdsGB4VeqOt5TTm1vSZQzs1NkhA==",
+      "cpu": [
+        "x64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@ffprobe-installer/ffprobe": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/ffprobe/-/ffprobe-2.1.2.tgz",
+      "integrity": "sha512-ZNvwk4f2magF42Zji2Ese16SMj9BS7Fui4kRjg6gTYTxY3gWZNpg85n4MIfQyI9nimHg4x/gT6FVkp/bBDuBwg==",
+      "engines": {
+        "node": ">=14.21.2"
+      },
+      "optionalDependencies": {
+        "@ffprobe-installer/darwin-arm64": "5.0.1",
+        "@ffprobe-installer/darwin-x64": "5.1.0",
+        "@ffprobe-installer/linux-arm": "5.2.0",
+        "@ffprobe-installer/linux-arm64": "5.2.0",
+        "@ffprobe-installer/linux-ia32": "5.2.0",
+        "@ffprobe-installer/linux-x64": "5.2.0",
+        "@ffprobe-installer/win32-ia32": "5.1.0",
+        "@ffprobe-installer/win32-x64": "5.1.0"
+      }
+    },
+    "node_modules/@ffprobe-installer/linux-arm": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-arm/-/linux-arm-5.2.0.tgz",
+      "integrity": "sha512-PF5HqEhCY7WTWHtLDYbA/+rLS+rhslWvyBlAG1Fk8VzVlnRdl93o6hy7DE2kJgxWQbFaR3ZktPQGEzfkrmQHvQ==",
+      "cpu": [
+        "arm"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffprobe-installer/linux-arm64": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-arm64/-/linux-arm64-5.2.0.tgz",
+      "integrity": "sha512-X1VvWtlLs6ScP73biVLuHD5ohKJKsMTa0vafCESOen4mOoNeLAYbxOVxDWAdFz9cpZgRiloFj5QD6nDj8E28yQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffprobe-installer/linux-ia32": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-ia32/-/linux-ia32-5.2.0.tgz",
+      "integrity": "sha512-TFVK5sasXyXhbIG7LtPRDmtkrkOsInwKcL43iEvEw+D9vCS2rc//mn9/0Q+BR0UoJEiMK4+ApYr/3LLVUBPOCQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffprobe-installer/linux-x64": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-x64/-/linux-x64-5.2.0.tgz",
+      "integrity": "sha512-D3UeqTLYPNs7pBWPLUYGehPdRVqU8eACox4OZy3pZUZatxye2YKlvBwEfaLdL1v2Z4FOAlLUhms0kY8m8kqSRA==",
+      "cpu": [
+        "x64"
+      ],
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@ffprobe-installer/win32-ia32": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/win32-ia32/-/win32-ia32-5.1.0.tgz",
+      "integrity": "sha512-5O3vOoNRxmut0/Nu9vSazTdSHasrr+zPT2B3Hm7kjmO3QVFcIfVImS6ReQnZeSy8JPJOqXts5kX5x/3KOX54XQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@ffprobe-installer/win32-x64": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/win32-x64/-/win32-x64-5.1.0.tgz",
+      "integrity": "sha512-jMGYeAgkrdn4e2vvYt/qakgHRE3CPju4bn5TmdPfoAm1BlX1mY9cyMd8gf5vSzI8gH8Zq5WQAyAkmekX/8TSTg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -4709,19 +4950,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@lerna/create/node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "dev": true,
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/@lerna/create/node_modules/write-file-atomic": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
@@ -5051,6 +5279,10 @@
       "resolved": "packages/examples",
       "link": true
     },
+    "node_modules/@motion-canvas/ffmpeg": {
+      "resolved": "packages/ffmpeg",
+      "link": true
+    },
     "node_modules/@motion-canvas/internal": {
       "resolved": "packages/internal",
       "link": true
@@ -7078,6 +7310,15 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/fluent-ffmpeg": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/@types/fluent-ffmpeg/-/fluent-ffmpeg-2.1.24.tgz",
+      "integrity": "sha512-g5oQO8Jgi2kFS3tTub7wLvfLztr1s8tdXmRd8PiL/hLMLzTIAyMR2sANkTggM/rdEDAg3d63nYRRVepwBiCw5A==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@types/follow-redirects/-/follow-redirects-1.14.1.tgz",
@@ -7308,6 +7549,12 @@
       "version": "2.0.6",
       "license": "MIT"
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "license": "MIT",
@@ -8292,8 +8539,7 @@
     "node_modules/async": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -12607,6 +12853,29 @@
       "devOptional": true,
       "license": "ISC"
     },
+    "node_modules/fluent-ffmpeg": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.2.tgz",
+      "integrity": "sha512-IZTB4kq5GK0DPp7sGQ0q/BWurGHffRtQQwVkiqDgeO6wYJLLV5ZhgNOQ65loZxxuPMKZKZcICCUnaGtlxBiR0Q==",
+      "dependencies": {
+        "async": ">=0.2.9",
+        "which": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fluent-ffmpeg/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/flux": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz",
@@ -15941,19 +16210,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/lerna/node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "dev": true,
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/lerna/node_modules/write-file-atomic": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
@@ -17220,13 +17476,6 @@
         "uuid": "^9.0.0"
       }
     },
-    "node_modules/mermaid/node_modules/uuid": {
-      "version": "9.0.0",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/methods": {
       "version": "1.1.2",
       "license": "MIT",
@@ -22711,6 +22960,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/socks": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
@@ -24520,8 +24777,13 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "license": "MIT",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -25855,6 +26117,22 @@
         "@motion-canvas/vite-plugin": "*"
       }
     },
+    "packages/ffmpeg": {
+      "name": "@motion-canvas/ffmpeg",
+      "version": "1.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "@ffmpeg-installer/ffmpeg": "^1.1.0",
+        "@ffprobe-installer/ffprobe": "^2.0.0",
+        "@motion-canvas/core": "^3.14.1",
+        "@motion-canvas/vite-plugin": "^3.14.1",
+        "fluent-ffmpeg": "^2.1.2",
+        "vite": "4.x"
+      },
+      "devDependencies": {
+        "@types/fluent-ffmpeg": "^2.1.21"
+      }
+    },
     "packages/internal": {
       "name": "@motion-canvas/internal",
       "version": "0.0.0",
@@ -25897,7 +26175,8 @@
       "license": "MIT",
       "dependencies": {
         "@motion-canvas/2d": "*",
-        "@motion-canvas/core": "*"
+        "@motion-canvas/core": "*",
+        "@motion-canvas/ffmpeg": "*"
       },
       "devDependencies": {
         "@motion-canvas/ui": "*",
@@ -28540,6 +28819,132 @@
       "integrity": "sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==",
       "devOptional": true
     },
+    "@ffmpeg-installer/darwin-arm64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-arm64/-/darwin-arm64-4.1.5.tgz",
+      "integrity": "sha512-hYqTiP63mXz7wSQfuqfFwfLOfwwFChUedeCVKkBtl/cliaTM7/ePI9bVzfZ2c+dWu3TqCwLDRWNSJ5pqZl8otA==",
+      "optional": true
+    },
+    "@ffmpeg-installer/darwin-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-x64/-/darwin-x64-4.1.0.tgz",
+      "integrity": "sha512-Z4EyG3cIFjdhlY8wI9aLUXuH8nVt7E9SlMVZtWvSPnm2sm37/yC2CwjUzyCQbJbySnef1tQwGG2Sx+uWhd9IAw==",
+      "optional": true
+    },
+    "@ffmpeg-installer/ffmpeg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/ffmpeg/-/ffmpeg-1.1.0.tgz",
+      "integrity": "sha512-Uq4rmwkdGxIa9A6Bd/VqqYbT7zqh1GrT5/rFwCwKM70b42W5gIjWeVETq6SdcL0zXqDtY081Ws/iJWhr1+xvQg==",
+      "requires": {
+        "@ffmpeg-installer/darwin-arm64": "4.1.5",
+        "@ffmpeg-installer/darwin-x64": "4.1.0",
+        "@ffmpeg-installer/linux-arm": "4.1.3",
+        "@ffmpeg-installer/linux-arm64": "4.1.4",
+        "@ffmpeg-installer/linux-ia32": "4.1.0",
+        "@ffmpeg-installer/linux-x64": "4.1.0",
+        "@ffmpeg-installer/win32-ia32": "4.1.0",
+        "@ffmpeg-installer/win32-x64": "4.1.0"
+      }
+    },
+    "@ffmpeg-installer/linux-arm": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-arm/-/linux-arm-4.1.3.tgz",
+      "integrity": "sha512-NDf5V6l8AfzZ8WzUGZ5mV8O/xMzRag2ETR6+TlGIsMHp81agx51cqpPItXPib/nAZYmo55Bl2L6/WOMI3A5YRg==",
+      "optional": true
+    },
+    "@ffmpeg-installer/linux-arm64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-arm64/-/linux-arm64-4.1.4.tgz",
+      "integrity": "sha512-dljEqAOD0oIM6O6DxBW9US/FkvqvQwgJ2lGHOwHDDwu/pX8+V0YsDL1xqHbj1DMX/+nP9rxw7G7gcUvGspSoKg==",
+      "optional": true
+    },
+    "@ffmpeg-installer/linux-ia32": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-ia32/-/linux-ia32-4.1.0.tgz",
+      "integrity": "sha512-0LWyFQnPf+Ij9GQGD034hS6A90URNu9HCtQ5cTqo5MxOEc7Rd8gLXrJvn++UmxhU0J5RyRE9KRYstdCVUjkNOQ==",
+      "optional": true
+    },
+    "@ffmpeg-installer/linux-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/linux-x64/-/linux-x64-4.1.0.tgz",
+      "integrity": "sha512-Y5BWhGLU/WpQjOArNIgXD3z5mxxdV8c41C+U15nsE5yF8tVcdCGet5zPs5Zy3Ta6bU7haGpIzryutqCGQA/W8A==",
+      "optional": true
+    },
+    "@ffmpeg-installer/win32-ia32": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/win32-ia32/-/win32-ia32-4.1.0.tgz",
+      "integrity": "sha512-FV2D7RlaZv/lrtdhaQ4oETwoFUsUjlUiasiZLDxhEUPdNDWcH1OU9K1xTvqz+OXLdsmYelUDuBS/zkMOTtlUAw==",
+      "optional": true
+    },
+    "@ffmpeg-installer/win32-x64": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ffmpeg-installer/win32-x64/-/win32-x64-4.1.0.tgz",
+      "integrity": "sha512-Drt5u2vzDnIONf4ZEkKtFlbvwj6rI3kxw1Ck9fpudmtgaZIHD4ucsWB2lCZBXRxJgXR+2IMSti+4rtM4C4rXgg==",
+      "optional": true
+    },
+    "@ffprobe-installer/darwin-arm64": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/darwin-arm64/-/darwin-arm64-5.0.1.tgz",
+      "integrity": "sha512-vwNCNjokH8hfkbl6m95zICHwkSzhEvDC3GVBcUp5HX8+4wsX10SP3B+bGur7XUzTIZ4cQpgJmEIAx6TUwRepMg==",
+      "optional": true
+    },
+    "@ffprobe-installer/darwin-x64": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/darwin-x64/-/darwin-x64-5.1.0.tgz",
+      "integrity": "sha512-J+YGscZMpQclFg31O4cfVRGmDpkVsQ2fZujoUdMAAYcP0NtqpC49Hs3SWJpBdsGB4VeqOt5TTm1vSZQzs1NkhA==",
+      "optional": true
+    },
+    "@ffprobe-installer/ffprobe": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/ffprobe/-/ffprobe-2.1.2.tgz",
+      "integrity": "sha512-ZNvwk4f2magF42Zji2Ese16SMj9BS7Fui4kRjg6gTYTxY3gWZNpg85n4MIfQyI9nimHg4x/gT6FVkp/bBDuBwg==",
+      "requires": {
+        "@ffprobe-installer/darwin-arm64": "5.0.1",
+        "@ffprobe-installer/darwin-x64": "5.1.0",
+        "@ffprobe-installer/linux-arm": "5.2.0",
+        "@ffprobe-installer/linux-arm64": "5.2.0",
+        "@ffprobe-installer/linux-ia32": "5.2.0",
+        "@ffprobe-installer/linux-x64": "5.2.0",
+        "@ffprobe-installer/win32-ia32": "5.1.0",
+        "@ffprobe-installer/win32-x64": "5.1.0"
+      }
+    },
+    "@ffprobe-installer/linux-arm": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-arm/-/linux-arm-5.2.0.tgz",
+      "integrity": "sha512-PF5HqEhCY7WTWHtLDYbA/+rLS+rhslWvyBlAG1Fk8VzVlnRdl93o6hy7DE2kJgxWQbFaR3ZktPQGEzfkrmQHvQ==",
+      "optional": true
+    },
+    "@ffprobe-installer/linux-arm64": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-arm64/-/linux-arm64-5.2.0.tgz",
+      "integrity": "sha512-X1VvWtlLs6ScP73biVLuHD5ohKJKsMTa0vafCESOen4mOoNeLAYbxOVxDWAdFz9cpZgRiloFj5QD6nDj8E28yQ==",
+      "optional": true
+    },
+    "@ffprobe-installer/linux-ia32": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-ia32/-/linux-ia32-5.2.0.tgz",
+      "integrity": "sha512-TFVK5sasXyXhbIG7LtPRDmtkrkOsInwKcL43iEvEw+D9vCS2rc//mn9/0Q+BR0UoJEiMK4+ApYr/3LLVUBPOCQ==",
+      "optional": true
+    },
+    "@ffprobe-installer/linux-x64": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/linux-x64/-/linux-x64-5.2.0.tgz",
+      "integrity": "sha512-D3UeqTLYPNs7pBWPLUYGehPdRVqU8eACox4OZy3pZUZatxye2YKlvBwEfaLdL1v2Z4FOAlLUhms0kY8m8kqSRA==",
+      "optional": true
+    },
+    "@ffprobe-installer/win32-ia32": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/win32-ia32/-/win32-ia32-5.1.0.tgz",
+      "integrity": "sha512-5O3vOoNRxmut0/Nu9vSazTdSHasrr+zPT2B3Hm7kjmO3QVFcIfVImS6ReQnZeSy8JPJOqXts5kX5x/3KOX54XQ==",
+      "optional": true
+    },
+    "@ffprobe-installer/win32-x64": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@ffprobe-installer/win32-x64/-/win32-x64-5.1.0.tgz",
+      "integrity": "sha512-jMGYeAgkrdn4e2vvYt/qakgHRE3CPju4bn5TmdPfoAm1BlX1mY9cyMd8gf5vSzI8gH8Zq5WQAyAkmekX/8TSTg==",
+      "optional": true
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -29218,12 +29623,6 @@
             "glob": "^9.2.0"
           }
         },
-        "uuid": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-          "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-          "dev": true
-        },
         "write-file-atomic": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
@@ -29612,6 +30011,18 @@
         "@motion-canvas/vite-plugin": "*"
       }
     },
+    "@motion-canvas/ffmpeg": {
+      "version": "file:packages/ffmpeg",
+      "requires": {
+        "@ffmpeg-installer/ffmpeg": "^1.1.0",
+        "@ffprobe-installer/ffprobe": "^2.0.0",
+        "@motion-canvas/core": "^3.14.1",
+        "@motion-canvas/vite-plugin": "^3.14.1",
+        "@types/fluent-ffmpeg": "^2.1.21",
+        "fluent-ffmpeg": "^2.1.2",
+        "vite": "4.x"
+      }
+    },
     "@motion-canvas/internal": {
       "version": "file:packages/internal",
       "requires": {
@@ -29646,6 +30057,7 @@
       "requires": {
         "@motion-canvas/2d": "*",
         "@motion-canvas/core": "*",
+        "@motion-canvas/ffmpeg": "*",
         "@motion-canvas/ui": "*",
         "@motion-canvas/vite-plugin": "*"
       }
@@ -31067,6 +31479,15 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/fluent-ffmpeg": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/@types/fluent-ffmpeg/-/fluent-ffmpeg-2.1.24.tgz",
+      "integrity": "sha512-g5oQO8Jgi2kFS3tTub7wLvfLztr1s8tdXmRd8PiL/hLMLzTIAyMR2sANkTggM/rdEDAg3d63nYRRVepwBiCw5A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@types/follow-redirects/-/follow-redirects-1.14.1.tgz",
@@ -31270,6 +31691,12 @@
     "@types/unist": {
       "version": "2.0.6"
     },
+    "@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "@types/ws": {
       "version": "8.5.3",
       "requires": {
@@ -31998,8 +32425,7 @@
     "async": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -34830,6 +35256,25 @@
       "version": "3.2.6",
       "devOptional": true
     },
+    "fluent-ffmpeg": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.2.tgz",
+      "integrity": "sha512-IZTB4kq5GK0DPp7sGQ0q/BWurGHffRtQQwVkiqDgeO6wYJLLV5ZhgNOQ65loZxxuPMKZKZcICCUnaGtlxBiR0Q==",
+      "requires": {
+        "async": ">=0.2.9",
+        "which": "^1.1.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "flux": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz",
@@ -37115,12 +37560,6 @@
             "glob": "^9.2.0"
           }
         },
-        "uuid": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-          "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-          "dev": true
-        },
         "write-file-atomic": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
@@ -38014,11 +38453,6 @@
         "non-layered-tidy-tree-layout": "^2.0.2",
         "stylis": "^4.1.2",
         "uuid": "^9.0.0"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "9.0.0"
-        }
       }
     },
     "methods": {
@@ -41833,6 +42267,13 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^8.3.2",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
       }
     },
     "socks": {
@@ -43056,7 +43497,9 @@
       "version": "1.0.1"
     },
     "uuid": {
-      "version": "8.3.2"
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",
diff --git a/package.json b/package.json
index ab290307..6b620b26 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.2",
     "@commitlint/config-conventional": "^18.4.2",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "eslint": "^8.54.0",
@@ -53,5 +54,8 @@
   "lint-staged": {
     "*.{ts,tsx}": "eslint --fix",
     "*.{js,jsx,ts,tsx,md,scss}": "prettier --write"
+  },
+  "dependencies": {
+    "uuid": "^9.0.1"
   }
 }
diff --git a/packages/2d/src/lib/components/Audio.ts b/packages/2d/src/lib/components/Audio.ts
new file mode 100644
index 00000000..07577e26
--- /dev/null
+++ b/packages/2d/src/lib/components/Audio.ts
@@ -0,0 +1,130 @@
+import {DependencyContext, PlaybackState, viaProxy} from '@motion-canvas/core';
+import {computed, nodeName} from '../decorators';
+import {Media, MediaProps} from './Media';
+
+@nodeName('Audio')
+export class Audio extends Media {
+  private static readonly pool: Record<string, HTMLAudioElement> = {};
+
+  public constructor(props: MediaProps) {
+    super(props);
+  }
+
+  protected mediaElement(): HTMLAudioElement {
+    return this.audio();
+  }
+
+  protected seekedMedia(): HTMLAudioElement {
+    return this.seekedAudio();
+  }
+
+  protected fastSeekedMedia(): HTMLAudioElement {
+    return this.fastSeekedAudio();
+  }
+
+  @computed()
+  protected audio(): HTMLAudioElement {
+    const src = viaProxy(this.src());
+    const key = `${this.key}/${src}`;
+    let audio = Audio.pool[key];
+    if (!audio) {
+      audio = document.createElement('audio');
+      audio.crossOrigin = 'anonymous';
+      audio.src = src;
+      Audio.pool[key] = audio;
+    }
+    if (audio.readyState < 2) {
+      DependencyContext.collectPromise(
+        new Promise<void>(resolve => {
+          const listener = () => {
+            resolve();
+            audio.removeEventListener('canplay', listener);
+          };
+          audio.addEventListener('canplay', listener);
+        }),
+      );
+    }
+
+    return audio;
+  }
+
+  @computed()
+  protected seekedAudio(): HTMLAudioElement {
+    const audio = this.audio();
+
+    audio.addEventListener('ended', () => {
+      this.pause();
+    });
+
+    if (!(this.time() < audio.duration)) {
+      this.pause();
+      return audio;
+    }
+
+    const time = this.clampTime(this.time());
+    audio.playbackRate = this.playbackRate();
+
+    if (!audio.paused) {
+      audio.pause();
+    }
+
+    if (this.lastTime === time) {
+      return audio;
+    }
+
+    this.setCurrentTime(time);
+
+    return audio;
+  }
+
+  @computed()
+  protected fastSeekedAudio(): HTMLAudioElement {
+    const audio = this.audio();
+
+    if (!(this.time() < audio.duration)) {
+      this.pause();
+      return audio;
+    }
+
+    const time = this.clampTime(this.time());
+
+    audio.playbackRate = this.playbackRate();
+
+    if (this.lastTime === time) {
+      return audio;
+    }
+
+    const playing =
+      this.playing() && time < audio.duration && audio.playbackRate > 0;
+    if (playing) {
+      if (audio.paused) {
+        DependencyContext.collectPromise(audio.play());
+      }
+    } else {
+      if (!audio.paused) {
+        audio.pause();
+      }
+    }
+    if (Math.abs(audio.currentTime - time) > 0.3) {
+      this.setCurrentTime(time);
+    } else if (!playing) {
+      audio.currentTime = time;
+    }
+
+    return audio;
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    const playbackState = this.view().playbackState();
+
+    playbackState === PlaybackState.Playing ||
+    playbackState === PlaybackState.Presenting
+      ? this.fastSeekedAudio()
+      : this.seekedAudio();
+
+    context.save();
+    context.restore();
+
+    this.drawChildren(context);
+  }
+}
diff --git a/packages/2d/src/lib/components/Media.ts b/packages/2d/src/lib/components/Media.ts
new file mode 100644
index 00000000..f283bd8f
--- /dev/null
+++ b/packages/2d/src/lib/components/Media.ts
@@ -0,0 +1,165 @@
+import {
+  DependencyContext,
+  SignalValue,
+  SimpleSignal,
+  clamp,
+  isReactive,
+  useLogger,
+  useThread,
+} from '@motion-canvas/core';
+import {computed, initial, signal} from '../decorators';
+import {Rect, RectProps} from './Rect';
+import reactivePlaybackRate from './__logs__/reactive-playback-rate.md';
+
+export interface MediaProps extends RectProps {
+  src?: SignalValue<string>;
+  loop?: SignalValue<boolean>;
+  playbackRate?: number;
+  time?: SignalValue<number>;
+  play?: boolean;
+}
+
+export abstract class Media extends Rect {
+  @signal()
+  public declare readonly src: SimpleSignal<string, this>;
+
+  @initial(false)
+  @signal()
+  public declare readonly loop: SimpleSignal<boolean, this>;
+
+  @initial(1)
+  @signal()
+  public declare readonly playbackRate: SimpleSignal<number, this>;
+
+  @initial(0)
+  @signal()
+  protected declare readonly time: SimpleSignal<number, this>;
+
+  @initial(false)
+  @signal()
+  protected declare readonly playing: SimpleSignal<boolean, this>;
+
+  protected lastTime = -1;
+
+  public constructor(props: MediaProps) {
+    super(props);
+    if (props.play) {
+      this.play();
+    }
+  }
+
+  public isPlaying(): boolean {
+    return this.playing();
+  }
+
+  public getCurrentTime(): number {
+    return this.clampTime(this.time());
+  }
+
+  public getDuration(): number {
+    return this.mediaElement().duration;
+  }
+
+  public override dispose() {
+    this.pause();
+    this.remove();
+    super.dispose();
+  }
+
+  @computed()
+  public override completion(): number {
+    return this.clampTime(this.time()) / this.getDuration();
+  }
+
+  protected abstract mediaElement(): HTMLMediaElement;
+
+  protected abstract seekedMedia(): HTMLMediaElement;
+
+  protected abstract fastSeekedMedia(): HTMLMediaElement;
+
+  protected abstract override draw(context: CanvasRenderingContext2D): void;
+
+  protected setCurrentTime(value: number) {
+    const media = this.mediaElement();
+    if (media.readyState < 2) return;
+
+    media.currentTime = value;
+    this.lastTime = value;
+    if (media.seeking) {
+      DependencyContext.collectPromise(
+        new Promise<void>(resolve => {
+          const listener = () => {
+            resolve();
+            media.removeEventListener('seeked', listener);
+          };
+          media.addEventListener('seeked', listener);
+        }),
+      );
+    }
+  }
+
+  protected setPlaybackRate(playbackRate: number) {
+    let value: number;
+    if (isReactive(playbackRate)) {
+      value = playbackRate();
+      useLogger().warn({
+        message: 'Invalid value set as the playback rate',
+        remarks: reactivePlaybackRate,
+        inspect: this.key,
+        stack: new Error().stack,
+      });
+    } else {
+      value = playbackRate;
+    }
+    this.playbackRate.context.setter(value);
+
+    if (this.playing()) {
+      if (value === 0) {
+        this.pause();
+      } else {
+        const time = useThread().time;
+        const start = time();
+        const offset = this.time();
+        this.time(() => this.clampTime(offset + (time() - start) * value));
+      }
+    }
+  }
+
+  public play() {
+    const time = useThread().time;
+    const start = time();
+    const offset = this.time();
+    const playbackRate = this.playbackRate();
+    this.playing(true);
+    this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
+  }
+
+  public pause() {
+    this.playing(false);
+    this.time.save();
+    this.mediaElement().pause();
+  }
+
+  public seek(time: number) {
+    const playing = this.playing();
+    this.time(this.clampTime(time));
+    if (playing) {
+      this.play();
+    } else {
+      this.pause();
+    }
+  }
+
+  public clampTime(time: number): number {
+    const duration = this.getDuration();
+    if (this.loop()) {
+      time %= duration;
+    }
+    return clamp(0, duration, time);
+  }
+
+  protected override collectAsyncResources() {
+    super.collectAsyncResources();
+    this.seekedMedia();
+  }
+}
diff --git a/packages/2d/src/lib/components/Video.ts b/packages/2d/src/lib/components/Video.ts
index 32536d84..c169b6a0 100644
--- a/packages/2d/src/lib/components/Video.ts
+++ b/packages/2d/src/lib/components/Video.ts
@@ -5,22 +5,14 @@ import {
   SerializedVector2,
   SignalValue,
   SimpleSignal,
-  clamp,
-  isReactive,
-  useLogger,
-  useThread,
+  viaProxy,
 } from '@motion-canvas/core';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {DesiredLength} from '../partials';
 import {drawImage} from '../utils';
-import {Rect, RectProps} from './Rect';
-import reactivePlaybackRate from './__logs__/reactive-playback-rate.md';
+import {Media, MediaProps} from './Media';
 
-export interface VideoProps extends RectProps {
-  /**
-   * {@inheritDoc Video.src}
-   */
-  src?: SignalValue<string>;
+export interface VideoProps extends MediaProps {
   /**
    * {@inheritDoc Video.alpha}
    */
@@ -29,43 +21,10 @@ export interface VideoProps extends RectProps {
    * {@inheritDoc Video.smoothing}
    */
   smoothing?: SignalValue<boolean>;
-  /**
-   * {@inheritDoc Video.loop}
-   */
-  loop?: SignalValue<boolean>;
-  /**
-   * {@inheritDoc Video.playbackRate}
-   */
-  playbackRate?: number;
-  /**
-   * The starting time for this video in seconds.
-   */
-  time?: SignalValue<number>;
-  play?: boolean;
 }
 
 @nodeName('Video')
-export class Video extends Rect {
-  private static readonly pool: Record<string, HTMLVideoElement> = {};
-
-  /**
-   * The source of this video.
-   *
-   * @example
-   * Using a local video:
-   * ```tsx
-   * import video from './example.mp4';
-   * // ...
-   * view.add(<Video src={video} />)
-   * ```
-   * Loading an image from the internet:
-   * ```tsx
-   * view.add(<Video src="https://example.com/video.mp4" />)
-   * ```
-   */
-  @signal()
-  public declare readonly src: SimpleSignal<string, this>;
-
+export class Video extends Media {
   /**
    * The alpha value of this video.
    *
@@ -90,49 +49,10 @@ export class Video extends Rect {
   @signal()
   public declare readonly smoothing: SimpleSignal<boolean, this>;
 
-  /**
-   * Whether this video should loop upon reaching the end.
-   */
-  @initial(false)
-  @signal()
-  public declare readonly loop: SimpleSignal<boolean, this>;
-
-  /**
-   * The rate at which the video plays, as multiples of the normal speed.
-   *
-   * @defaultValue 1
-   */
-  @initial(1)
-  @signal()
-  public declare readonly playbackRate: SimpleSignal<number, this>;
-
-  @initial(0)
-  @signal()
-  protected declare readonly time: SimpleSignal<number, this>;
-
-  @initial(false)
-  @signal()
-  protected declare readonly playing: SimpleSignal<boolean, this>;
-
-  private lastTime = -1;
+  private static readonly pool: Record<string, HTMLVideoElement> = {};
 
-  public constructor({play, ...props}: VideoProps) {
+  public constructor(props: VideoProps) {
     super(props);
-    if (play) {
-      this.play();
-    }
-  }
-
-  public isPlaying(): boolean {
-    return this.playing();
-  }
-
-  public getCurrentTime(): number {
-    return this.clampTime(this.time());
-  }
-
-  public getDuration(): number {
-    return this.video().duration;
   }
 
   protected override desiredSize(): SerializedVector2<DesiredLength> {
@@ -148,18 +68,26 @@ export class Video extends Rect {
     return custom;
   }
 
-  @computed()
-  public override completion(): number {
-    return this.clampTime(this.time()) / this.video().duration;
+  protected mediaElement(): HTMLVideoElement {
+    return this.video();
+  }
+
+  protected seekedMedia(): HTMLVideoElement {
+    return this.seekedVideo();
+  }
+
+  protected fastSeekedMedia(): HTMLVideoElement {
+    return this.fastSeekedVideo();
   }
 
   @computed()
-  protected video(): HTMLVideoElement {
-    const src = this.src();
+  private video(): HTMLVideoElement {
+    const src = viaProxy(this.src());
     const key = `${this.key}/${src}`;
     let video = Video.pool[key];
     if (!video) {
       video = document.createElement('video');
+      video.crossOrigin = 'anonymous';
       video.src = src;
       Video.pool[key] = video;
     }
@@ -222,7 +150,7 @@ export class Video extends Rect {
       }
     }
 
-    if (Math.abs(video.currentTime - time) > 0.2) {
+    if (Math.abs(video.currentTime - time) > 0.3) {
       this.setCurrentTime(time);
     } else if (!playing) {
       video.currentTime = time;
@@ -267,88 +195,4 @@ export class Video extends Rect {
       this.ratio() ?? video.videoWidth / video.videoHeight
     ).toString();
   }
-
-  protected setCurrentTime(value: number) {
-    const video = this.video();
-    if (video.readyState < 2) return;
-
-    video.currentTime = value;
-    this.lastTime = value;
-    if (video.seeking) {
-      DependencyContext.collectPromise(
-        new Promise<void>(resolve => {
-          const listener = () => {
-            resolve();
-            video.removeEventListener('seeked', listener);
-          };
-          video.addEventListener('seeked', listener);
-        }),
-      );
-    }
-  }
-
-  protected setPlaybackRate(playbackRate: number) {
-    let value: number;
-    if (isReactive(playbackRate)) {
-      value = playbackRate();
-      useLogger().warn({
-        message: 'Invalid value set as the playback rate',
-        remarks: reactivePlaybackRate,
-        inspect: this.key,
-        stack: new Error().stack,
-      });
-    } else {
-      value = playbackRate;
-    }
-    this.playbackRate.context.setter(value);
-
-    if (this.playing()) {
-      if (value === 0) {
-        this.pause();
-      } else {
-        const time = useThread().time;
-        const start = time();
-        const offset = this.time();
-        this.time(() => this.clampTime(offset + (time() - start) * value));
-      }
-    }
-  }
-
-  public play() {
-    const time = useThread().time;
-    const start = time();
-    const offset = this.time();
-    const playbackRate = this.playbackRate();
-    this.playing(true);
-    this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
-  }
-
-  public pause() {
-    this.playing(false);
-    this.time.save();
-    this.video().pause();
-  }
-
-  public seek(time: number) {
-    const playing = this.playing();
-    this.time(this.clampTime(time));
-    if (playing) {
-      this.play();
-    } else {
-      this.pause();
-    }
-  }
-
-  public clampTime(time: number): number {
-    const duration = this.video().duration;
-    if (this.loop()) {
-      time %= duration;
-    }
-    return clamp(0, duration, time);
-  }
-
-  protected override collectAsyncResources() {
-    super.collectAsyncResources();
-    this.seekedVideo();
-  }
 }
diff --git a/packages/2d/src/lib/components/index.ts b/packages/2d/src/lib/components/index.ts
index 99f4390f..3a197104 100644
--- a/packages/2d/src/lib/components/index.ts
+++ b/packages/2d/src/lib/components/index.ts
@@ -1,3 +1,4 @@
+export * from './Audio';
 export * from './Bezier';
 export * from './Circle';
 export * from './Code';
diff --git a/packages/2d/src/lib/scenes/Scene2D.ts b/packages/2d/src/lib/scenes/Scene2D.ts
index b13e18aa..9e6be126 100644
--- a/packages/2d/src/lib/scenes/Scene2D.ts
+++ b/packages/2d/src/lib/scenes/Scene2D.ts
@@ -1,4 +1,5 @@
 import {
+  AssetInfo,
   FullSceneDescription,
   GeneratorScene,
   Inspectable,
@@ -10,7 +11,7 @@ import {
   Vector2,
   useLogger,
 } from '@motion-canvas/core';
-import {Node, View2D} from '../components';
+import {Audio, Node, Video, View2D} from '../components';
 
 export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
   private view: View2D | null = null;
@@ -153,6 +154,48 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
     }
   }
 
+  public override getMediaAssets(): Array<AssetInfo> {
+    const playingVideos = Array.from(this.registeredNodes.values())
+      .filter((node): node is Video => node instanceof Video)
+      .filter(video => (video as Video).isPlaying());
+
+    const playingAudios = Array.from(this.registeredNodes.values())
+      .filter((node): node is Audio => node instanceof Audio)
+      .filter(audio => (audio as Audio).isPlaying());
+
+    const returnObjects: AssetInfo[] = [];
+
+    returnObjects.push(
+      ...playingVideos.map(vid => ({
+        key: vid.key,
+        type: 'video' as const,
+        src: typeof vid.src === 'function' ? vid.src() : vid.src,
+        playbackRate:
+          typeof vid.playbackRate === 'function'
+            ? vid.playbackRate()
+            : vid.playbackRate,
+        currentTime: vid.getCurrentTime(),
+        duration: vid.getDuration(),
+      })),
+    );
+
+    returnObjects.push(
+      ...playingAudios.map(audio => ({
+        key: audio.key,
+        type: 'audio' as const,
+        src: typeof audio.src === 'function' ? audio.src() : audio.src,
+        playbackRate:
+          typeof audio.playbackRate === 'function'
+            ? audio.playbackRate()
+            : audio.playbackRate,
+        currentTime: audio.getCurrentTime(),
+        duration: audio.getDuration(),
+      })),
+    );
+
+    return returnObjects;
+  }
+
   protected recreateView() {
     this.execute(() => {
       const size = this.getSize();
diff --git a/packages/core/src/app/Exporter.ts b/packages/core/src/app/Exporter.ts
index d6678e77..111214f3 100644
--- a/packages/core/src/app/Exporter.ts
+++ b/packages/core/src/app/Exporter.ts
@@ -1,6 +1,6 @@
 import type {MetaField} from '../meta';
 import type {Project} from './Project';
-import type {RendererResult, RendererSettings} from './Renderer';
+import type {AssetInfo, RendererResult, RendererSettings} from './Renderer';
 
 /**
  * The static interface for exporters.
@@ -86,15 +86,28 @@ export interface Exporter {
     signal: AbortSignal,
   ): Promise<void>;
 
+  /**
+   * take in media assets per frame and generate audio track for the video
+   */
+  generateAudio?(assetsInfo: AssetInfo[][], endFrame: number): Promise<void>;
+
   /**
    * Finish the rendering process.
    *
    * @remarks
-   * Guaranteed to be called after the rendering has finished - no matter the
-   * result. Can be used to finalize the exporting and perform any necessary
-   * clean-up.
+   * Called after rendering the visual elements has finished and audio so that audio track can be merged.
    *
    * @param result - The result of the rendering.
    */
   stop?(result: RendererResult): Promise<void>;
+
+  /**
+   * Finish the rendering process.
+   *
+   * @remarks
+   * Guaranteed to be called after the rendering has finished - no matter the
+   * result. Performs clean-up.
+   *
+   */
+  kill?(): Promise<void>;
 }
diff --git a/packages/core/src/app/Renderer.ts b/packages/core/src/app/Renderer.ts
index 79cf25f4..9cee53ef 100644
--- a/packages/core/src/app/Renderer.ts
+++ b/packages/core/src/app/Renderer.ts
@@ -22,6 +22,15 @@ export interface RendererSettings extends StageSettings {
   };
 }
 
+export interface AssetInfo {
+  key: string;
+  type: 'video' | 'audio';
+  src: string;
+  playbackRate: number;
+  currentTime: number;
+  duration: number;
+}
+
 export enum RendererState {
   Initial,
   Working,
@@ -75,6 +84,7 @@ export class Renderer {
     this.status = new PlaybackStatus(this.playback);
     this.sharedWebGLContext = new SharedWebGLContext(this.project.logger);
     const scenes: Scene[] = [];
+
     for (const description of project.scenes) {
       const scene = new description.klass({
         ...description,
@@ -219,9 +229,12 @@ export class Renderer {
     await this.exporter.start?.();
     let lastRefresh = performance.now();
     let result = RendererResult.Success;
+
+    const mediaAssets: AssetInfo[][] = [];
     try {
       this.estimator.reset(1 / (to - from));
       await this.exportFrame(signal);
+      mediaAssets.push(this.playback.currentScene.getMediaAssets());
       this.estimator.update(clampRemap(from, to, 0, 1, this.playback.frame));
 
       if (signal.aborted) {
@@ -231,6 +244,7 @@ export class Renderer {
         while (!finished) {
           await this.playback.progress();
           await this.exportFrame(signal);
+          mediaAssets.push(this.playback.currentScene.getMediaAssets());
           this.estimator.update(
             clampRemap(from, to, 0, 1, this.playback.frame),
           );
@@ -253,7 +267,16 @@ export class Renderer {
     }
 
     await this.exporter.stop?.(result);
+
+    if (this.exporter && this.exporter.generateAudio) {
+      const endFrame = Math.min(this.playback.duration, this.playback.frame);
+      await this.exporter.generateAudio(mediaAssets, endFrame);
+    }
+
+    await this.exporter.kill?.();
+
     this.exporter = null;
+
     return result;
   }
 
@@ -280,6 +303,7 @@ export class Renderer {
 
     const sceneFrame =
       this.playback.frame - this.playback.currentScene.firstFrame;
+
     await this.exporter!.handleFrame(
       this.stage.finalBuffer,
       this.playback.frame,
diff --git a/packages/core/src/scenes/GeneratorScene.ts b/packages/core/src/scenes/GeneratorScene.ts
index 2af9ddb2..ec044242 100644
--- a/packages/core/src/scenes/GeneratorScene.ts
+++ b/packages/core/src/scenes/GeneratorScene.ts
@@ -1,4 +1,4 @@
-import {Logger, PlaybackStatus} from '../app';
+import {AssetInfo, Logger, PlaybackStatus} from '../app';
 import {decorate, threadable} from '../decorators';
 import {EventDispatcher, ValueDispatcher} from '../events';
 import {DependencyContext, SignalValue} from '../signals';
@@ -110,6 +110,10 @@ export abstract class GeneratorScene<T>
     return this.previousScene;
   }
 
+  public getMediaAssets(): Array<AssetInfo> {
+    return [];
+  }
+
   public readonly experimentalFeatures: boolean;
 
   protected resolutionScale: number;
diff --git a/packages/core/src/scenes/Scene.ts b/packages/core/src/scenes/Scene.ts
index 3135306e..0c557925 100644
--- a/packages/core/src/scenes/Scene.ts
+++ b/packages/core/src/scenes/Scene.ts
@@ -1,4 +1,9 @@
-import type {Logger, PlaybackStatus, SharedWebGLContext} from '../app';
+import type {
+  AssetInfo,
+  Logger,
+  PlaybackStatus,
+  SharedWebGLContext,
+} from '../app';
 import type {
   SubscribableEvent,
   SubscribableValueEvent,
@@ -331,6 +336,11 @@ export interface Scene<T = unknown> {
    */
   isCached(): boolean;
 
+  /**
+   * Get all media assets
+   */
+  getMediaAssets(): Array<AssetInfo>;
+
   /**
    * Should this scene be rendered below the previous scene during a transition?
    */
diff --git a/packages/ffmpeg/CHANGELOG.md b/packages/ffmpeg/CHANGELOG.md
new file mode 100644
index 00000000..eb0cdfc3
--- /dev/null
+++ b/packages/ffmpeg/CHANGELOG.md
@@ -0,0 +1,24 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.1.1](https://github.com/motion-canvas/exporters/compare/v1.1.0...v1.1.1) (2023-05-13)
+
+### Bug Fixes
+
+- account for resolution scale
+  ([#3](https://github.com/motion-canvas/exporters/issues/3))
+  ([ba03bf1](https://github.com/motion-canvas/exporters/commit/ba03bf1db62c7aae45a4a98d9519f21085afff91))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2023-05-10)
+
+### Features
+
+- initial commit
+  ([7a01fd5](https://github.com/motion-canvas/exporters/commit/7a01fd5614f2d62b4bd6e24c1096706f5dbf218b))
diff --git a/packages/ffmpeg/client/FFmpegExporterClient.ts b/packages/ffmpeg/client/FFmpegExporterClient.ts
new file mode 100644
index 00000000..7241ad40
--- /dev/null
+++ b/packages/ffmpeg/client/FFmpegExporterClient.ts
@@ -0,0 +1,151 @@
+import type {
+  AssetInfo,
+  MetaField,
+  Project,
+  RendererResult,
+  RendererSettings,
+} from '@motion-canvas/core';
+import {
+  BoolMetaField,
+  EventDispatcher,
+  Exporter,
+  ObjectMetaField,
+  ValueOf,
+} from '@motion-canvas/core';
+
+type ServerResponse =
+  | {
+      status: 'success';
+      method: string;
+      data: unknown;
+    }
+  | {
+      status: 'error';
+      method: string;
+      message?: string;
+    };
+
+type FFmpegExporterOptions = ValueOf<
+  ReturnType<typeof FFmpegExporterClient.meta>
+>;
+
+/**
+ * FFmpeg video exporter.
+ *
+ * @remarks
+ * Most of the export logic is handled on the server. This class communicates
+ * with the FFmpegBridge through a WebSocket connection which lets it invoke
+ * methods on the FFmpegExporterServer class.
+ *
+ * For example, calling the following method:
+ * ```ts
+ * async this.invoke('process', 7);
+ * ```
+ * Will invoke the `process` method on the FFmpegExporterServer class with `7`
+ * as the argument. The result of the method will be returned as a Promise.
+ *
+ * Before any methods can be invoked, the FFmpegExporterServer class must be
+ * initialized by invoking `start`.
+ */
+export class FFmpegExporterClient implements Exporter {
+  public static readonly id = '@motion-canvas/ffmpeg';
+  public static readonly displayName = 'Video (FFmpeg)';
+
+  public static meta(project: Project): MetaField<any> {
+    return new ObjectMetaField(this.displayName, {
+      fastStart: new BoolMetaField('fast start', true),
+      includeAudio: new BoolMetaField('include audio', true).disable(
+        !project.audio,
+      ),
+    });
+  }
+
+  public static async create(project: Project, settings: RendererSettings) {
+    return new FFmpegExporterClient(project, settings);
+  }
+
+  private static readonly response = new EventDispatcher<ServerResponse>();
+
+  static {
+    if (import.meta.hot) {
+      import.meta.hot.on(
+        `motion-canvas/ffmpeg-ack`,
+        (response: ServerResponse) => this.response.dispatch(response),
+      );
+    }
+  }
+
+  public constructor(
+    private readonly project: Project,
+    private readonly settings: RendererSettings,
+  ) {}
+
+  public async start(): Promise<void> {
+    const options = this.settings.exporter.options as FFmpegExporterOptions;
+    await this.invoke('start', {
+      ...this.settings,
+      ...options,
+      audio: this.project.audio,
+      audioOffset:
+        this.project.meta.shared.audioOffset.get() - this.settings.range[0],
+    });
+  }
+
+  public async handleFrame(canvas: HTMLCanvasElement): Promise<void> {
+    await this.invoke('handleFrame', {
+      data: canvas.toDataURL('image/png'),
+    });
+  }
+
+  public async stop(result: RendererResult): Promise<void> {
+    await this.invoke('end', result);
+  }
+
+  public async kill(): Promise<void> {
+    await this.invoke('kill', {});
+  }
+
+  public async generateAudio(
+    assets: AssetInfo[][],
+    endFrame: number,
+  ): Promise<void> {
+    await this.invoke('generateAudio', {assets, endFrame});
+  }
+
+  /**
+   * Remotely invoke a method on the server and wait for a response.
+   *
+   * @param method - The method name to execute on the server.
+   * @param data - The data that will be passed as an argument to the method.
+   *               Should be serializable.
+   */
+  private invoke<TResponse = unknown, TData = unknown>(
+    method: string,
+    data: TData,
+  ): Promise<TResponse> {
+    if (import.meta.hot) {
+      return new Promise((resolve, reject) => {
+        const handle = (response: ServerResponse) => {
+          if (response.method !== method) {
+            return;
+          }
+
+          FFmpegExporterClient.response.unsubscribe(handle);
+          if (response.status === 'success') {
+            resolve(response.data as TResponse);
+          } else {
+            reject({
+              message: 'An error occurred while exporting the video.',
+              remarks: `Method: ${method}<br>Server error: ${response.message}`,
+              object: data,
+            });
+          }
+        };
+        FFmpegExporterClient.response.subscribe(handle);
+        import.meta.hot!.send('motion-canvas/ffmpeg', {method, data});
+      });
+    } else {
+      throw new Error('FFmpegExporter can only be used locally.');
+    }
+  }
+}
diff --git a/packages/ffmpeg/client/global.d.ts b/packages/ffmpeg/client/global.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/packages/ffmpeg/client/global.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/ffmpeg/client/index.ts b/packages/ffmpeg/client/index.ts
new file mode 100644
index 00000000..1c285509
--- /dev/null
+++ b/packages/ffmpeg/client/index.ts
@@ -0,0 +1,10 @@
+import type {ExporterClass} from '@motion-canvas/core';
+import {makePlugin} from '@motion-canvas/core';
+import {FFmpegExporterClient} from './FFmpegExporterClient';
+
+export default makePlugin({
+  name: 'ffmpeg-plugin',
+  exporters(): ExporterClass[] {
+    return [FFmpegExporterClient];
+  },
+});
diff --git a/packages/ffmpeg/client/motion-canvas.d.ts b/packages/ffmpeg/client/motion-canvas.d.ts
new file mode 100644
index 00000000..067c6a44
--- /dev/null
+++ b/packages/ffmpeg/client/motion-canvas.d.ts
@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />
diff --git a/packages/ffmpeg/client/tsconfig.json b/packages/ffmpeg/client/tsconfig.json
new file mode 100644
index 00000000..3ab81687
--- /dev/null
+++ b/packages/ffmpeg/client/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "../lib/client",
+    "inlineSourceMap": true,
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "strict": true,
+    "module": "esnext",
+    "target": "es2020",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["."]
+}
diff --git a/packages/ffmpeg/package.json b/packages/ffmpeg/package.json
new file mode 100644
index 00000000..bcb47032
--- /dev/null
+++ b/packages/ffmpeg/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@motion-canvas/ffmpeg",
+  "version": "1.1.1",
+  "description": "An FFmpeg video exporter for Motion Canvas",
+  "main": "lib/server/index.js",
+  "author": "motion-canvas",
+  "homepage": "https://motioncanvas.io/",
+  "bugs": "https://github.com/motion-canvas/exporters/issues",
+  "license": "MIT",
+  "scripts": {
+    "build": "npm run client:build && npm run server:build",
+    "client:build": "tsc --project client/tsconfig.json",
+    "client:dev": "tsc -w --project client/tsconfig.json",
+    "server:build": "tsc --project server/tsconfig.json",
+    "server:dev": "tsc -w --project server/tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/motion-canvas/exporters.git"
+  },
+  "files": [
+    "lib"
+  ],
+  "devDependencies": {
+    "@types/fluent-ffmpeg": "^2.1.21"
+  },
+  "dependencies": {
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@ffprobe-installer/ffprobe": "^2.0.0",
+    "fluent-ffmpeg": "^2.1.2",
+    "@motion-canvas/core": "^3.14.1",
+    "@motion-canvas/vite-plugin": "^3.14.1",
+    "vite": "4.x"
+  }
+}
diff --git a/packages/ffmpeg/server/FFmpegBridge.ts b/packages/ffmpeg/server/FFmpegBridge.ts
new file mode 100644
index 00000000..184016f0
--- /dev/null
+++ b/packages/ffmpeg/server/FFmpegBridge.ts
@@ -0,0 +1,81 @@
+import {PluginConfig} from '@motion-canvas/vite-plugin/lib/plugins';
+import type {WebSocketServer} from 'vite';
+import {
+  FFmpegExporterServer,
+  FFmpegExporterSettings,
+} from './FFmpegExporterServer';
+
+interface BrowserRequest {
+  method: string;
+  data: unknown;
+}
+
+/**
+ * A simple bridge between the FFmpegExporterServer and FFmpegExporterClient.
+ *
+ * @remarks
+ * This class lets the client exporter invoke methods on the server and receive
+ * responses using a simple Promise-based API.
+ */
+export class FFmpegBridge {
+  private process: FFmpegExporterServer | null = null;
+
+  public constructor(
+    private readonly ws: WebSocketServer,
+    private readonly config: PluginConfig,
+  ) {
+    ws.on('motion-canvas/ffmpeg', this.handleMessage);
+  }
+
+  private handleMessage = async ({method, data}: BrowserRequest) => {
+    if (method === 'start') {
+      try {
+        this.process = new FFmpegExporterServer(
+          data as FFmpegExporterSettings,
+          this.config,
+        );
+        this.respondSuccess(method, await this.process.start());
+      } catch (e: any) {
+        this.respondError(method, e?.message);
+      }
+      return;
+    }
+
+    if (!this.process) {
+      this.respondError(method, 'The exporting process has not been started.');
+      return;
+    }
+
+    if (!(method in this.process)) {
+      this.respondError(method, `Unknown method: "${method}".`);
+      return;
+    }
+
+    try {
+      this.respondSuccess(method, await (this.process as any)[method](data));
+    } catch (e: any) {
+      this.respondError(method, e?.message);
+    }
+
+    if (method === 'kill') {
+      this.process = null;
+      return;
+    }
+  };
+
+  private respondSuccess(method: string, data: any = {}) {
+    this.ws.send('motion-canvas/ffmpeg-ack', {
+      status: 'success',
+      method,
+      data,
+    });
+  }
+
+  private respondError(method: string, message = 'Unknown error.') {
+    this.ws.send('motion-canvas/ffmpeg-ack', {
+      status: 'error',
+      method,
+      message,
+    });
+  }
+}
diff --git a/packages/ffmpeg/server/FFmpegExporterServer.ts b/packages/ffmpeg/server/FFmpegExporterServer.ts
new file mode 100644
index 00000000..2d73c2e7
--- /dev/null
+++ b/packages/ffmpeg/server/FFmpegExporterServer.ts
@@ -0,0 +1,307 @@
+import {path as ffmpegPath} from '@ffmpeg-installer/ffmpeg';
+import {path as ffprobePath} from '@ffprobe-installer/ffprobe';
+import type {
+  AssetInfo,
+  RendererResult,
+  RendererSettings,
+} from '@motion-canvas/core/lib/app';
+import type {PluginConfig} from '@motion-canvas/vite-plugin/lib/plugins';
+
+import * as ffmpeg from 'fluent-ffmpeg';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import {v4 as uuidv4} from 'uuid';
+import {ImageStream} from './ImageStream';
+
+const SAMPLE_RATE = 48000;
+
+ffmpeg.setFfmpegPath(ffmpegPath);
+ffmpeg.setFfprobePath(ffprobePath);
+
+export interface FFmpegExporterSettings extends RendererSettings {
+  audio?: string;
+  audioOffset?: number;
+  fastStart: boolean;
+  includeAudio: boolean;
+}
+
+interface MediaAsset {
+  key: string;
+  src: string;
+  type: 'video' | 'audio';
+  startInVideo: number;
+  endInVideo: number;
+  duration: number;
+  playbackRate: number;
+  trimLeftInSeconds: number;
+}
+
+/**
+ * The server-side implementation of the FFmpeg video exporter.
+ */
+export class FFmpegExporterServer {
+  private readonly stream: ImageStream;
+  private readonly command: ffmpeg.FfmpegCommand;
+  private readonly promise: Promise<void>;
+  private readonly settings: FFmpegExporterSettings;
+  private readonly jobFolder: string;
+
+  public constructor(
+    settings: FFmpegExporterSettings,
+    private readonly config: PluginConfig,
+  ) {
+    this.settings = settings;
+    this.jobFolder = path.join(os.tmpdir(), `revideo-${uuidv4()}`);
+    this.stream = new ImageStream();
+    this.command = ffmpeg();
+
+    // Input image sequence
+    this.command
+      .input(this.stream)
+      .inputFormat('image2pipe')
+      .inputFps(settings.fps);
+
+    // Input audio file
+    if (settings.includeAudio && settings.audio) {
+      this.command
+        .input((settings.audio as string).slice(1))
+        // FIXME Offset only works for negative values.
+        .inputOptions([`-itsoffset ${settings.audioOffset ?? 0}`]);
+    }
+
+    // Output settings
+    const size = {
+      x: Math.round(settings.size.x * settings.resolutionScale),
+      y: Math.round(settings.size.y * settings.resolutionScale),
+    };
+    this.command
+      .output(path.join(this.jobFolder, `visuals.mp4`))
+      .outputOptions(['-pix_fmt yuv420p', '-shortest'])
+      .outputFps(settings.fps)
+      .size(`${size.x}x${size.y}`);
+    if (settings.fastStart) {
+      this.command.outputOptions(['-movflags +faststart']);
+    }
+
+    this.promise = new Promise<void>((resolve, reject) => {
+      this.command.on('end', resolve).on('error', reject);
+    });
+  }
+
+  public async start() {
+    if (!fs.existsSync(this.config.output)) {
+      await fs.promises.mkdir(this.config.output, {recursive: true});
+    }
+    if (!fs.existsSync(this.jobFolder)) {
+      await fs.promises.mkdir(this.jobFolder, {recursive: true});
+    }
+    this.command.run();
+  }
+
+  public async handleFrame({data}: {data: string}) {
+    const base64Data = data.slice(data.indexOf(',') + 1);
+    this.stream.pushImage(Buffer.from(base64Data, 'base64'));
+  }
+
+  public async generateAudio({
+    assets,
+    endFrame,
+  }: {
+    assets: AssetInfo[][];
+    endFrame: number;
+  }) {
+    const assetPositions = getAssetPlacement(assets);
+
+    const audioFilenames: string[] = [];
+    for (const asset of assetPositions) {
+      if (asset.type === 'video') {
+        const filename = await this.prepareAudio(asset, endFrame);
+        audioFilenames.push(filename);
+      } else if (asset.type === 'audio') {
+        const filename = await this.prepareAudio(asset, endFrame);
+        audioFilenames.push(filename);
+      }
+    }
+
+    if (audioFilenames.length > 0) {
+      await this.mergeAudioTracks(audioFilenames);
+      await this.mergeAudioWithVideo(
+        path.join(this.jobFolder, `audio.wav`),
+        path.join(this.jobFolder, `visuals.mp4`),
+      );
+    } else {
+      const destination = path.join(
+        this.config.output,
+        `${this.settings.name}.mp4`,
+      );
+      await fs.promises.copyFile(
+        path.join(this.jobFolder, `visuals.mp4`),
+        destination,
+      );
+      console.log(`Rendered successfully! Video saved to: ${destination}`);
+    }
+  }
+
+  public async end(result: RendererResult) {
+    this.stream.pushImage(null);
+    if (result === 1) {
+      try {
+        this.command.kill('SIGKILL');
+        await this.promise;
+      } catch (_) {
+        // do nothing
+      }
+    } else {
+      await this.promise;
+    }
+  }
+
+  public async kill() {
+    try {
+      await fs.promises.rm(this.jobFolder, {recursive: true, force: true}); // cleanup
+      this.command.kill('SIGKILL');
+      await this.promise;
+    } catch (_) {
+      return;
+    }
+  }
+
+  private async prepareAudio(
+    asset: MediaAsset,
+    endFrame: number,
+  ): Promise<string> {
+    // Construct the output path
+    const sanitizedKey = asset.key.replace(/[/[\]]/g, '-');
+    const outputPath = path.join(this.jobFolder, `${sanitizedKey}.wav`);
+
+    const trimRight = Math.min(
+      asset.trimLeftInSeconds + asset.duration / this.settings.fps,
+      asset.trimLeftInSeconds + endFrame / this.settings.fps,
+    );
+    const padStart = (asset.startInVideo / this.settings.fps) * 1000;
+    const padEnd = Math.max(
+      0,
+      (SAMPLE_RATE * endFrame) / this.settings.fps -
+        (SAMPLE_RATE * asset.duration) / this.settings.fps -
+        (SAMPLE_RATE * padStart) / 1000,
+    );
+
+    await new Promise<void>((resolve, reject) => {
+      ffmpeg(asset.src.replace('/@fs', ''))
+        .audioChannels(2)
+        .audioCodec('pcm_s16le')
+        .audioFrequency(SAMPLE_RATE)
+        .outputOptions([
+          `-af`,
+          `atrim=start=${asset.trimLeftInSeconds}:end=${trimRight},apad=pad_len=${padEnd},adelay=${padStart}|${padStart}|${padStart}`,
+        ])
+        .on('end', () => {
+          resolve();
+        })
+        .on('error', err => {
+          console.error(
+            `Error processing audio for asset key: ${asset.key}`,
+            err,
+          );
+          reject(err);
+        })
+        .save(outputPath);
+    });
+
+    return outputPath;
+  }
+
+  private async mergeAudioTracks(audioFilenames: string[]): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const command = ffmpeg();
+
+      audioFilenames.forEach(filename => {
+        command.input(filename);
+      });
+
+      command
+        .complexFilter([
+          `amix=inputs=${audioFilenames.length}:duration=longest`,
+        ])
+        .outputOptions(['-c:a', 'pcm_s16le'])
+        .on('end', () => {
+          resolve();
+        })
+        .on('error', err => {
+          console.error(`Error merging audio tracks: ${err.message}`);
+          reject(err);
+        })
+        .save(path.join(this.jobFolder, `audio.wav`));
+    });
+  }
+
+  private async mergeAudioWithVideo(
+    audioPath: string,
+    videoPath: string,
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      ffmpeg()
+        .input(videoPath)
+        .input(audioPath)
+        .outputOptions([
+          '-c:v',
+          'copy',
+          '-c:a',
+          'aac',
+          '-strict',
+          'experimental',
+        ])
+        .on('end', () => {
+          resolve();
+          console.log(
+            `Rendered successfully! Video saved to: ${path.join(
+              this.config.output,
+              `${this.settings.name}.mp4`,
+            )}`,
+          );
+        })
+        .on('error', err => {
+          console.error(`Error merging video and audio: ${err.message}`);
+          reject(err);
+        })
+        .save(path.join(this.config.output, `${this.settings.name}.mp4`));
+    });
+  }
+}
+
+function getAssetPlacement(frames: AssetInfo[][]): MediaAsset[] {
+  const assets: MediaAsset[] = [];
+
+  // A map to keep track of when each asset starts.
+  const assetStartMap = new Map<string, number>();
+
+  for (let frame = 0; frame < frames.length; frame++) {
+    for (const asset of frames[frame]) {
+      if (!assetStartMap.has(asset.key)) {
+        assetStartMap.set(asset.key, frame);
+        assets.push({
+          key: asset.key,
+          src: asset.src,
+          type: asset.type,
+          startInVideo: frame,
+          endInVideo: frame,
+          duration: asset.duration,
+          playbackRate: asset.playbackRate,
+          trimLeftInSeconds: asset.currentTime,
+        });
+      } else {
+        const existingAsset = assets.find(a => a.key === asset.key);
+        if (existingAsset) {
+          existingAsset.endInVideo = frame;
+        }
+      }
+    }
+  }
+
+  assets.forEach(asset => {
+    asset.duration = asset.endInVideo - asset.startInVideo + 1;
+  });
+
+  return assets;
+}
diff --git a/packages/ffmpeg/server/ImageStream.ts b/packages/ffmpeg/server/ImageStream.ts
new file mode 100644
index 00000000..a92e233d
--- /dev/null
+++ b/packages/ffmpeg/server/ImageStream.ts
@@ -0,0 +1,20 @@
+import {Readable} from 'stream';
+
+export class ImageStream extends Readable {
+  private image: Buffer | null = null;
+  private hasData = false;
+
+  public pushImage(image: Buffer | null) {
+    this.image = image;
+    this.hasData = true;
+    this._read();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  public override _read() {
+    if (this.hasData) {
+      this.hasData = false;
+      this.push(this.image);
+    }
+  }
+}
diff --git a/packages/ffmpeg/server/global.d.ts b/packages/ffmpeg/server/global.d.ts
new file mode 100644
index 00000000..874c5de5
--- /dev/null
+++ b/packages/ffmpeg/server/global.d.ts
@@ -0,0 +1,9 @@
+declare module '@ffmpeg-installer/ffmpeg' {
+  let object: {path: string};
+  export = object;
+}
+
+declare module '@ffprobe-installer/ffprobe' {
+  let object: {path: string};
+  export = object;
+}
diff --git a/packages/ffmpeg/server/index.ts b/packages/ffmpeg/server/index.ts
new file mode 100644
index 00000000..02cf75b8
--- /dev/null
+++ b/packages/ffmpeg/server/index.ts
@@ -0,0 +1,22 @@
+import {
+  Plugin,
+  PLUGIN_OPTIONS,
+  PluginConfig,
+} from '@motion-canvas/vite-plugin/lib/plugins';
+import {FFmpegBridge} from './FFmpegBridge';
+
+export default (): Plugin => {
+  let config: PluginConfig;
+  return {
+    name: 'motion-canvas/ffmpeg',
+    [PLUGIN_OPTIONS]: {
+      entryPoint: '@motion-canvas/ffmpeg/lib/client',
+      async config(value) {
+        config = value;
+      },
+    },
+    configureServer(server) {
+      new FFmpegBridge(server.ws, config);
+    },
+  };
+};
diff --git a/packages/ffmpeg/server/motion-canvas.d.ts b/packages/ffmpeg/server/motion-canvas.d.ts
new file mode 100644
index 00000000..067c6a44
--- /dev/null
+++ b/packages/ffmpeg/server/motion-canvas.d.ts
@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />
diff --git a/packages/ffmpeg/server/tsconfig.json b/packages/ffmpeg/server/tsconfig.json
new file mode 100644
index 00000000..12b219f6
--- /dev/null
+++ b/packages/ffmpeg/server/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "../lib/server",
+    "inlineSourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "strict": true,
+    "module": "CommonJS",
+    "target": "es2020",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["."]
+}
diff --git a/packages/ffmpeg/tsdoc.json b/packages/ffmpeg/tsdoc.json
new file mode 100644
index 00000000..f5a4dc61
--- /dev/null
+++ b/packages/ffmpeg/tsdoc.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+  "extends": ["../../tsdoc.json"]
+}
diff --git a/packages/template/package.json b/packages/template/package.json
index ee71ab74..2e933d27 100644
--- a/packages/template/package.json
+++ b/packages/template/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@motion-canvas/core": "*",
-    "@motion-canvas/2d": "*"
+    "@motion-canvas/2d": "*",
+    "@motion-canvas/ffmpeg": "*"
   },
   "devDependencies": {
     "@motion-canvas/ui": "*",
diff --git a/packages/template/src/project.meta b/packages/template/src/project.meta
index b7fac3db..4633cb0c 100644
--- a/packages/template/src/project.meta
+++ b/packages/template/src/project.meta
@@ -21,11 +21,10 @@
     "resolutionScale": 1,
     "colorSpace": "srgb",
     "exporter": {
-      "name": "@motion-canvas/core/image-sequence",
+      "name": "@motion-canvas/ffmpeg",
       "options": {
-        "fileType": "image/png",
-        "quality": 100,
-        "groupByScene": false
+        "fastStart": true,
+        "includeAudio": true
       }
     }
   }
diff --git a/packages/template/vite.config.ts b/packages/template/vite.config.ts
index 692ea902..e609449c 100644
--- a/packages/template/vite.config.ts
+++ b/packages/template/vite.config.ts
@@ -1,3 +1,4 @@
+import ffmpeg from '@motion-canvas/ffmpeg';
 import markdown from '@motion-canvas/internal/vite/markdown-literals';
 import preact from '@preact/preset-vite';
 import {defineConfig} from 'vite';
@@ -23,6 +24,7 @@ export default defineConfig({
   },
   plugins: [
     markdown(),
+    ffmpeg(),
     preact({
       include: [
         /packages\/ui\/src\/(.*)\.tsx?$/,