1 files changed, 156 insertions, 0 deletions
diff --git a/src/scenes/first_box.tsx b/src/scenes/first_box.tsx
new file mode 100644
index 0000000..4927157
--- /dev/null
+++ b/src/scenes/first_box.tsx
@@ -0,0 +1,156 @@
+import {
+  Img,
+  Rect,
+  Node,
+  Video,
+  makeScene2D,
+  Txt,
+  Line,
+  LineSegment,
+} from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  map,
+  slideTransition,
+  tween,
+  all,
+  waitFor,
+} from "@motion-canvas/core";
+
+import { CodeBlock } from "@motion-canvas/2d/lib/components/CodeBlock";
+import { theme } from "../theme";
+
+const fibonacciFn = (n: number): number => {
+  if (n <= 2) {
+    return 1;
+  }
+  return fibonacciFn(n - 1) + fibonacciFn(n - 2);
+};
+
+const fibonacci = `
+const fibonacci = (n: number): number => {
+  if (n <= 2) {
+    return 1;
+  }
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+`
+  .split("\n")
+  .filter((x) => x.trim())
+  .join("\n");
+
+export default makeScene2D(function* (view) {
+  const block = createRef<CodeBlock>();
+  const node = createRef<Node>();
+  const rect = createRef<Rect>();
+
+  const boxMoji = createRef<Txt>();
+  const inSegment = createRef<Line>();
+  const outSegment = createRef<Line>();
+  const input = createRef<Txt>();
+  const output = createRef<Txt>();
+
+  yield* view.add(
+    <>
+      <Rect
+        ref={rect}
+        radius={4}
+        stroke={theme.overlay0.hex}
+        fill={theme.crust.hex}
+        lineWidth={4}
+        padding={60}
+        layout
+      >
+        <Node ref={node} opacity={0}>
+          <CodeBlock
+            fontFamily={theme.font}
+            language="typescript"
+            ref={block}
+            fontSize={1}
+            code={fibonacci}
+          ></CodeBlock>
+        </Node>
+      </Rect>
+      <Txt fontFamily={theme.font} fill={theme.text.hex} ref={boxMoji}>
+        😴
+      </Txt>
+      <Line
+        points={[]}
+        ref={inSegment}
+        stroke={theme.green.hex}
+        lineWidth={8}
+        radius={40}
+        endArrow
+      ></Line>
+      <Line
+        points={[]}
+        ref={outSegment}
+        stroke={theme.red.hex}
+        lineWidth={8}
+        radius={40}
+        endArrow
+      ></Line>
+      <Txt
+        opacity={0}
+        fontFamily={theme.font}
+        fill={theme.text.hex}
+        ref={input}
+      ></Txt>
+      <Txt
+        opacity={0}
+        fontFamily={theme.font}
+        fill={theme.text.hex}
+        ref={output}
+      ></Txt>
+    </>,
+  );
+
+  yield boxMoji().position(rect().middle());
+  yield* slideTransition(Direction.Left);
+
+  yield* beginSlide("Black Box");
+
+  const padding = 100;
+  const left = rect().left();
+  const right = rect().right();
+  yield* all(
+    inSegment().points([left.addX(-padding), left], 0.5),
+    outSegment().points([right, right.addX(padding)], 0.5),
+  );
+  yield input().position(left.addX(-padding));
+  yield output().position(right);
+  for (const i of [1, 2, 3]) {
+    yield* all(
+      input().opacity(1, 0.5),
+      input().text(i.toString(), 0.5),
+      input().position(left.addX(-padding - 20), 0.5),
+    );
+
+    yield* beginSlide("Input " + i);
+
+    yield* input().position(left, 0.5);
+    yield* all(input().opacity(0, 0.2), boxMoji().text("👷‍♀️⚙️", 0.2));
+    yield* waitFor(0.5);
+
+    const result = fibonacciFn(i);
+    yield* all(
+      output().opacity(1, 0.5),
+      output().text(result.toString(), 0.5),
+      output().position(right, 0.5),
+    );
+
+    yield* all(boxMoji().text("😴", 0.2));
+
+    yield* beginSlide("Output " + i);
+  }
+
+  yield* all(
+    boxMoji().opacity(0, 0.2),
+    block().fontSize(30, 1),
+    node().opacity(1, 1),
+  );
+
+  yield* beginSlide("Revealing");
+});