wpmx 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wpmx",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A minimal, fast typing test for the terminal",
   "type": "module",
   "bin": {

package/src/components/Game.tsx

@@ -1,6 +1,33 @@
 import { Box, Text, useInput } from "ink";
 import { useGame, type GameResults } from "../hooks/useGame.ts";
-import { useEffect } from "react";
+import { memo, useEffect, useMemo } from "react";
+
+const PastWord = memo(({ word, inputChars }: { word: string; inputChars: string[] }) => (
+  <Box marginRight={1}>
+    {word.split("").map((char, charIndex) => {
+      const inputChar = inputChars[charIndex];
+      return (
+        <Text key={charIndex} color={inputChar === char ? "green" : "red"}>
+          {char}
+        </Text>
+      );
+    })}
+    {inputChars.length > word.length &&
+      inputChars
+        .slice(word.length)
+        .map((char, i) => (
+          <Text key={`extra-${i}`} color="red" strikethrough>
+            {char}
+          </Text>
+        ))}
+  </Box>
+));
+
+const FutureWord = memo(({ word }: { word: string }) => (
+  <Box marginRight={1}>
+    <Text dimColor>{word}</Text>
+  </Box>
+));
 
 type GameProps = {
   duration: number;
@@ -31,32 +58,33 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
 
     if (key.backspace || key.delete) {
       game.handleBackspace();
-    } else if (input === " ") {
-      game.handleSpace();
-    } else if (input && !key.ctrl && !key.meta && input.length === 1) {
-      game.handleChar(input);
+    } else if (input && !key.ctrl && !key.meta) {
+      for (const char of input) {
+        if (char === " ") {
+          game.handleSpace();
+        } else if (char >= "!" && char <= "~") {
+          game.handleChar(char);
+        }
+      }
     }
   });
 
