intro to me slide

src/global.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");

src/project.meta

@@ -1,7 +1,7 @@
 {
   "version": 0,
   "shared": {
-    "background": null,
+    "background": "rgb(30,30,46)",
     "range": [
       0,
       null
@@ -13,7 +13,7 @@
     "audioOffset": 0
   },
   "preview": {
-    "fps": 30,
+    "fps": 60,
     "resolutionScale": 1
   },
   "rendering": {

src/project.ts

@@ -1,7 +1,10 @@
-import {makeProject} from '@motion-canvas/core';
+import { makeProject } from "@motion-canvas/core";
 
-import example from './scenes/example?scene';
+import "./global.css"; // <- import the css
+
+import example from "./scenes/example?scene";
+import me from "./scenes/me?scene";
 
 export default makeProject({
-  scenes: [example],
+  scenes: [example, me],
 });

src/scenes/example.tsx

@@ -1,8 +1,23 @@
-import { makeScene2D } from "@motion-canvas/2d";
+import { Node, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import { waitFor } from "@motion-canvas/core";
+import { beginSlide, waitFor, createRef } from "@motion-canvas/core";
+import { palette } from "../palette";
 
 export default makeScene2D(function* (view) {
-  // Create your animations here
+  const node = createRef<Node>();
 
-  yield* waitFor(5);
+  view.add(
+    <Node ref={node}>
+      <Layout layout direction="column" textAlign="center" gap={80}>
+        <Txt fontFamily={"Fira Code"} fill={palette.text.hex}>
+          Compiling The Lambda Calculus {"=> λ"}
+        </Txt>
+        <Txt fontFamily={"Fira Code"} fill={palette.text.hex}>
+          Elizabeth Hunt (@simponic)
+        </Txt>
+      </Layout>
+    </Node>
+  );
+  yield* beginSlide("Title");
+  yield* node().opacity(0, 1);
+  yield* waitFor(1);
 });

src/scenes/me.meta

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

src/scenes/me.tsx

@@ -0,0 +1,19 @@
+import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide, waitFor } from "@motion-canvas/core";
+
+import me from "../../public/img/me.png";
+
+export default makeScene2D(function* (view) {
+  yield* beginSlide("Title");
+  view.add(
+    <Layout
+      layout
+      direction="row"
+      justifyContent="space-around"
+      alignItems="center"
+      gap={0}
+    >
+      <Img scale={0.5} src={me}></Img>
+    </Layout>
+  );
+});