Human-Like
Keyboard Components

Keyboard Simulation Demo

Complete Human-Like interactive typing demonstration

0%
Progress
0
WPM
0
Mistakes
idle
State
|
Start typing to see key presses...

Sample Texts

Custom Text

Basic Settings

FastSlow

Pause Timing

Mistake Types & Effects

Cursor Settings

FastSlow

Component Props

NameTypeDefaultDescriptionExample
theme'light' | 'dark''light'Visual theme for the entire demo interface"dark"

Theme Support

The KeyboardSimulationDemo automatically adapts to light/dark themes like other keyboard components:

// Light theme (default)
<KeyboardSimulationDemo theme="light" />

// Dark theme
<KeyboardSimulationDemo theme="dark" />

// Auto-detect theme from system/app
function ThemeAwareDemo() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  
  useEffect(() => {
    const isDark = document.documentElement.classList.contains('dark');
    setTheme(isDark ? 'dark' : 'light');
  }, []);
  
  return <KeyboardSimulationDemo theme={theme} />;
}

Overview

The KeyboardSimulationDemo is a comprehensive, self-contained component that combines:

  • HumanLike typing engine with natural timing
  • Interactive keyboard visualization (mobile/desktop)
  • Real-time key press analytics
  • Advanced configuration controls
  • Performance statistics
  • Sample text library

Perfect for demonstrations, testing, and showcasing human-like typing behavior.

Built-in Features

Keyboard Modes

  • Mobile keyboard: iOS-style with view switching
  • Desktop keyboard: Full QWERTY layout

Configuration Controls

  • Speed control: 20ms-500ms per character with WPM indicators
  • Speed variation: ±0-100ms randomness
  • Mistake frequency: 0-15% error rate
  • Pause timing: Sentence, word, thinking, and correction pauses
  • Mistake types: Adjacent keys, double characters, common typos
  • Human behaviors: Fatigue, concentration lapses, overcorrection

Real-time Analytics

  • Progress tracking: Percentage completion
  • WPM calculation: Words per minute
  • Mistake counting: Error tracking
  • State monitoring: Current typing state
  • Key press history: Last 10-25 key presses with timing

Sample Text Library

Pre-built texts for different scenarios:

  • Caps Lock: Demonstrates caps lock behavior
  • Symbols: Special characters and punctuation
  • Numbers: Numeric content and mixed alphanumeric
  • Mixed: Combination of all content types
  • Programming: Code-like content with syntax
  • Sentences: Natural language with proper pauses
  • Words: Individual word timing demonstration
  • Complex: Advanced vocabulary with thinking pauses

Key Press Indicator

Real-time key press tracking hook with history and analytics