-  const liveWpm = game.isRunning && !game.isFinished
-    ? Math.round(
-        (() => {
-          let correct = 0;
-          for (let i = 0; i < game.currentWordIndex; i++) {
-            const word = game.words[i];
-            const input = game.charInputs[i].join("");
-            if (input === word) correct += word.length + 1;
-            else {
-              for (let j = 0; j < word.length; j++) {
-                if (input[j] === word[j]) correct++;
-              }
-            }
-          }
-          const elapsed = (duration - game.timeLeft) || 1;
-          return (correct / 5) / (elapsed / 60);
-        })()
-      )
-    : 0;
+  const liveWpm = useMemo(() => {
+    if (!game.isRunning || game.isFinished) return 0;
+    let correct = 0;
+    for (let i = 0; i < game.currentWordIndex; i++) {
+      const word = game.words[i];
+      const input = game.charInputs[i].join("");
+      if (input === word) correct += word.length + 1;
+      else {
+        for (let j = 0; j < word.length; j++) {
+          if (input[j] === word[j]) correct++;
+        }
+      }
+    }
+    const elapsed = (duration - game.timeLeft) || 1;
+    return Math.round((correct / 5) / (elapsed / 60));
+  }, [game.currentWordIndex, game.timeLeft, game.isRunning, game.isFinished]);
 
   return (
     <Box flexDirection="column" paddingX={2} paddingY={1}>
@@ -70,36 +98,11 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
       </Box>
       <Box marginTop={1} flexWrap="wrap">
         {game.words.slice(0, Math.min(game.words.length, game.currentWordIndex + 30)).map((word, wordIndex) => {
-          const isCurrentWord = wordIndex === game.currentWordIndex;
-          const isPast = wordIndex < game.currentWordIndex;
-          const wordResult = game.wordResults[wordIndex];
-
-          if (isPast) {
-            const inputChars = game.charInputs[wordIndex];
-            return (
-              <Box key={wordIndex} marginRight={1}>
-                {word.split("").map((char, charIndex) => {
-                  const inputChar = inputChars[charIndex];
-                  const isCorrect = inputChar === char;
-                  return (
-                    <Text key={charIndex} color={isCorrect ? "green" : "red"}>
-                      {char}
-                    </Text>
-                  );
-                })}
-                {inputChars.length > word.length &&
-                  inputChars
-                    .slice(word.length)
-                    .map((char, i) => (
-                      <Text key={`extra-${i}`} color="red" strikethrough>
-                        {char}
-                      </Text>
-                    ))}
-              </Box>
-            );
+          if (wordIndex < game.currentWordIndex) {
+            return <PastWord key={wordIndex} word={word} inputChars={game.charInputs[wordIndex]} />;
           }
 
-          if (isCurrentWord) {
+          if (wordIndex === game.currentWordIndex) {
             return (
               <Box key={wordIndex} marginRight={1}>
                 {word.split("").map((char, charIndex) => {
@@ -118,15 +121,8 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
                       </Text>
                     );
                   }
-                  if (inputChar === char) {
-                    return (
-                      <Text key={charIndex} color="green">
-                        {char}
-                      </Text>
-                    );
-                  }
                   return (
-                    <Text key={charIndex} color="red">
+                    <Text key={charIndex} color={inputChar === char ? "green" : "red"}>
                       {char}
                     </Text>
                   );
@@ -144,11 +140,7 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
             );
           }
 
-          return (
-            <Box key={wordIndex} marginRight={1}>
-              <Text dimColor>{word}</Text>
-            </Box>
-          );
+          return <FutureWord key={wordIndex} word={word} />;
         })}
       </Box>
     </Box>

package/src/hooks/useGame.ts

@@ -9,7 +9,15 @@ export type GameState = {
   isRunning: boolean;
   isFinished: boolean;
   wordResults: Array<"correct" | "incorrect" | "pending">;
+};
+
+export type GameHook = GameState & {
   charInputs: string[][];
+  startGame: () => void;
+  handleChar: (char: string) => void;
+  handleBackspace: () => void;
+  handleSpace: () => void;
+  getResults: () => GameResults;
 };
 
 export type GameResults = {
@@ -28,7 +36,10 @@ function generateWords(count: number): string[] {
 
 export function useGame(duration: number) {
   const wordCount = Math.max(duration * 3, 50);
-  const [state, setState] = useState<GameState>({
+  const charInputsRef = useRef<string[][]>(
+    Array.from({ length: wordCount }, () => [])
+  );
+  const [state, setState] = useState<GameState>(() => ({
     words: generateWords(wordCount),
     currentWordIndex: 0,
     currentInput: "",
@@ -36,8 +47,7 @@ export function useGame(duration: number) {
     isRunning: false,
     isFinished: false,
     wordResults: Array(wordCount).fill("pending"),
-    charInputs: Array(wordCount).fill(null).map(() => []),
-  });
+  }));
 
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const startTimeRef = useRef<number>(0);
@@ -68,29 +78,18 @@ export function useGame(duration: number) {
   const handleChar = useCallback((char: string) => {
     setState((prev) => {
       if (prev.isFinished) return prev;
+      charInputsRef.current[prev.currentWordIndex].push(char);
       if (!prev.isRunning) {
         startTimeRef.current = Date.now();
-        const newCharInputs = [...prev.charInputs];
-        newCharInputs[prev.currentWordIndex] = [
-          ...newCharInputs[prev.currentWordIndex],
-          char,
-        ];
         return {
           ...prev,
           isRunning: true,
           currentInput: prev.currentInput + char,
-          charInputs: newCharInputs,
         };
       }
-      const newCharInputs = [...prev.charInputs];
-      newCharInputs[prev.currentWordIndex] = [
-        ...newCharInputs[prev.currentWordIndex],
-        char,
-      ];
       return {
         ...prev,
         currentInput: prev.currentInput + char,
-        charInputs: newCharInputs,
       };
     });
   }, []);
@@ -99,11 +98,10 @@ export function useGame(duration: number) {
     setState((prev) => {
       if (prev.isFinished) return prev;
 
-      // If current input is empty, go back to previous word
       if (prev.currentInput.length === 0) {
         if (prev.currentWordIndex === 0) return prev;
         const prevIndex = prev.currentWordIndex - 1;
-        const prevInput = prev.charInputs[prevIndex].join("");
+        const prevInput = charInputsRef.current[prevIndex].join("");
         const newWordResults = [...prev.wordResults];
         newWordResults[prevIndex] = "pending";
         return {
@@ -114,15 +112,10 @@ export function useGame(duration: number) {
         };
       }
 
-      // Otherwise delete last char of current word
-      const newCharInputs = [...prev.charInputs];
-      newCharInputs[prev.currentWordIndex] = newCharInputs[
-        prev.currentWordIndex
-      ].slice(0, -1);
+      charInputsRef.current[prev.currentWordIndex].pop();
       return {
         ...prev,
         currentInput: prev.currentInput.slice(0, -1),
-        charInputs: newCharInputs,
       };
     });
   }, []);
@@ -151,7 +144,7 @@ export function useGame(duration: number) {
 
     for (let i = 0; i < state.currentWordIndex; i++) {
       const word = state.words[i];
-      const input = state.charInputs[i].join("");
+      const input = charInputsRef.current[i].join("");
       totalChars += Math.max(word.length, input.length) + 1;
       if (input === word) {
         correctChars += word.length + 1;
@@ -167,10 +160,11 @@ export function useGame(duration: number) {
     const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 1000) / 10 : 0;
 
     return { wpm, accuracy, time: duration };
-  }, [state.currentWordIndex, state.charInputs, state.words, duration]);
+  }, [state.currentWordIndex, state.words, duration]);
 
   return {
     ...state,
+    charInputs: charInputsRef.current,
     startGame,
     handleChar,
     handleBackspace,

package/video/src/CLAUDE.md

@@ -0,0 +1,7 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+*No recent activity*
+</claude-mem-context>

package/video/src/WpmxDemo.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { TransitionSeries, linearTiming } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+import { InstallScene } from "./scenes/InstallScene";
+import { MenuScene } from "./scenes/MenuScene";
+import { GameScene } from "./scenes/GameScene";
+import { ResultsScene } from "./scenes/ResultsScene";
+
+const FADE_DURATION = 10;
+
+export const WpmxDemo: React.FC = () => {
+  return (
+    <TransitionSeries>
+      <TransitionSeries.Sequence durationInFrames={90}>
+        <InstallScene />
+      </TransitionSeries.Sequence>
+
+      <TransitionSeries.Transition
+        presentation={fade()}
+        timing={linearTiming({ durationInFrames: FADE_DURATION })}
+      />
+
+      <TransitionSeries.Sequence durationInFrames={60}>
+        <MenuScene />
+      </TransitionSeries.Sequence>
+
+      <TransitionSeries.Transition
+        presentation={fade()}
+        timing={linearTiming({ durationInFrames: FADE_DURATION })}
+      />
+
+      <TransitionSeries.Sequence durationInFrames={300}>
+        <GameScene />
+      </TransitionSeries.Sequence>
+
+      <TransitionSeries.Transition
+        presentation={fade()}
+        timing={linearTiming({ durationInFrames: FADE_DURATION })}
+      />
+
+      <TransitionSeries.Sequence durationInFrames={90}>
+        <ResultsScene />
+      </TransitionSeries.Sequence>
+    </TransitionSeries>
+  );
+};

package/video/src/components/CLAUDE.md

@@ -0,0 +1,7 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+*No recent activity*
+</claude-mem-context>

package/video/src/scenes/CLAUDE.md

@@ -0,0 +1,22 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #1722 | 6:31 PM | 🟣 | MenuScene created with frame-driven duration selector animation | ~423 |
+| #1723 | " | 🟣 | ResultsScene created with spring-animated WPM counter and cascading fade-in effects | ~496 |
+| #1724 | " | 🟣 | GameScene created with character-level color feedback and live WPM calculation | ~569 |
+| #1720 | 6:30 PM | 🟣 | MenuScene created with frame-driven duration selection animation | ~440 |
+| #1721 | " | 🟣 | ResultsScene created with spring-animated WPM counter and staggered fade-ins | ~508 |
+| #1719 | " | 🟣 | MenuScene created with frame-driven duration selector animation | ~525 |
+| #1718 | 6:29 PM | 🟣 | GameScene implements sophisticated typing simulation with real-time feedback | ~580 |
+| #1717 | " | 🟣 | Results scene implemented with animated score and staggered fade-ins | ~476 |
+| #1716 | " | 🟣 | Install scene implements typewriter command entry animation | ~455 |
+| #1715 | " | 🟣 | InstallScene created with typewriter effect for terminal command entry | ~446 |
+| #1714 | 6:28 PM | 🟣 | MenuScene component displays duration selector with animated selection change | ~497 |
+| #1713 | " | 🟣 | InstallScene component implements typewriter command prompt animation | ~494 |
+</claude-mem-context>

package/video/src/scenes/GameScene.tsx

@@ -0,0 +1,193 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { Terminal } from "../components/Terminal";
+import { monoFont } from "../Root";
+import { GAME_WORDS, TYPING_EVENTS } from "../data/typing-script";
+
+interface WordState {
+  typed: string[];
+  submitted: boolean;
+}
+
+interface FrameState {
+  words: WordState[];
+  currentWordIndex: number;
+}
+
+function computeStateAtFrame(frame: number): FrameState {
+  const words: WordState[] = GAME_WORDS.map(() => ({
+    typed: [],
+    submitted: false,
+  }));
+
+  let currentWordIndex = 0;
+
+  for (const event of TYPING_EVENTS) {
+    if (event.frame > frame) break;
+
+    if (event.type === "char" && event.char !== undefined) {
+      words[currentWordIndex].typed.push(event.char);
+    } else if (event.type === "space") {
+      words[currentWordIndex].submitted = true;
+      currentWordIndex = Math.min(currentWordIndex + 1, GAME_WORDS.length - 1);
+    } else if (event.type === "backspace") {
+      if (words[currentWordIndex].typed.length > 0) {
+        words[currentWordIndex].typed.pop();
+      }
+    }
+  }
+
+  return { words, currentWordIndex };
+}
+
+export const GameScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const timeLeft = Math.max(0, Math.ceil(15 - frame / fps));
+
+  const { words, currentWordIndex } = computeStateAtFrame(frame);
+
+  // Live WPM calculation
+  const elapsed = frame / fps;
+  let correctChars = 0;
+  for (let wi = 0; wi < currentWordIndex; wi++) {
+    const target = GAME_WORDS[wi];
+    const typedStr = words[wi].typed.join("");
+    if (typedStr === target) {
+      correctChars += target.length + 1; // +1 for space
+    } else {
+      for (let ci = 0; ci < target.length; ci++) {
+        if (ci < words[wi].typed.length && words[wi].typed[ci] === target[ci]) {
+          correctChars++;
+        }
+      }
+    }
+  }
+  const wpm = elapsed > 0 ? Math.round((correctChars / 5) / (elapsed / 60)) : 0;
+
+  return (
+    <Terminal title="wpmx">
+      <div
+        style={{
+          fontFamily: monoFont,
+          color: "#cdd6f4",
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+        }}
+      >
+        {/* Top bar */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginBottom: 24,
+            fontSize: 20,
+            fontWeight: 700,
+            color: "#f9e2af",
+          }}
+        >
+          <span>{timeLeft}s</span>
+          <span>{wpm} wpm</span>
+        </div>
+
+        {/* Word display */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            gap: 8,
+            fontSize: 22,
+            lineHeight: 1.8,
+          }}
+        >
+          {GAME_WORDS.map((word, wi) => {
+            const wordState = words[wi];
+            const typed = wordState.typed;
+
+            const isFuture = wi > currentWordIndex;
+            const isCurrent = wi === currentWordIndex;
+            const isPast = wi < currentWordIndex;
+
+            const chars: React.ReactNode[] = [];
+
+            // Render each target character
+            for (let ci = 0; ci < word.length; ci++) {
+              let color: string;
+              let fontWeight: number | undefined;
+              let textDecoration: string | undefined;
+
+              if (isFuture) {
+                color = "#6c7086";
+              } else if (isCurrent) {
+                if (ci < typed.length) {
+                  if (typed[ci] === word[ci]) {
+                    color = "#a6e3a1";
+                  } else {
+                    color = "#f38ba8";
+                  }
+                } else if (ci === typed.length) {
+                  color = "#cdd6f4";
+                  fontWeight = 700;
+                  textDecoration = "underline";
+                } else {
+                  color = "#6c7086";
+                }
+              } else {
+                // isPast
+                if (ci < typed.length) {
+                  if (typed[ci] === word[ci]) {
+                    color = "#a6e3a1";
+                  } else {
+                    color = "#f38ba8";
+                  }
+                } else {
+                  color = "#6c7086";
+                }
+              }
+
+              chars.push(
+                <span
+                  key={`${wi}-${ci}`}
+                  style={{
+                    color,
+                    fontWeight,
+                    textDecoration,
+                  }}
+                >
+                  {word[ci]}
+                </span>
+              );
+            }
+
+            // Render extra characters beyond word length
+            if ((isCurrent || isPast) && typed.length > word.length) {
+              for (let ei = word.length; ei < typed.length; ei++) {
+                chars.push(
+                  <span
+                    key={`${wi}-extra-${ei}`}
+                    style={{
+                      color: "#f38ba8",
+                      textDecoration: isPast ? "line-through" : undefined,
+                    }}
+                  >
+                    {typed[ei]}
+                  </span>
+                );
+              }
+            }
+
+            return (
+              <span key={wi}>
+                {chars}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+    </Terminal>
+  );
+};

package/video/src/scenes/InstallScene.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { Terminal } from "../components/Terminal";
+import { Cursor } from "../components/Cursor";
+import { monoFont } from "../Root";
+
+const COMMAND = "npx wpmx";
+const TYPING_START_FRAME = 10;
+const FRAMES_PER_CHAR = 4;
+
+export const InstallScene: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const charsTyped = Math.min(
+    Math.max(0, Math.floor((frame - TYPING_START_FRAME) / FRAMES_PER_CHAR)),
+    COMMAND.length
+  );
+
+  const typingComplete = charsTyped >= COMMAND.length;
+  const typedText = COMMAND.slice(0, charsTyped);
+
+  return (
+    <Terminal title="Terminal">
+      <div
+        style={{
+          fontFamily: monoFont,
+          fontSize: 22,
+          color: "#cdd6f4",
+          lineHeight: 1.6,
+        }}
+      >
+        <span style={{ color: "#a6e3a1" }}>$ </span>
+        <span>{typedText}</span>
+        {!typingComplete && <Cursor />}
+        {typingComplete && (
+          <div
+            style={{
+              color: "#6c7086",
+              marginTop: 8,
+            }}
+          >
+            Loading wpmx...
+          </div>
+        )}
+      </div>
+    </Terminal>
+  );
+};

package/video/src/scenes/MenuScene.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { Terminal } from "../components/Terminal";
+import { monoFont } from "../Root";
+
+const DURATIONS = ["15s", "30s", "60s"];
+
+export const MenuScene: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // Before frame 25: index 1 ("30s") is selected; at/after frame 25: index 0 ("15s")
+  const selectedIndex = frame < 25 ? 1 : 0;
+
+  return (
+    <Terminal title="wpmx">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1,
+          gap: 24,
+        }}
+      >
+        {/* Title */}
+        <div
+          style={{
+            fontFamily: monoFont,
+            fontWeight: 700,
+            fontSize: 36,
+            color: "#f9e2af",
+          }}
+        >
+          wpmx
+        </div>
+
+        {/* Duration selector */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: 24,
+            fontSize: 20,
+            fontFamily: monoFont,
+          }}
+        >
+          {DURATIONS.map((label, i) => {
+            const isSelected = i === selectedIndex;
+            return (
+              <span
+                key={label}
+                style={{
+                  color: isSelected ? "#cdd6f4" : "#6c7086",
+                  fontWeight: isSelected ? 700 : 400,
+                  textDecoration: isSelected ? "underline" : "none",
+                }}
+              >
+                {label}
+              </span>
+            );
+          })}
+        </div>
+
+        {/* Hint text */}
+        <div
+          style={{
+            fontFamily: monoFont,
+            fontSize: 14,
+            color: "#6c7086",
+          }}
+        >
+          h / l or ← / → to choose, Enter to start
+        </div>
+      </div>
+    </Terminal>
+  );
+};

package/video/src/scenes/ResultsScene.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  spring,
+  interpolate,
+} from "remotion";
+import { Terminal } from "../components/Terminal";
+import { monoFont } from "../Root";
+
+export const ResultsScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const springValue = spring({ frame, fps, config: { damping: 200 } });
+  const wpm = Math.round(interpolate(springValue, [0, 1], [0, 87]));
+
+  const personalBestOpacity = interpolate(frame, [15, 30], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const statsOpacity = interpolate(frame, [25, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <Terminal title="wpmx">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1,
+          gap: 12,
+          fontFamily: monoFont,
+        }}
+      >
+        {/* Title */}
+        <div
+          style={{
+            fontSize: 28,
+            fontWeight: 700,
+            color: "#f9e2af",
+            marginBottom: 16,
+          }}
+        >
+          wpmx
+        </div>
+
+        {/* WPM number */}
+        <div
+          style={{
+            fontSize: 48,
+            fontWeight: 700,
+            color: "#cdd6f4",
+          }}
+        >
+          {wpm}
+        </div>
+
+        {/* New personal best */}
+        <div
+          style={{
+            fontSize: 18,
+            fontWeight: 700,
+            color: "#a6e3a1",
+            opacity: personalBestOpacity,
+          }}
+        >
+          new personal best!
+        </div>
+
+        {/* Accuracy */}
+        <div
+          style={{
+            fontSize: 20,
+            color: "#cdd6f4",
+            opacity: statsOpacity,
+          }}
+        >
+          96.2% accuracy
+        </div>
+
+        {/* Duration */}
+        <div
+          style={{
+            fontSize: 16,
+            color: "#6c7086",
+            opacity: statsOpacity,
+          }}
+        >
+          15s
+        </div>
+
+        {/* Hints */}
+        <div
+          style={{
+            fontSize: 14,
+            color: "#6c7086",
+            marginTop: 24,
+            opacity: statsOpacity,
+          }}
+        >
+          {`Tab → restart   Esc → menu   q → quit`}
+        </div>
+      </div>
+    </Terminal>
+  );
+};