feat(docs/components): Implement AnimationPlayer

docs/docs/behaviors/hold-tap.md

@@ -5,7 +5,7 @@ sidebar_label: Hold-Tap
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import '@motion-canvas/player'
+import AnimationPlayer from '@site/src/components/AnimationPlayer';
 
 ## Summary
 
@@ -17,21 +17,11 @@ Simply put, the hold-tap key will output the 'hold' behavior if it's held for a
 
 The graph below shows how the hold-tap decides between a 'tap' and a 'hold'.
 
-![Simple behavior](../assets/hold-tap/case1_2.svg)
+<AnimationPlayer auto small name="hold_tap_comparison" />
-
-<motion-canvas-player
-src={"/animations/hold_tap_comparison.js"}
-auto={true}
-/>
 
 By default, the hold-tap is configured to also select the 'hold' functionality if another key is tapped while it's active:
 
-![Hold preferred behavior](../assets/hold-tap/case_hold_preferred.svg)
+<AnimationPlayer auto small name="hold_tap_interrupted" />
-
-<motion-canvas-player
-src={"/animations/hold_tap_interrupted.js"}
-auto={true}
-/>
 
 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'.
 

docs/src/components/AnimationPlayer/index.tsx

@@ -0,0 +1,39 @@
+import type { MotionCanvasPlayerProps } from "@motion-canvas/player";
+import React, { ComponentProps } from "react";
+import styles from "./styles.module.css";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import clsx from "clsx";
+
+if (ExecutionEnvironment.canUseDOM) {
+  import("@motion-canvas/player");
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "motion-canvas-player": MotionCanvasPlayerProps & ComponentProps<"div">;
+    }
+  }
+}
+
+export interface AnimationPlayerProps {
+  small?: boolean;
+  auto?: boolean;
+  name: string;
+}
+
+export default function AnimationPlayer({
+  name,
+  auto,
+  small,
+}: AnimationPlayerProps) {
+  return (
+    <div className={clsx(styles.container, small && styles.small)}>
+      <motion-canvas-player
+        class={styles.player}
+        src={`/animations/${name}.js`}
+        auto={auto}
+      />
+    </div>
+  );
+}

docs/src/components/AnimationPlayer/styles.module.css

@@ -0,0 +1,21 @@
+.container {
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-background-surface-color);
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.container.small {
+  max-width: 720px;
+  aspect-ratio: 16/9;
+  margin: 0 auto var(--ifm-leading);
+}
+
+.player {
+  aspect-ratio: 16 / 9;
+}