chore(🌎): add RN Web example (#2852)

apps/remotion/.eslintrc

@@ -0,0 +1,15 @@
+{
+	"extends": [
+		"react-native-wcandillon"
+	],
+	"parserOptions": {
+    "project": "./tsconfig.json"
+  },
+	"rules": {
+		"react/react-in-jsx-scope": "off",
+		"@typescript-eslint/no-non-null-assertion": "off",
+		"@typescript-eslint/no-var-requires": "off",
+		"prefer-destructuring": ["error", {"object": true, "array": false}],
+		"import/extensions": ["error", { "pattern": { "sksl": "always" }}]
+	}
+}

apps/remotion/README.md

@@ -0,0 +1,51 @@
+# Remotion video
+
+<p align="center">
+  <a href="https://github.com/remotion-dev/logo">
+    <img src="https://github.com/remotion-dev/logo/raw/main/withtitle/element-0.png">
+  </a>
+</p>
+
+Welcome to your Remotion project!
+
+## Commands
+
+**Install Dependencies**
+
+```console
+npm i
+```
+
+**Start Preview**
+
+```console
+npm start
+```
+
+**Render video**
+
+```console
+npm run build
+```
+
+**Upgrade Remotion**
+
+```console
+npm run upgrade
+```
+
+## Docs
+
+Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
+
+## Help
+
+We provide help [on our Discord server](https://discord.gg/6VzzNDwUwV).
+
+## Issues
+
+Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
+
+## License
+
+Notice that for some entities a company license is needed. Read [the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).

apps/remotion/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript"
+  ],
+  plugins: [
+    "@babel/plugin-transform-flow-strip-types"
+  ]
+};

apps/remotion/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "remotion-skia",
+  "version": "1.0.0",
+  "description": "My Remotion video",
+  "scripts": {
+    "start": "remotion preview src/index.tsx",
+    "build": "remotion render src/index.tsx Playground current.mov --gl=angle --pixel-format=yuva444p10le --codec=prores --prores-profile=4444",
+    "upgrade": "remotion upgrade",
+    "build:sequence": "remotion render src/index.tsx Playground stills --sequence --gl=angle",
+    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache",
+    "test": "jest",
+    "ci": "yarn lint && yarn tsc && yarn test"
+  },
+  "repository": {},
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-transform-flow-strip-types": "^7.25.9",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@remotion/cli": "4.0.244",
+    "@shopify/react-native-skia": "workspace:*",
+    "@types/jest": "^29.2.2",
+    "@types/opentype.js": "^1.3.4",
+    "@types/prismjs": "^1.26.0",
+    "@types/react-native": "^0.69.2",
+    "abs-svg-path": "^0.1.1",
+    "adaptive-bezier-curve": "^1.0.3",
+    "babel-jest": "^29.3.1",
+    "buffer": "^6.0.3",
+    "cdt2d": "^1.0.0",
+    "color": "^4.2.3",
+    "eslint": "8",
+    "eslint-config-react-native-wcandillon": "^3.10.2",
+    "eslint-plugin-import": "2.27.5",
+    "flubber": "^0.4.2",
+    "geometry-extrude": "^0.2.1",
+    "jest": "^29.3.1",
+    "lodash": "^4.17.21",
+    "normalize-svg-path": "^1.1.0",
+    "opentype.js": "^1.3.4",
+    "parse-svg-path": "^0.1.2",
+    "raw-loader": "^4.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-native-web": "^0.19.7",
+    "remotion": "4.0.244",
+    "serialize-svg-path": "^0.1.0",
+    "simplex-noise": "^4.0.0",
+    "svg-mesh-3d": "^1.1.0",
+    "svg-path-properties": "^1.0.13",
+    "typescript": "^5.2.2",
+    "wgpu-matrix": "^2.9.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@babel/preset-flow": "^7.25.9",
+    "@types/color": "^3.0.6",
+    "@types/lodash": "^4.14.182",
+    "@types/react": "^18.0.15",
+    "@types/web": "^0.0.61",
+    "babel-loader": "^9.2.1",
+    "copy-webpack-plugin": "11"
+  },
+  "resolutions": {
+    "@types/react": "17.0.30"
+  }
+}

