1 files changed, 122 insertions, 0 deletions
diff --git a/src/scenes/valentines_letters.tsx b/src/scenes/valentines_letters.tsx
new file mode 100644
index 0000000..8a7359d
--- /dev/null
+++ b/src/scenes/valentines_letters.tsx
@@ -0,0 +1,122 @@
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  all,
+  beginSlide,
+  createRef,
+  makeRef,
+  slideTransition,
+} from "@motion-canvas/core";
+
+import { FunctionBox } from "../components/function_box";
+import { theme } from "../theme";
+import { PEOPLE, Person } from "../components/person";
+
+const valentineLetterGenerator = `
+interface PersonI {
+  name: string;
+  birthday: Date;
+  color: string;
+}
+
+(function valentinesLettersFor(people: PersonI[]) {
+  const letters: string[] = [];
+
+  for (const person of people) {
+    const letter = "Dear, " + person.name + "\\n"
+       + "Your smile lights up my world.\\n"
+       + "Happy Valentine's Day!";
+    letters.push(letter);
+  }
+
+  return letters;
+})`;
+
+export default makeScene2D(function* (view) {
+  const layout = createRef<Layout>();
+  const functionBox = createRef<FunctionBox>();
+  const people: Person[] = [];
+  const peopleLayout: Layout[] = [];
+  const peopleText: Txt[] = [];
+
+  view.add(
+    <FunctionBox
+      ref={functionBox}
+      source={valentineLetterGenerator}
+      workingText="📝⚙"
+      outputFontSize={25}
+    ></FunctionBox>,
+  );
+
+  yield* all(slideTransition(Direction.Left), functionBox().showCode(0.75));
+  yield* functionBox().reset(0.1);
+
+  yield* beginSlide("Show code");
+
+  yield* functionBox().reset(0.1);
+  yield* all(
+    functionBox().hideCode(0.8),
+    functionBox().setInputs(
+      [
+        {
+          val: PEOPLE,
+          node: (
+            <Layout direction="column" gap={5} layout>
+              {PEOPLE.map((person) => (
+                <Person person={person} />
+              ))}
+            </Layout>
+          ),
+        },
+      ],
+      0.8,
+    ),
+  );
+
+  yield* beginSlide("Show people");
+
+  yield* functionBox().propogateInput(0.6);
+  yield* functionBox().propogateOutput(0.6);
+  yield* beginSlide("Generate valentines letters");
+
+  yield* functionBox().opacity(0, 0.5);
+  functionBox().remove();
+
+  view.add(
+    <Layout opacity={0} ref={layout} direction="row" gap={15} layout>
+      {PEOPLE.map((person, i) => (
+        <Layout
+          ref={makeRef(peopleLayout, i)}
+          alignItems="center"
+          direction="column"
+          gap={100}
+        >
+          <Person ref={makeRef(people, i)} person={person} />
+          <Txt
+            ref={makeRef(peopleText, i)}
+            fontSize={0}
+            fontFamily={theme.font}
+            fill={theme.text.hex}
+          />
+        </Layout>
+      ))}
+    </Layout>,
+  );
+  yield* layout().opacity(1, 0.5);
+
+  yield* all(...peopleText.map((text) => text.text("💌", 0)));
+  yield* all(...peopleText.map((text) => text.fontSize(50, 0.5)));
+  yield* all(...peopleLayout.map((layout) => layout.gap(0, 0.5)));
+  yield* all(
+    ...peopleText.map((text) =>
+      all(text.fontSize(0, 0.5), text.opacity(0, 0.5)),
+    ),
+  );
+
+  yield* beginSlide("Give people valentines letters");
+
+  yield* all(...people.map((person) => person.emit("😊", 0.5)));
+
+  yield* beginSlide("See their reactions");
+  yield* all(...people.map((person) => person.opacity(0, 0.5)));
+});