first commit

motion-canvas-animations/presentation-animations/.gitignore

@@ -0,0 +1,15 @@
+# Generated files
+node_modules
+output
+dist
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

motion-canvas-animations/presentation-animations/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "presentation-animations",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "serve": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "@motion-canvas/core": "^3.11.0",
+    "@motion-canvas/2d": "^3.11.0",
+    "@motion-canvas/ffmpeg": "^1.1.0"
+  },
+  "devDependencies": {
+    "@motion-canvas/ui": "^3.11.0",
+    "@motion-canvas/vite-plugin": "^3.11.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4"
+  }
+}

motion-canvas-animations/presentation-animations/src/motion-canvas.d.ts

@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />

motion-canvas-animations/presentation-animations/src/project.meta

@@ -0,0 +1,32 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 60,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@motion-canvas/core/image-sequence",
+      "options": {
+        "fileType": "image/png",
+        "quality": 100,
+        "groupByScene": false
+      }
+    }
+  }
+}

motion-canvas-animations/presentation-animations/src/project.ts

@@ -0,0 +1,7 @@
+import {makeProject} from '@motion-canvas/core';
+
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+});

motion-canvas-animations/presentation-animations/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 1375832605
+}

motion-canvas-animations/presentation-animations/src/scenes/example.tsx

@@ -0,0 +1,22 @@
+import {makeScene2D, Circle} from '@motion-canvas/2d';
+import {all, createRef} from '@motion-canvas/core';
+
+export default makeScene2D(function* (view) {
+  const myCircle = createRef<Circle>();
+
+  view.add(
+    <Circle
+      ref={myCircle}
+      // try changing these properties:
+      x={-300}
+      width={140}
+      height={140}
+      fill="#e13238"
+    />,
+  );
+
+  yield* all(
+    myCircle().position.x(300, 1).to(-300, 1),
+    myCircle().fill('#e6a700', 1).to('#e13238', 1),
+  );
+});

motion-canvas-animations/presentation-animations/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@motion-canvas/2d/tsconfig.project.json",
+  "include": ["src"]
+}

motion-canvas-animations/presentation-animations/vite.config.ts

@@ -0,0 +1,10 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@motion-canvas/vite-plugin';
+import ffmpeg from '@motion-canvas/ffmpeg';
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+    ffmpeg(),
+  ],
+});