diff --git a/docs/docs/behaviors/hold-tap.md b/docs/docs/behaviors/hold-tap.md
index acf2a8a6..50f04258 100644
--- a/docs/docs/behaviors/hold-tap.md
+++ b/docs/docs/behaviors/hold-tap.md
@@ -28,6 +28,11 @@ By default, the hold-tap is configured to also select the 'hold' functionality i

+
+
We call this the 'hold-preferred' flavor of hold-taps. While this flavor may work very well for a ctrl/escape key, it's not very well suited for home-row mods or layer-taps. That's why there are two more flavors to choose from: 'tap-preferred' and 'balanced'.
#### Flavors
diff --git a/docs/src/animationhelpers/src/components/Output.tsx b/docs/src/animationhelpers/src/components/Output.tsx
index a0203af5..46a42f51 100644
--- a/docs/src/animationhelpers/src/components/Output.tsx
+++ b/docs/src/animationhelpers/src/components/Output.tsx
@@ -1,4 +1,4 @@
-import { Rect, Text, Node } from "@motion-canvas/2d/lib/components";
+import { Rect, Text } from "@motion-canvas/2d/lib/components";
import { makeRef } from "@motion-canvas/core/lib/utils";
import { KeyBorderThickness } from "./Key";
diff --git a/docs/src/animationhelpers/src/hold_tap/hold_tap_interrupted.meta b/docs/src/animationhelpers/src/hold_tap/hold_tap_interrupted.meta
new file mode 100644
index 00000000..0e33e3fe
--- /dev/null
+++ b/docs/src/animationhelpers/src/hold_tap/hold_tap_interrupted.meta
@@ -0,0 +1,3 @@
+{
+ "version": 0
+}
\ No newline at end of file
diff --git a/docs/src/animationhelpers/src/hold_tap/hold_tap_interrupted.ts b/docs/src/animationhelpers/src/hold_tap/hold_tap_interrupted.ts
new file mode 100644
index 00000000..cef3ed6a
--- /dev/null
+++ b/docs/src/animationhelpers/src/hold_tap/hold_tap_interrupted.ts
@@ -0,0 +1,8 @@
+import {makeProject} from '@motion-canvas/core/lib';
+
+import hold_tap_interrupted from '../scenes/hold_tap/hold_tap_interrupted?scene';
+
+export default makeProject({
+ scenes: [hold_tap_interrupted],
+ background: '#FFFFFF',
+});
diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.meta b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.meta
new file mode 100644
index 00000000..0e33e3fe
--- /dev/null
+++ b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_comparison.meta
@@ -0,0 +1,3 @@
+{
+ "version": 0
+}
\ No newline at end of file
diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_interrupted.meta b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_interrupted.meta
new file mode 100644
index 00000000..0e33e3fe
--- /dev/null
+++ b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_interrupted.meta
@@ -0,0 +1,3 @@
+{
+ "version": 0
+}
\ No newline at end of file
diff --git a/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_interrupted.tsx b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_interrupted.tsx
new file mode 100644
index 00000000..134e312f
--- /dev/null
+++ b/docs/src/animationhelpers/src/scenes/hold_tap/hold_tap_interrupted.tsx
@@ -0,0 +1,50 @@
+import { makeScene2D } from "@motion-canvas/2d/lib/scenes";
+import { makeRefs } from "@motion-canvas/core/lib/utils";
+import { any, 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 interrupt = makeRefs();
+ view.add();
+ interrupt.group.position.x(125);
+ interrupt.group.position.y(-150);
+ interrupt.duration.fill("#D9D9D9");
+
+ const hold = makeRefs();
+ view.add();
+ hold.group.position.x(-125);
+ hold.group.position.y(-150);
+ hold.duration.fill("#D9D9D9");
+
+ const hold_output = makeRefs();
+ view.add();
+ hold_output.group.position(hold.group.position().addX(125));
+ hold_output.group.position.y(hold_output.group.position.y() + 300);
+
+ yield* waitFor(0.5);
+ yield* any(
+ hold.body.position.y(KeyTravel, 0.15),
+ hold.duration.grow(0.75, 1.5, linear)
+ );
+ yield* delay(
+ 1.2,
+ all(
+ interrupt.body.position.y(KeyTravel, 0.15),
+ hold.duration.fill("F21D00", 0.15)
+ )
+ );
+ yield* chain(
+ hold.group.rotation(3, 0.03),
+ hold.group.rotation(-3, 0.06),
+ hold.group.rotation(0, 0.03),
+ all(
+ delay(0.15, hold_output.output.text("J", 0)),
+ hold_output.shift.fill("#969696", 0.15)
+ )
+ );
+ yield* waitFor(0.25);
+ yield* hold.body.position.y(0, 0.15);
+ yield* delay(0.5, hold.duration.grow(0, 0.15));
+});
diff --git a/docs/src/animationhelpers/vite.config.ts b/docs/src/animationhelpers/vite.config.ts
index 617839f3..1492f79c 100644
--- a/docs/src/animationhelpers/vite.config.ts
+++ b/docs/src/animationhelpers/vite.config.ts
@@ -4,7 +4,10 @@ import motionCanvas from "@motion-canvas/vite-plugin";
export default defineConfig({
plugins: [
motionCanvas({
- project: ["./src/hold_tap/hold_tap_comparison.ts"],
+ project: [
+ "./src/hold_tap/hold_tap_comparison.ts",
+ "./src/hold_tap/hold_tap_interrupted.ts",
+ ],
}),
],
build: {