add animation

script.md

@@ -0,0 +1,18 @@
+About Me
+===
+
+"For the new faces, I'm Elizabeth, or simponic on the discord..."
+
+Part One
+===
+
+"But you didn't come here to meet me; and we don't have much time to get through everything. So let's start. Part one: Flirting With Functions!"
+
+Flirting With Functions
+===
+Tomorrow's Valentine's day, but you don't have a Valentine!
+
+Desparate to find one, you turn to your computer and open Emacs and open "m-x doctor".
+
+
+

src/scenes/flirtingwithfunctions.meta

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

src/scenes/flirtingwithfunctions.tsx

@@ -0,0 +1,33 @@
+import { Img, Layout, Txt, Video, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  map,
+  slideTransition,
+  tween,
+} from "@motion-canvas/core";
+import { theme } from "../theme";
+import sad from "../../public/img/sad.mp4";
+import emacsmac from "../../public/img/emacsmac.jpg";
+
+export default makeScene2D(function* (view) {
+  const vid = createRef<Video>();
+  const img = createRef<Img>();
+  const startX = 1200;
+  const endX = 300;
+
+  view.add(<Video width={300} ref={vid} src={sad} x={0} />);
+  view.add(<Img width={200} ref={img} src={emacsmac} x={startX} />);
+
+  vid().loop(true);
+  vid().play();
+
+  yield* beginSlide("No Valentine");
+
+  yield* tween(4.2, (val) => {
+    img().position.x(map(startX, endX, val));
+  });
+
+  yield* beginSlide("Going To The Doctor");
+});

src/scenes/index.ts

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

src/scenes/itinerary.meta

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

src/scenes/me.tsx

@@ -39,16 +39,16 @@ export default makeScene2D(function* (view) {
             .
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            I love 😍
+            {"=>"} I {"<3"} Functional Programming λ.
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} Common LISP
+            {"=>"} I've been a student networking{"\n"}software engineer here at
+            USU
+            {"\n"}
+            for over 1.5 years.
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} Elixir
+            {"=>"} I'm an SDE at AWS starting{"\n"}soon in Seattle.
-          </Txt>
-          <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} Functional Programming
           </Txt>
         </Node>
       </Layout>
@@ -56,12 +56,12 @@ export default makeScene2D(function* (view) {
       <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;
+  const diff = 380;
   yield* all(
     img().size([450, 450], 1),
     img().radius(50, 1),
@@ -70,7 +70,7 @@ export default makeScene2D(function* (view) {
     node().opacity(1, 1),
     layout().position.x(diff, 1),
     src().opacity(1, 1),
-    src().position.y(275, 1)
+    src().position.y(290, 1),
   );
 
   yield* beginSlide("About Me");

src/scenes/partone.meta

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

src/scenes/partone.tsx

@@ -1,11 +1,5 @@
 import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
-import {
+import { Direction, beginSlide, slideTransition } from "@motion-canvas/core";
-  Direction,
-  beginSlide,
-  fadeTransition,
-  slideTransition,
-  waitFor,
-} from "@motion-canvas/core";
 import { theme } from "../theme";
 
 export default makeScene2D(function* (view) {
@@ -15,11 +9,11 @@ export default makeScene2D(function* (view) {
         Part One
       </Txt>
       <Txt fontFamily={theme.font} fill={theme.text.hex}>
-        Exploring the Functional Programming World
+        Flirting With Functions
       </Txt>
-    </Layout>
+    </Layout>,
   );
 
   yield* slideTransition(Direction.Right);
-  yield* beginSlide("hi");
+  yield* beginSlide("Part One");
 });