add xkcd and basic transitions

src/global.css

@@ -1 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");
+@font-face {
+  font-family: "JetBrains";
+  src:
+    local("JetBrains"),
+    url(public/fonts/JetBrainsMono-Regular.ttf) format("truetype");
+}

src/project.ts

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

src/scenes/example.tsx

@@ -1,23 +0,0 @@
-import { Node, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import { beginSlide, waitFor, createRef } from "@motion-canvas/core";
-import { palette } from "../palette";
-
-export default makeScene2D(function* (view) {
-  const node = createRef<Node>();
-
-  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/index.ts

@@ -0,0 +1,4 @@
+import title from "./title?scene";
+import me from "./me?scene";
+
+export const scenes = [title, me];

src/scenes/me.tsx

@@ -1,19 +1,74 @@
-import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import { beginSlide, waitFor } from "@motion-canvas/core";
+import { beginSlide, createRef, waitFor, all } from "@motion-canvas/core";
 
-import me from "../../public/img/me.png";
+import me from "../../public/img/me.jpg";
+import { theme } from "../theme";
 
 export default makeScene2D(function* (view) {
-  yield* beginSlide("Title");
+  const img = createRef<Img>();
-  view.add(
+  const node = createRef<Node>();
-    <Layout
+  const layout = createRef<Layout>();
-      layout
+  const src = createRef<Txt>();
-      direction="row"
+
-      justifyContent="space-around"
+  yield view.add(
-      alignItems="center"
+    <>
-      gap={0}
+      <Layout
-    >
+        layout
-      <Img scale={0.5} src={me}></Img>
+        ref={layout}
-    </Layout>
+        direction="column"
+        justifyContent="center"
+        gap={12}
+        alignItems="start"
+        y={-10}
+      >
+        <Node ref={node} opacity={0}>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            Hello!
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            My name is Elizabeth{" "}
+            <Txt fontFamily={theme.font} fill={theme.teal.hex}>
+              (@simponic)
+            </Txt>
+            .
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            I love 😍
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            {"=>"} Common LISP
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            {"=>"}{" "}
+            <Txt fontFamily={theme.font} fill={theme.mauve.hex}>
+              Elixir
+            </Txt>
+          </Txt>
+          <Txt fontFamily={theme.font} fill={theme.text.hex}>
+            {"=>"} Functional Programming
+          </Txt>
+        </Node>
+      </Layout>
+      <Img y={-10} ref={img} src={me} width={10} alpha={0} radius={20} />{" "}
+      <Txt opacity={0} ref={src} fontFamily={theme.font} fill={theme.green.hex}>
+        git.simponic.xyz/simponic/compiling-the-lambda-calculus
+      </Txt>
+    </>
   );
+
+  yield img().fill(img().getColorAtPoint(0));
+
+  const diff = 370;
+  yield* all(
+    img().size([450, 450], 1),
+    img().radius(50, 1),
+    img().alpha(1, 1),
+    img().position.x(-diff, 1),
+    node().opacity(1, 1),
+    layout().position.x(diff, 1),
+    src().opacity(1, 1),
+    src().position.y(275, 1)
+  );
+
+  yield* beginSlide("About Me");
 });

src/scenes/title.tsx

@@ -0,0 +1,36 @@
+import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
+import { beginSlide } from "@motion-canvas/core";
+import { theme } from "../theme";
+
+import xkcd from "../../public/img/xkcd.png";
+
+export default makeScene2D(function* (view) {
+  yield view.add(
+    <>
+      <Layout
+        layout
+        direction="column"
+        textAlign="center"
+        alignItems="center"
+        gap={100}
+      >
+        <Txt fontFamily={theme.font} fill={theme.text.hex}>
+          Compiling The Lambda Calculus{" "}
+          <Txt fontFamily={theme.font} fill={theme.blue.hex}>
+            {"=> λ"}
+          </Txt>
+        </Txt>
+        <Img scale={1.4} src={xkcd}></Img>
+        <Txt
+          fontFamily={theme.font}
+          fill={theme.flamingo.hex}
+          fontStyle="italic"
+          fontSize={40}
+        >
+          #2453
+        </Txt>
+      </Layout>
+    </>
+  );
+  yield* beginSlide("Title");
+});

src/theme.ts

@@ -1,5 +1,6 @@
 /* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */
-export const palette = {
+export const theme = {
+  font: "JetBrains",
   rosewater: {
     hex: "#f5e0dc",
     rgb: {