make function box more smooth

src/components/function_box.tsx

@@ -91,7 +91,7 @@ export class FunctionBox extends Node {
             <Rect direction={"row"} alignItems={"center"} gap={10}>
               <Rect
                 direction={"row"}
-                fontSize={this.inputFontSize}
+                fontSize={0}
                 ref={makeRef(this.inputs, i)}
                 justifyContent={"end"}
                 opacity={1}
@@ -153,7 +153,7 @@ export class FunctionBox extends Node {
               ref={this.output}
               justifyContent={"end"}
               opacity={1}
-              fontSize={this.outputFontSize}
+              fontSize={0}
             ></Rect>
           </Rect>
         </Rect>
@@ -164,10 +164,10 @@ export class FunctionBox extends Node {
   public *resetInput(duration: number) {
     yield* all(
       ...this.inputs.map((x) =>
-        all(x.opacity(1, duration), x.fontSize(this.inputFontSize, duration)),
+        all(x.opacity(0, duration), x.fontSize(0, duration)),
       ),
       ...this.inputSegments.map((segment) =>
-        all(segment.points([], duration), segment.opacity(1, duration)),
+        all(segment.points([], duration), segment.opacity(0, duration)),
       ),
     );
 
@@ -206,6 +206,7 @@ export class FunctionBox extends Node {
     });
     yield* all(
       ...this.inputSegments.map((segment) =>
+        all(
           segment.points(
             [
               { x: -this.padding, y: 0 },
@@ -213,6 +214,8 @@ export class FunctionBox extends Node {
             ],
             duration,
           ),
+          segment.opacity(1, duration),
+        ),
       ),
       ...this.inputs.map((input) =>
         all(
@@ -231,6 +234,9 @@ export class FunctionBox extends Node {
     );
     yield* all(
       this.resetInput(duration),
+      ...this.inputs.map((input) =>
+        all(input.opacity(0.2, duration), input.fontSize(0, duration)),
+      ),
       this.boxMoji().text(this.workingText, duration),
     );
   }
@@ -239,7 +245,6 @@ export class FunctionBox extends Node {
     yield* all(
       this.child()?.opacity(0.2, duration),
       this.output().opacity(0.2, duration),
-      this.output().fontSize(this.outputFontSize, duration),
       this.outputSegment().opacity(0, duration),
     );
 
@@ -276,6 +281,7 @@ export class FunctionBox extends Node {
 
     yield* all(
       this.boxMoji().text(this.idlingText, duration),
+      this.output().fontSize(this.outputFontSize, duration),
       this.outputSegment().points(
         [
           { x: 0, y: 0 },

src/scenes/me.tsx

@@ -20,6 +20,7 @@ export default makeScene2D(function* (view) {
         gap={12}
         alignItems="start"
         y={-10}
+        fontSize={40}
       >
         <Node ref={node} opacity={0}>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
@@ -32,10 +33,10 @@ export default makeScene2D(function* (view) {
             {"=>"} I {"<3"} Functional Programming λ
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} I'm a soon to be SDE at {"\n"} AWS in Seattle.
+            {"=>"} I'm a soon to be SDE at AWS in {"\n"}Seattle.
           </Txt>
           <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {"=>"} 20, president of FSLC from {"\n  "} 2021 - 2024, grad this
+            {"=>"} 20, president of FSLC from 2021{"\n  "} - 2024, grad this
             semester
           </Txt>
         </Node>
@@ -49,12 +50,12 @@ export default makeScene2D(function* (view) {
 
   yield img().fill(img().getColorAtPoint(0));
 
-  const diff = 380;
+  const diff = 320;
   yield* all(
     img().size([450, 450], 1),
     img().radius(50, 1),
     img().alpha(1, 1),
-    img().position.x(-diff, 1),
+    img().position.x(-1.3 * diff, 1),
     node().opacity(1, 1),
     layout().position.x(diff, 1),
     src().opacity(1, 1),