apps/remotion/remotion.config.ts

@@ -0,0 +1,75 @@
+import { Config } from "@remotion/cli/config";
+import CopyPlugin from "copy-webpack-plugin";
+
+Config.setOverwriteOutput(true);
+Config.setVideoImageFormat("png");
+Config.setPixelFormat("yuva444p10le");
+Config.setCodec("prores");
+Config.setProResProfile("4444");
+
+//Config.setProResProfile("4444");
+//Config.setFrameRange([140, 244]);
+
+Config.overrideWebpackConfig((currentConfiguration) => {
+  if (!currentConfiguration.module) {
+    currentConfiguration.module = {};
+  }
+  if (!currentConfiguration.module.rules) {
+    currentConfiguration.module.rules = [];
+  }
+  currentConfiguration.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules\/(?!@react-native)/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: ["@babel/preset-flow"],
+        plugins: ["@babel/plugin-transform-flow-strip-types"],
+      },
+    },
+  });
+  currentConfiguration.plugins!.push(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    new CopyPlugin({
+      patterns: [
+        { from: "../../node_modules/canvaskit-wasm/bin/full/canvaskit.wasm" },
+      ],
+    })
+  );
+  if (!currentConfiguration.resolve) {
+    currentConfiguration.resolve = {};
+  }
+  if (!currentConfiguration.resolve.alias) {
+    currentConfiguration.resolve.alias = {};
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  currentConfiguration.resolve.alias["react-native-reanimated"] = false;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  currentConfiguration.resolve.alias["react-native-reanimated/package.json"] =
+    false;
+  return {
+    ...currentConfiguration,
+    resolve: {
+      ...currentConfiguration.resolve,
+      fallback: {
+        fs: false,
+        path: false,
+        buffer: require.resolve("buffer/"),
+        "react-native/Libraries/Image/AssetRegistry": false,
+      },
+      extensions: [
+        ".web.js",
+        ".web.ts",
+        ".web.tsx",
+        ".js",
+        ".ts",
+        ".tsx",
+        ".sksl",
+        "...",
+      ],
+    },
+  };
+});

apps/remotion/src/Playground/Playground.tsx

@@ -0,0 +1,68 @@
+import { Fill } from "@shopify/react-native-skia";
+
+import { Background, Canvas } from "../components";
+import {
+  makeAnimation,
+  stagger,
+  timing,
+} from "../components/animations/Animations";
+const duration = 20;
+
+const playground = {
+  expoProgress: 0,
+  skiaProgress: 0,
+  remotionProgress: 0,
+  snackProgress: 0,
+  webProgress: 0,
+  uiProgress: 0,
+  reconcilerProgress: 0,
+  picturesProgress: 0,
+};
+
+const state = makeAnimation(function* ({
+  expoProgress,
+  skiaProgress,
+  remotionProgress,
+  snackProgress,
+  webProgress,
+  uiProgress,
+  reconcilerProgress,
+  picturesProgress,
+}) {
+  yield* stagger(
+    8,
+    timing(skiaProgress, { duration }),
+    timing(expoProgress, { duration }),
+    timing(snackProgress, { duration }),
+    timing(webProgress, { duration }),
+    timing(uiProgress, { duration }),
+    timing(reconcilerProgress, { duration }),
+    timing(picturesProgress, { duration }),
+    timing(remotionProgress, { duration })
+  );
+},
+playground);
+
+export const durationInFrames = state.duration;
+
+export const Playground = () => {
+  return (
+    <>
+      <Canvas
+        typefaces={{ RubikMedium: require("./assets/Rubik-Medium.otf") }}
+        images={{}}
+      >
+        <Fill color="black" />
+        <Tiles />
+      </Canvas>
+    </>
+  );
+};
+
+const Tiles = () => {
+  return (
+    <>
+      <Background />
+    </>
+  );
+};