wpmx 1.0.2 → 1.0.4

package/.claude/settings.local.json

@@ -0,0 +1,6 @@
+{
+  "enabledMcpjsonServers": [
+    "shadcn"
+  ],
+  "enableAllProjectMcpServers": true
+}

package/package.json

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

package/src/app.tsx

@@ -21,9 +21,12 @@ export type GameResults = {
 
 export function App() {
   const { exit } = useApp();
-  const settings = loadSettings();
+  const handleQuit = useCallback(() => {
+    exit();
+    process.exit(0);
+  }, [exit]);
   const [screen, setScreen] = useState<Screen>("menu");
-  const [duration, setDuration] = useState<Duration>(settings.lastDuration);
+  const [duration, setDuration] = useState<Duration>(() => loadSettings().lastDuration);
   const [results, setResults] = useState<GameResults | null>(null);
   const [gameKey, setGameKey] = useState(0);
 
@@ -58,7 +61,7 @@ export function App() {
   }, []);
 
   if (screen === "menu") {
-    return <Menu onStart={handleStart} onQuit={exit} defaultDuration={duration} />;
+    return <Menu onStart={handleStart} onQuit={handleQuit} defaultDuration={duration} />;
   }
 
   if (screen === "game") {
@@ -81,7 +84,7 @@ export function App() {
         personalBest={pb}
         onRestart={handleRestart}
         onMenu={handleMenu}
-        onQuit={exit}
+        onQuit={handleQuit}
       />
     );
   }

package/src/components/Game.tsx

@@ -1,33 +1,15 @@
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, useStdout } from "ink";
+import type { Key } from "ink";
 import { useGame, type GameResults } from "../hooks/useGame.ts";
