1 files changed, 61 insertions, 0 deletions
diff --git a/src/scenes/pros_cons.tsx b/src/scenes/pros_cons.tsx
new file mode 100644
index 0000000..508c7bc
--- /dev/null
+++ b/src/scenes/pros_cons.tsx
@@ -0,0 +1,61 @@
+import { Img, Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  slideTransition,
+} from "@motion-canvas/core";
+import { theme } from "../theme";
+
+const PROS = [
+  "readbility, reasoning",
+  "concurrency",
+  "no side effects",
+  "computers and math!",
+];
+
+const CONS = ["more computation", "higher learning curve"];
+
+export default makeScene2D(function* (view) {
+  const pros = createRef<Txt>();
+  const cons = createRef<Txt>();
+
+  view.add(
+    <Layout direction="row" justifyContent="center" gap={300} layout>
+      <Layout direction="column" justifyContent="end">
+        <Txt fontSize={30} fontFamily={theme.font} fill={theme.green.hex}>
+          PROS :)
+        </Txt>
+        <Txt
+          ref={pros}
+          fontSize={30}
+          fontFamily={theme.font}
+          fill={theme.text.hex}
+        ></Txt>
+      </Layout>
+      <Layout direction="column" justifyContent="start">
+        <Txt fontSize={30} fontFamily={theme.font} fill={theme.red.hex}>
+          CONS :(
+        </Txt>
+        <Txt
+          ref={cons}
+          fontSize={30}
+          fontFamily={theme.font}
+          fill={theme.text.hex}
+        ></Txt>
+      </Layout>
+    </Layout>,
+  );
+  yield* slideTransition(Direction.Right);
+  yield* beginSlide("layout pros and cons");
+
+  for (const pro of PROS) {
+    yield* pros().text(pros().text() + "\n\n+ " + pro, 0.5);
+    yield* beginSlide("pro - " + pro);
+  }
+
+  for (const con of CONS) {
+    yield* cons().text(cons().text() + "\n\n- " + con, 0.5);
+    yield* beginSlide("con - " + con);
+  }
+});