A minimalist, zen-inspired typing practice application with real-time feedback and beautiful visualizations.
ZenType is designed to help you improve your typing speed and accuracy through a calm, distraction-free interface. With its dark, futuristic aesthetic and smooth animations, ZenType transforms typing practice into a meditative experience.
- Multiple Practice Modes: Choose from Words, Sentences, or Paragraphs to match your skill level
- Session Timer: Set custom practice durations (15s, 30s, 60s, 120s) or practice without time limits
- Real-time Metrics: Track your WPM (words per minute) and accuracy as you type
- Live Keyboard Visualization: See keys light up as you type with smooth glow effects
- Instant Feedback: Characters highlight in different colors based on correctness
- Zen Aesthetic: Calm, minimal design with dark gradients and purple accent colors
- Focus Mode: Remove distractions and concentrate on your typing
- Smooth Animations: Micro-interactions powered by Motion (Framer Motion)
- Responsive Layout: Works seamlessly on desktop and tablet devices
- Performance Graph: Visual representation of your WPM over time
- Detailed Metrics: View accuracy percentage, error count, and typing speed
- Personalized Insights: Get feedback on your performance with actionable suggestions
- Downloadable Results: Save your typing session results as an image
- React - UI framework
- TypeScript - Type-safe JavaScript
- Tailwind CSS v4 - Utility-first styling
- Motion (Framer Motion) - Smooth animations
- Recharts - Performance graphs
- Lucide React - Beautiful icons
- Vite - Fast build tool
- Node.js 18+ installed
- npm or pnpm package manager
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build- Select Your Mode: Choose between Words, Sentences, or Paragraphs
- Set Timer (Optional): Pick a time limit or practice without constraints
- Start Typing: Begin typing the displayed text
- Track Progress: Watch your WPM and accuracy update in real-time
- Review Results: See your performance graph and insights when complete
- Start Typing: Just begin typing to start a session
- Restart: Click the restart button or use the "Try Again" option
- Focus Mode: Toggle to remove visual distractions
ZenType features a carefully crafted color palette:
- Background: Deep gradient from dark navy to purple
- Primary Accent: Vibrant purple (#8b5cf6) with glow effects
- Correct Text: Bright white (#e5e7eb)
- Incorrect Text: Red (#ef4444) for immediate feedback
- Untyped Text: Dimmed gray (#6b7280)
Words Per Minute is calculated as: (characters typed / 5) / (time in seconds / 60)
Accuracy is determined by: (correct characters / total characters) × 100
ZenType works best on modern browsers:
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
zentype/
├── src/
│ ├── app/
│ │ ├── App.tsx # Main application component
│ │ └── components/
│ │ ├── ZenHeader.tsx # Header with logo and stats
│ │ ├── SessionControls.tsx # Mode and timer controls
│ │ ├── TypingArea.tsx # Main typing interface
│ │ ├── KeyboardVisualization.tsx # Visual keyboard
│ │ └── ResultsScreen.tsx # Results and analytics
│ └── styles/
│ ├── theme.css # CSS custom properties
│ ├── tailwind.css # Tailwind base styles
│ └── fonts.css # Font imports
└── package.json
Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Submit pull requests
- Improve documentation
This project is open source and available under the MIT License.
- Inspired by popular typing practice tools like Monkeytype and Keybr
- Built with modern web technologies for optimal performance
- Designed with accessibility and user experience in mind
ZenType - Find your zen while mastering typing