SpeedReader — Read faster with RSVP technology
FlashRead is a speed reading application that uses RSVP (Rapid Serial Visual Presentation) technology with ORP (Optimal Recognition Point) alignment. It displays words one at a time with the middle character highlighted on a fixed vertical center line, eliminating eye movement and enabling reading speeds of 300-1200+ WPM.
💡 RSVP technology allows you to read faster by presenting words sequentially in a fixed position, removing the time your eyes spend searching for the next word.
| Feature | Description |
|---|---|
| ⚡ RSVP Speed Reading | Words flash one at a time at your chosen speed |
| 🎯 ORP Alignment | Optimal recognition point highlighted on center line |
| 🚀 300-1200+ WPM | Adjustable reading speed with smart timing |
| ⏸️ Smart Pausing | Automatic pauses for commas, periods, and sentence endings |
| 🔗 URL Import | Load articles directly from any webpage |
| ⌨️ Keyboard Controls | Space, arrows, and R for full control |
| 📝 Customizable | Adjustable font size (28-92px) |
| Key | Action |
|---|---|
Space |
Play / Pause |
→ |
Next word |
← |
Previous word |
R |
Restart from beginning |
- React 19 — UI Framework
- TypeScript — Type safety
- Vite — Fast build tool
- Tailwind CSS 4 — Styling
- Framer Motion — Animations
- Lucide React — Icons
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/ronakmunjapara/FlashRead.git
# Navigate to the project
cd FlashRead
# Install dependencies
npm installnpm run devnpm run buildnpm run previewFlashRead/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ ├── ControlsPanel.tsx # Input controls, WPM slider, URL loader
│ │ └── Reader.tsx # Word display with ORP highlighting
│ ├── lib/
│ │ ├── text.ts # Text processing, tokenization, ORP logic
│ │ └── fetchArticle.ts # URL content fetching via proxy
│ ├── App.tsx # Main application component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── index.html # HTML template with SEO metadata
├── package.json # Dependencies
├── vite.config.ts # Vite configuration
└── tsconfig.json # TypeScript configuration
┌─────────────────────────────────────────────────────────────┐
│ FlashRead Flow │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────────┐ ┌─────────────────┐ │
│ │ Text │───▶│ Tokenization │───▶│ ORP Calculation│ │
│ │ Input │ │ │ │ │ │
│ └─────────┘ └─────────────┘ └────────┬────────┘ │
│ │ │
│ ┌──────────────────────────────────────────┴──────────┐ │
│ │ ▼ │
│ │ ┌──────────────────────────────────────────────┐ │
│ │ │ Word Display (RSVP) │ │
│ │ │ │ │
│ │ │ [left] [ORP] [right] │ │
│ │ │ ◄─────► │ │
│ │ │ fixed center line │ │
│ │ └──────────────────────────────────────────────┘ │
│ │ │ │
│ └──────────────────────────────────────────────────┬───┘
│ │
│ ┌──────────────┐ │
│ │ Timing │◀──────────────┘
│ (WPM based) │
└──────────────┘
│ │
└─────────────────────────────────────────────────────────────┘
The Optimal Recognition Point (ORP) is calculated based on word length:
| Word Length | ORP Position |
|---|---|
| 1-5 chars | Position 1 |
| 6-9 chars | Position 2 |
| 10-13 chars | Position 3 |
| 14+ chars | Position 4 |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Spritz RSVP technology
- ORP algorithm based on research in visual recognition points
- Built with the amazing Vite ecosystem
Made with ❤️ by @ronakmunjapara
