feat(story): build procedural notebook animation

app/components/story/notebookTimeline.test.ts

@@ -42,6 +42,20 @@ describe("getNotebookFrame", () => {
     expect(getNotebookFrame(0.4, 4).cursorVisible).toBe(true);
   });
 
+  it("turns the screen off before the lid closes", () => {
+    const screenOff = getNotebookFrame(0.9, 4);
+    const closing = getNotebookFrame(0.95, 4);
+
+    expect(screenOff).toMatchObject({
+      phase: "close",
+      lidAngle: 112,
+      screenOpacity: 0,
+    });
+    expect(closing.screenOpacity).toBe(0);
+    expect(closing.lidAngle).toBeGreaterThan(0);
+    expect(closing.lidAngle).toBeLessThan(112);
+  });
+
   it("selects each tab only inside the browse window", () => {
     expect(getNotebookFrame(0.43, 4).activeTabIndex).toBe(-1);
     expect(getNotebookFrame(0.48, 4).activeTabIndex).toBe(0);
@@ -82,8 +96,20 @@ describe("getNotebookFrame", () => {
 
     expect(moving.cursorX).toBeGreaterThan(previous.cursorX);
     expect(moving.cursorX).toBeLessThan(target.cursorX);
-    expect(moving.cursorY).toBeLessThan(previous.cursorY);
-    expect(moving.cursorY).toBeGreaterThan(target.cursorY);
+    expect(moving.cursorY).toBe(target.cursorY);
+  });
+
+  it("lands the click pulse on the center of the selected tab", () => {
+    for (const progress of [0.475, 0.56, 0.65, 0.735]) {
+      const frame = getNotebookFrame(progress, 4);
+      expect(frame.cursorClicking).toBe(true);
+      expect(frame.cursorX).toBeCloseTo((frame.activeTabIndex + 0.5) / 4, 6);
+    }
+  });
+
+  it("tracks the real number of tabs", () => {
+    expect(getNotebookFrame(0.68, 2).cursorX).toBeCloseTo(0.75, 6);
+    expect(getNotebookFrame(0.6, 3).cursorX).toBeCloseTo(0.5, 6);
   });
 
   it("is deterministic when rewound to the same progress", () => {