feat(docs/hold-tap): Implement balanced and tap-preferred default animations

docs/docs/behaviors/hold-tap.md

@@ -41,7 +41,6 @@ values={[
 > The 'hold-preferred' flavor triggers the hold behavior when the `tapping-term-ms` has expired or another key is pressed.
 > When the hold-tap key is released and the hold behavior has not been triggered, the tap behavior will trigger.
 
-
 As shown previously, the hold-tap decision is generally made after the [`tapping-term-ms`](#tapping-term-ms) has expired.
 
 <AnimationPlayer auto small name="hold_tap_comparison" />
@@ -57,8 +56,7 @@ Alternatively, the 'hold-preferred' flavor triggers the hold behavior when anoth
 > The 'balanced' flavor will trigger the hold behavior when the `tapping-term-ms` has expired or another key is pressed and released.
 > When the hold-tap key is released and the hold behavior has not been triggered, the tap behavior will trigger.
 
-
-The following section describes the behavior of the 'balanced' hold-tap when another key is pressed while the hold-tap is held.
+<AnimationPlayer auto small name="balanced_comparison" />
 
 If another key is pressed while the 'balanced' hold-tap pressed, releasing the hold-tap before the interrupting keypress will invoke the tap behavior.
 
@@ -75,6 +73,12 @@ On the other hand, if the interrupting key is released before the hold-tap, the
 > The 'tap-preferred' flavor triggers the hold behavior when the `tapping-term-ms` has expired. Pressing another key within `tapping-term-ms` does not affect the decision.
 > When the hold-tap key is released and the hold behavior has not been triggered, the tap behavior will trigger.
 
+Like other flavors of hold-tap, releasing the 'tap-preferred' hold-tap before [`tapping-term-ms`](#tapping-term-ms) has expired will invoke the 'tap'. Holding it for past the tapping-term will invoke the 'hold'.
+
+<AnimationPlayer auto small name="tap_preferred_comparison" />
+
+As shown below, pressing other keys while the 'tap-preferred' hold-tap is pressed does not interrupt its activity.
+
 <AnimationPlayer auto small name="tap_preferred_hold_tap_up" />
 
 </TabItem>

docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.meta

@@ -0,0 +1,3 @@
+{
+  "version": 0
+}

docs/src/animationhelpers/src/hold_tap/balanced/balanced_comparison.ts

@@ -0,0 +1,8 @@
+import { makeProject } from "@motion-canvas/core/lib";
+
+import balanced_comparison from "../../scenes/hold_tap/balanced/balanced_comparison?scene";
+
+export default makeProject({
+  scenes: [balanced_comparison],
+  background: "#FFFFFF",
+});

docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.meta

@@ -0,0 +1,3 @@
+{
+  "version": 0
+}

docs/src/animationhelpers/src/hold_tap/tap_preferred/tap_preferred_comparison.ts

@@ -0,0 +1,8 @@
+import { makeProject } from "@motion-canvas/core/lib";
+
+import tap_preferred_comparison from "../../scenes/hold_tap/tap_preferred/tap_preferred_comparison?scene";
+
+export default makeProject({
+  scenes: [tap_preferred_comparison],
+  background: "#FFFFFF",
+});

docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.meta

@@ -0,0 +1,3 @@
+{
+  "version": 0
+}

docs/src/animationhelpers/src/scenes/hold_tap/balanced/balanced_comparison.tsx

@@ -0,0 +1,53 @@
+import { makeScene2D } from "@motion-canvas/2d/lib/scenes";
+import { makeRefs } from "@motion-canvas/core/lib/utils";
+import { all, chain, delay, waitFor } from "@motion-canvas/core/lib/flow";
+import Key, { KeyTravel } from "../../../components/Key";
+import Output from "../../../components/Output";
+import { linear } from "@motion-canvas/core/lib/tweening";
+
+export default makeScene2D(function* (view) {
+  const tap = makeRefs<typeof Key>();
+  view.add(<Key refs={tap} binding={"&ht_bl"} params={"\u21e7 F"} />);
+  tap.group.position.x(-400);
+  tap.group.position.y(-150);
+  tap.duration.fill("#D9D9D9");
+
+  const tap_output = makeRefs<typeof Output>();
+  view.add(<Output refs={tap_output} />);
+  tap_output.group.position(tap.group.position());
+  tap_output.group.position.y(tap_output.group.position.y() + 300);
+
+  const hold = makeRefs<typeof Key>();
+  view.add(<Key refs={hold} binding={"&ht_bl"} params={"\u21e7 F"} />);
+  hold.group.position.x(400);
+  hold.group.position.y(-150);
+  hold.duration.fill("#D9D9D9");
+
+  const hold_output = makeRefs<typeof Output>();
+  view.add(<Output refs={hold_output} />);
+  hold_output.group.position(hold.group.position());
+  hold_output.group.position.y(hold_output.group.position.y() + 300);
+
+  yield* waitFor(0.5);
+  yield* all(
+    tap.body.position.y(KeyTravel, 0.15),
+    hold.body.position.y(KeyTravel, 0.15)
+  );
+  yield* all(
+    tap.duration.grow(0.5, 1, linear),
+    delay(1, tap.body.position.y(0, 0.15)),
+    hold.duration.grow(1, 2, linear)
+  );
+  yield* chain(
+    all(tap.group.rotation(3, 0.03), hold.group.rotation(3, 0.03)),
+    all(tap.group.rotation(-3, 0.06), hold.group.rotation(-3, 0.06)),
+    all(tap.group.rotation(0, 0.03), hold.group.rotation(0, 0.03)),
+    all(tap_output.output.text("f", 0), hold_output.shift.fill("#969696", 0.15))
+  );
+  yield* waitFor(0.25);
+  yield* hold.body.position.y(0, 0.15);
+  yield* delay(
+    0.5,
+    all(tap.duration.grow(0, 0.15), hold.duration.grow(0, 0.15))
+  );
+});

docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.meta

@@ -0,0 +1,3 @@
+{
+  "version": 0
+}

docs/src/animationhelpers/src/scenes/hold_tap/tap_preferred/tap_preferred_comparison.tsx

@@ -0,0 +1,53 @@
+import { makeScene2D } from "@motion-canvas/2d/lib/scenes";
+import { makeRefs } from "@motion-canvas/core/lib/utils";
+import { all, chain, delay, waitFor } from "@motion-canvas/core/lib/flow";
+import Key, { KeyTravel } from "../../../components/Key";
+import Output from "../../../components/Output";
+import { linear } from "@motion-canvas/core/lib/tweening";
+
+export default makeScene2D(function* (view) {
+  const tap = makeRefs<typeof Key>();
+  view.add(<Key refs={tap} binding={"&ht_tp"} params={"\u21e7 F"} />);
+  tap.group.position.x(-400);
+  tap.group.position.y(-150);
+  tap.duration.fill("#D9D9D9");
+
+  const tap_output = makeRefs<typeof Output>();
+  view.add(<Output refs={tap_output} />);
+  tap_output.group.position(tap.group.position());
+  tap_output.group.position.y(tap_output.group.position.y() + 300);
+
+  const hold = makeRefs<typeof Key>();
+  view.add(<Key refs={hold} binding={"&ht_tp"} params={"\u21e7 F"} />);
+  hold.group.position.x(400);
+  hold.group.position.y(-150);
+  hold.duration.fill("#D9D9D9");
+
+  const hold_output = makeRefs<typeof Output>();
+  view.add(<Output refs={hold_output} />);
+  hold_output.group.position(hold.group.position());
+  hold_output.group.position.y(hold_output.group.position.y() + 300);
+
+  yield* waitFor(0.5);
+  yield* all(
+    tap.body.position.y(KeyTravel, 0.15),
+    hold.body.position.y(KeyTravel, 0.15)
+  );
+  yield* all(
+    tap.duration.grow(0.5, 1, linear),
+    delay(1, tap.body.position.y(0, 0.15)),
+    hold.duration.grow(1, 2, linear)
+  );
+  yield* chain(
+    all(tap.group.rotation(3, 0.03), hold.group.rotation(3, 0.03)),
+    all(tap.group.rotation(-3, 0.06), hold.group.rotation(-3, 0.06)),
+    all(tap.group.rotation(0, 0.03), hold.group.rotation(0, 0.03)),
+    all(tap_output.output.text("f", 0), hold_output.shift.fill("#969696", 0.15))
+  );
+  yield* waitFor(0.25);
+  yield* hold.body.position.y(0, 0.15);
+  yield* delay(
+    0.5,
+    all(tap.duration.grow(0, 0.15), hold.duration.grow(0, 0.15))
+  );
+});

docs/src/animationhelpers/vite.config.ts

@@ -7,8 +7,10 @@ export default defineConfig({
       project: [
         "./src/hold_tap/hold_tap_comparison.ts",
         "./src/hold_tap/hold_tap_interrupted.ts",
+        "./src/hold_tap/balanced/balanced_comparison.ts",
         "./src/hold_tap/balanced/balanced_other_key_up.ts",
         "./src/hold_tap/balanced/balanced_hold_tap_up.ts",
+        "./src/hold_tap/tap_preferred/tap_preferred_comparison.ts",
         "./src/hold_tap/tap_preferred/tap_preferred_hold_tap_up.ts",
         "./src/hold_tap/tap_unless_interrupted/tap_unless_interrupted.ts",
         "./src/hold_tap/tap_unless_interrupted/tap_unless_interrupted_invoke_hold.ts",