itinerary

src/scenes/index.ts

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

src/scenes/itinerary.meta

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

src/scenes/itinerary.tsx

@@ -0,0 +1,25 @@
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  fadeTransition,
+  slideTransition,
+  waitFor,
+} from "@motion-canvas/core";
+import { theme } from "../theme";
+
+export default makeScene2D(function* (view) {
+  view.add(
+    <Layout layout direction="column" alignItems="center">
+      <Txt fontFamily={theme.font} fontSize={100} fill={theme.text.hex}>
+        Part One
+      </Txt>
+      <Txt fontFamily={theme.font} fill={theme.text.hex}>
+        Exploring the Functional Programming World
+      </Txt>
+    </Layout>
+  );
+
+  yield* slideTransition(Direction.Right);
+  yield* beginSlide("hi");
+});

src/scenes/me.tsx

@@ -1,5 +1,11 @@
 import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
-import { beginSlide, createRef, waitFor, all } from "@motion-canvas/core";
+import {
+  beginSlide,
+  createRef,
+  waitFor,
+  all,
+  fadeTransition,
+} from "@motion-canvas/core";
 
 import me from "../../public/img/me.jpg";
 import { theme } from "../theme";
@@ -10,7 +16,7 @@ export default makeScene2D(function* (view) {
   const layout = createRef<Layout>();
   const src = createRef<Txt>();
 
-  yield view.add(
+  view.add(
     <>
       <Layout
         layout
@@ -39,10 +45,7 @@ export default makeScene2D(function* (view) {
             {"=>"} Common LISP
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"}{" "}
+            {"=>"} Elixir
-            <Txt fontFamily={theme.font} fill={theme.mauve.hex}>
-              Elixir
-            </Txt>
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
             {"=>"} Functional Programming