-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>
-));
+import { useEffect, useMemo, useCallback, useState } from "react";
+
+type StyledChar = {
+  char: string;
+  color?: string;
+  dimColor?: boolean;
+  strikethrough?: boolean;
+  isCursor?: boolean;
+};
 
 type GameProps = {
   duration: number;
@@ -38,6 +20,7 @@ type GameProps = {
 
 export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
   const game = useGame(duration);
+  const { stdout } = useStdout();
 
   useEffect(() => {
     if (game.isFinished) {
@@ -45,50 +28,119 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
     }
   }, [game.isFinished]);
 
-  useInput((input, key) => {
-    if (key.escape) {
-      onExit();
-      return;
-    }
-    if (key.tab) {
-      onRestart();
-      return;
-    }
-    if (game.isFinished) return;
-
-    if (key.backspace || key.delete) {
-      game.handleBackspace();
-    } else if (input && !key.ctrl && !key.meta) {
-      for (const char of input) {
-        if (char === " ") {
-          game.handleSpace();
-        } else if (char >= "!" && char <= "~") {
-          game.handleChar(char);
+  const handleInput = useCallback(
+    (input: string, key: Key) => {
+      if (key.escape) {
+        onExit();
+        return;
+      }
+      if (key.tab) {
+        onRestart();
+        return;
+      }
+      if (game.isFinished) return;
+
+      if (key.backspace || key.delete) {
+        game.handleBackspace();
+      } else if (input && !key.ctrl && !key.meta) {
+        for (const char of input) {
+          if (char === " ") {
+            game.handleSpace();
+          } else if (char >= "!" && char <= "~") {
+            game.handleChar(char);
+          }
         }
       }
-    }
-  });
+    },
+    [onExit, onRestart, game.isFinished, game.handleBackspace, game.handleSpace, game.handleChar],
+  );
+
+  useInput(handleInput);
+
+  const [cursorVisible, setCursorVisible] = useState(true);
+  useEffect(() => {
+    const id = setInterval(() => setCursorVisible((v) => !v), 530);
+    return () => clearInterval(id);
+  }, []);
 
   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((game.correctCharsAcc / 5) / (elapsed / 60));
+  }, [game.correctCharsAcc, game.timeLeft, game.isRunning, game.isFinished, duration]);
+
+  const termWidth = stdout.columns || 80;
+  const availableWidth = termWidth - 4;
+  const centerCol = Math.floor(availableWidth / 2);
+  const currentWordIdx = game.currentWordIndex;
+
+  // Build flat styled character array for all words (cursor style applied at render time)
+  const { chars, cursorPos } = useMemo(() => {
+    const chars: StyledChar[] = [];
+    let cursorPos = 0;
+
+    for (let wi = 0; wi < game.words.length; wi++) {
+      const word = game.words[wi];
+      const isPast = wi < currentWordIdx;
+      const isCurrent = wi === currentWordIdx;
+
+      if (isPast) {
+        const inputs = game.charInputs[wi] || [];
+        for (let ci = 0; ci < word.length; ci++) {
+          chars.push({ char: word[ci], color: inputs[ci] === word[ci] ? "green" : "red" });
+        }
+        for (let ci = word.length; ci < inputs.length; ci++) {
+          chars.push({ char: inputs[ci], color: "red", strikethrough: true });
         }
+        chars.push({ char: " " });
+      } else if (isCurrent) {
+        const typedInWord = Math.min(game.currentInput.length, word.length);
+        for (let ci = 0; ci < typedInWord; ci++) {
+          chars.push({ char: word[ci], color: game.currentInput[ci] === word[ci] ? "green" : "red" });
+        }
+        if (game.currentInput.length < word.length) {
+          // Cursor on next untyped character
+          cursorPos = chars.length;
+          chars.push({ char: word[game.currentInput.length], isCursor: true });
+          for (let ci = game.currentInput.length + 1; ci < word.length; ci++) {
+            chars.push({ char: word[ci], dimColor: true });
+          }
+          chars.push({ char: " " });
+        } else {
+          // Extra typed chars beyond word length
+          for (let ci = word.length; ci < game.currentInput.length; ci++) {
+            chars.push({ char: game.currentInput[ci], color: "red" });
+          }
+          // Cursor at space position
+          cursorPos = chars.length;
+          chars.push({ char: " ", isCursor: true });
+        }
+      } else {
+        // Future word
+        for (let ci = 0; ci < word.length; ci++) {
+          chars.push({ char: word[ci], dimColor: true });
+        }
+        chars.push({ char: " " });
       }
     }
-    const elapsed = (duration - game.timeLeft) || 1;
-    return Math.round((correct / 5) / (elapsed / 60));
-  }, [game.currentWordIndex, game.timeLeft, game.isRunning, game.isFinished]);
+
+    return { chars, cursorPos };
+  }, [game.words, game.charInputs, currentWordIdx, game.currentInput]);
+
+  // Extract visible window centered on cursor
+  const windowStart = cursorPos - centerCol;
+  const visibleChars: StyledChar[] = [];
+  for (let i = windowStart; i < windowStart + availableWidth; i++) {
+    if (i >= 0 && i < chars.length) {
+      visibleChars.push(chars[i]);
+    } else {
+      visibleChars.push({ char: " " });
+    }
+  }
 
   return (
     <Box flexDirection="column" paddingX={2} paddingY={1}>
-      <Box justifyContent="space-between">
+      <Box justifyContent="center" gap={2}>
         <Text color="yellow" bold>
           {game.timeLeft}s
         </Text>
@@ -96,52 +148,32 @@ export function Game({ duration, onFinish, onExit, onRestart }: GameProps) {
           {liveWpm} wpm
         </Text>
       </Box>
-      <Box marginTop={1} flexWrap="wrap">
-        {game.words.slice(0, Math.min(game.words.length, game.currentWordIndex + 30)).map((word, wordIndex) => {
-          if (wordIndex < game.currentWordIndex) {
-            return <PastWord key={wordIndex} word={word} inputChars={game.charInputs[wordIndex]} />;
-          }
-
-          if (wordIndex === game.currentWordIndex) {
+      <Box marginTop={1}>
+        <Text>
+          {visibleChars.map((sc, i) => {
+            if (sc.isCursor) {
+              return cursorVisible ? (
+                <Text key={i} backgroundColor="white" color="black">
+                  {sc.char}
+                </Text>
+              ) : (
+                <Text key={i} underline>
+                  {sc.char}
+                </Text>
+              );
+            }
             return (
-              <Box key={wordIndex} marginRight={1}>
-                {word.split("").map((char, charIndex) => {
-                  const inputChar = game.currentInput[charIndex];
-                  if (inputChar === undefined && charIndex === game.currentInput.length) {
-                    return (
-                      <Text key={charIndex} color="white" bold underline>
-                        {char}
-                      </Text>
-                    );
-                  }
-                  if (inputChar === undefined) {
-                    return (
-                      <Text key={charIndex} dimColor>
-                        {char}
-                      </Text>
-                    );
-                  }
-                  return (
-                    <Text key={charIndex} color={inputChar === char ? "green" : "red"}>
-                      {char}
-                    </Text>
-                  );
-                })}
-                {game.currentInput.length > word.length &&
-                  game.currentInput
-                    .slice(word.length)
-                    .split("")
-                    .map((char, i) => (
-                      <Text key={`extra-${i}`} color="red">
-                        {char}
-                      </Text>
-                    ))}
-              </Box>
+              <Text
+                key={i}
+                color={sc.color}
+                dimColor={sc.dimColor}
+                strikethrough={sc.strikethrough}
+              >
+                {sc.char}
+              </Text>
             );
-          }
-
-          return <FutureWord key={wordIndex} word={word} />;
-        })}
+          })}
+        </Text>
       </Box>
     </Box>
   );

package/src/hooks/useGame.ts

@@ -8,11 +8,11 @@ export type GameState = {
   timeLeft: number;
   isRunning: boolean;
   isFinished: boolean;
-  wordResults: Array<"correct" | "incorrect" | "pending">;
 };
 
 export type GameHook = GameState & {
   charInputs: string[][];
+  correctCharsAcc: number;
   startGame: () => void;
   handleChar: (char: string) => void;
   handleBackspace: () => void;
@@ -39,15 +39,27 @@ export function useGame(duration: number) {
   const charInputsRef = useRef<string[][]>(
     Array.from({ length: wordCount }, () => [])
   );
-  const [state, setState] = useState<GameState>(() => ({
-    words: generateWords(wordCount),
-    currentWordIndex: 0,
-    currentInput: "",
-    timeLeft: duration,
-    isRunning: false,
-    isFinished: false,
-    wordResults: Array(wordCount).fill("pending"),
-  }));
+  const wordsRef = useRef<string[]>([]);
+  const currentWordIndexRef = useRef(0);
+  const isFinishedRef = useRef(false);
+  const isRunningRef = useRef(false);
+  const correctCharsAccRef = useRef(0);
+  const totalCharsAccRef = useRef(0);
+  const wordCorrectCharsRef = useRef<number[]>([]);
+  const wordTotalCharsRef = useRef<number[]>([]);
+
+  const [state, setState] = useState<GameState>(() => {
+    const generatedWords = generateWords(wordCount);
+    wordsRef.current = generatedWords;
+    return {
+      words: generatedWords,
+      currentWordIndex: 0,
+      currentInput: "",
+      timeLeft: duration,
+      isRunning: false,
+      isFinished: false,
+    };
+  });
 
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const startTimeRef = useRef<number>(0);
@@ -55,10 +67,14 @@ export function useGame(duration: number) {
   useEffect(() => {
     if (state.isRunning && !state.isFinished) {
       timerRef.current = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+        const newTimeLeft = Math.max(duration - elapsed, 0);
         setState((prev) => {
-          const newTimeLeft = prev.timeLeft - 1;
+          if (prev.timeLeft === newTimeLeft) return prev;
           if (newTimeLeft <= 0) {
             if (timerRef.current) clearInterval(timerRef.current);
+            isFinishedRef.current = true;
+            isRunningRef.current = false;
             return { ...prev, timeLeft: 0, isRunning: false, isFinished: true };
           }
           return { ...prev, timeLeft: newTimeLeft };
@@ -68,103 +84,106 @@ export function useGame(duration: number) {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [state.isRunning, state.isFinished]);
+  }, [state.isRunning, state.isFinished, duration]);
 
   const startGame = useCallback(() => {
     startTimeRef.current = Date.now();
+    isRunningRef.current = true;
     setState((prev) => ({ ...prev, isRunning: true }));
   }, []);
 
   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();
-        return {
-          ...prev,
-          isRunning: true,
-          currentInput: prev.currentInput + char,
-        };
-      }
-      return {
-        ...prev,
-        currentInput: prev.currentInput + char,
-      };
-    });
+    if (isFinishedRef.current) return;
+    charInputsRef.current[currentWordIndexRef.current].push(char);
+    if (!isRunningRef.current) {
+      startTimeRef.current = Date.now();
+      isRunningRef.current = true;
+    }
+    setState((prev) => ({
+      ...prev,
+      isRunning: true,
+      currentInput: prev.currentInput + char,
+    }));
   }, []);
 
   const handleBackspace = useCallback(() => {
-    setState((prev) => {
-      if (prev.isFinished) return prev;
-
-      if (prev.currentInput.length === 0) {
-        if (prev.currentWordIndex === 0) return prev;
-        const prevIndex = prev.currentWordIndex - 1;
-        const prevInput = charInputsRef.current[prevIndex].join("");
-        const newWordResults = [...prev.wordResults];
-        newWordResults[prevIndex] = "pending";
-        return {
-          ...prev,
-          currentWordIndex: prevIndex,
-          currentInput: prevInput,
-          wordResults: newWordResults,
-        };
-      }
-
-      charInputsRef.current[prev.currentWordIndex].pop();
-      return {
+    if (isFinishedRef.current) return;
+
+    const currentIdx = currentWordIndexRef.current;
+    const currentChars = charInputsRef.current[currentIdx];
+
+    if (currentChars.length === 0) {
+      if (currentIdx === 0) return;
+      const prevIndex = currentIdx - 1;
+      currentWordIndexRef.current = prevIndex;
+      const lastCorrect = wordCorrectCharsRef.current.pop() || 0;
+      const lastTotal = wordTotalCharsRef.current.pop() || 0;
+      correctCharsAccRef.current -= lastCorrect;
+      totalCharsAccRef.current -= lastTotal;
+      const prevInput = charInputsRef.current[prevIndex].join("");
+      setState((prev) => ({
+        ...prev,
+        currentWordIndex: prevIndex,
+        currentInput: prevInput,
+      }));
+    } else {
+      charInputsRef.current[currentIdx].pop();
+      setState((prev) => ({
         ...prev,
         currentInput: prev.currentInput.slice(0, -1),
-      };
-    });
+      }));
+    }
   }, []);
 
   const handleSpace = useCallback(() => {
-    setState((prev) => {
-      if (prev.isFinished || !prev.isRunning) return prev;
-      const word = prev.words[prev.currentWordIndex];
-      const isCorrect = prev.currentInput === word;
-      const newWordResults = [...prev.wordResults];
-      newWordResults[prev.currentWordIndex] = isCorrect
-        ? "correct"
-        : "incorrect";
-      return {
-        ...prev,
-        currentWordIndex: prev.currentWordIndex + 1,
-        currentInput: "",
-        wordResults: newWordResults,
-      };
-    });
-  }, []);
-
-  const getResults = useCallback((): GameResults => {
-    let correctChars = 0;
-    let totalChars = 0;
-
-    for (let i = 0; i < state.currentWordIndex; i++) {
-      const word = state.words[i];
-      const input = charInputsRef.current[i].join("");
-      totalChars += Math.max(word.length, input.length) + 1;
-      if (input === word) {
-        correctChars += word.length + 1;
-      } else {
-        for (let j = 0; j < word.length; j++) {
-          if (input[j] === word[j]) correctChars++;
-        }
+    if (isFinishedRef.current || !isRunningRef.current) return;
+
+    const currentIdx = currentWordIndexRef.current;
+    const word = wordsRef.current[currentIdx];
+    const inputChars = charInputsRef.current[currentIdx];
+    const input = inputChars.join("");
+
+    let correct = 0;
+    if (input === word) {
+      correct = word.length + 1;
+    } else {
+      for (let j = 0; j < word.length; j++) {
+        if (inputChars[j] === word[j]) correct++;
       }
     }
+    const total = Math.max(word.length, input.length) + 1;
+
+    wordCorrectCharsRef.current.push(correct);
+    wordTotalCharsRef.current.push(total);
+    correctCharsAccRef.current += correct;
+    totalCharsAccRef.current += total;
+    currentWordIndexRef.current = currentIdx + 1;
+
+    setState((prev) => ({
+      ...prev,
+      currentWordIndex: currentIdx + 1,
+      currentInput: "",
+    }));
+  }, []);
 
-    const timeElapsed = duration;
-    const wpm = totalChars > 0 ? Math.round((correctChars / 5) / (timeElapsed / 60)) : 0;
-    const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 1000) / 10 : 0;
-
+  const getResults = useCallback((): GameResults => {
+    const correctChars = correctCharsAccRef.current;
+    const totalChars = totalCharsAccRef.current;
+    const wpm =
+      totalChars > 0
+        ? Math.round((correctChars / 5) / (duration / 60))
+        : 0;
+    const accuracy =
+      totalChars > 0
+        ? Math.round((correctChars / totalChars) * 1000) / 10
+        : 0;
     return { wpm, accuracy, time: duration };
-  }, [state.currentWordIndex, state.words, duration]);
+  }, [duration]);
 
   return {
     ...state,
     charInputs: charInputsRef.current,
+    correctCharsAcc: correctCharsAccRef.current,
     startGame,
     handleChar,
     handleBackspace,

package/video/src/CLAUDE.md

@@ -1,7 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,193 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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>
-  );
-};