SwiftScroll Speed Trainer

Productivity

Original Idea

Browser Reading Speed Trainer A browser extension that gradually increases text scroll speed on articles to improve reading pace over time.

Product Requirements Document (PRD): SwiftScroll Speed Trainer

1. Executive Summary

SwiftScroll Speed Trainer is a next-generation browser extension (Manifest V3) designed to improve reading speed and comprehension natively within the browser. Unlike traditional tools that require text extraction into a separate interface, SwiftScroll utilizes a high-performance auto-scrolling engine and a Rapid Serial Visual Presentation (RSVP) overlay to train users' eyes directly on the articles they read. Built for the 2026 web ecosystem, it leverages React 19, Shadow DOM isolation, and native browser AI for a seamless, secure, and data-driven training experience.

2. Problem Statement

Knowledge workers and students are overwhelmed by the volume of digital text they must consume. Traditional speed-reading applications force users to copy-paste text into a proprietary reader, disrupting the browsing workflow. Existing auto-scroll tools are often "jittery," fail to ignore ads/sidebars, and do not provide the analytical feedback necessary to track and encourage long-term reading speed improvement.

3. Goals & Success Metrics

  • User Growth: Achieve 50,000 active installs within the first 6 months.
  • User Value: Increase the average user's WPM (Words Per Minute) by 25% after 30 days of consistent use (min. 10 mins/day).
  • Retention: 40% Week-4 retention rate.
  • Performance: Maintain a consistent 60fps (or 120fps on ProMotion displays) during auto-scroll to prevent eye strain.

4. User Personas

  • Academic Alex: A graduate student reading 50+ research papers weekly. Needs to scan for key information quickly.
  • Corporate Clara: A software engineer reading technical documentation and industry news. Needs to stay updated without losing hours to "deep reading."
  • Fluency Felix: A language learner using articles to improve reading pace and vocabulary recognition in a second language.

5. User Stories

  • As a student, I want the extension to automatically find the article body so I don't have to scroll past ads and navigation menus manually.
  • As a professional, I want a side panel that shows my reading progress and WPM history so I can see my improvement over time.
  • As a speed reader, I want an RSVP mode that flashes one word at a time in the center of the screen so I can eliminate sub-vocalization.
  • As a multi-device user, I want my settings and "Level" to sync between my home Chrome and work Firefox browsers.

6. Functional Requirements

6.1 Core Features

  • Smart Content Detection: Uses the Defuddle library to extract the main article body and calculate total word count.
  • High-Fidelity Auto-Scroll: Variable speed scrolling (200–1000 WPM) using requestAnimationFrame with delta-time compensation.
  • WPM Calibration: An initial 30-second test to establish a baseline WPM for new users.
  • RSVP Overlay: A React 19-powered Shadow DOM overlay for Rapid Serial Visual Presentation.
  • Interactive Controls: Keyboard shortcuts (Space to pause, +/- to adjust speed) and a persistent UI via the Chrome Side Panel API.

6.2 Advanced Features (Nice-to-Have)

  • Focus Mode: Dims all content except the active line being scrolled.
  • Native AI Summarization: Uses browser-native AI APIs (2026 standard) to provide a 3-sentence summary before starting.
  • Read-it-Later Integration: Syncs with Raindrop.io and Instapaper.

7. Technical Requirements

7.1 Tech Stack (2026 Industry Standards)

  • Framework: WXT (vLatest) for Manifest V3 extension management and Vite-based builds.
  • Frontend: React 19 utilizing the React Compiler for optimized performance.
  • Styling: CSS Modules with Shadow DOM encapsulation to prevent host-site style leakage.
  • Backend: Node.js (v24+) with Express.
  • Database: PostgreSQL 18 with TimescaleDB extension for time-series reading analytics.
  • Authentication: Firebase Auth (Google Provider) integrated via FedCM API.

7.2 Core Architectural Components

  • Content Script: Injected into tabs to handle requestAnimationFrame scrolling and DOM extraction.
  • Side Panel API: Primary interface for settings, stats, and session controls.
  • Service Worker: Event-driven background script for handling API calls and storage sync.

8. Data Model

8.1 UserProfile

| Attribute | Type | Description | | :--- | :--- | :--- | | userId | UUID | Primary Key | | baselineWPM | Integer | Result of the first test | | targetWPM | Integer | User-defined goal | | theme | String | Light/Dark/System |

8.2 ReadingSession (Time-Series)

| Attribute | Type | Description | | :--- | :--- | :--- | | sessionId | UUID | Primary Key | | userId | UUID | Foreign Key | | url | String | Sanitzed URL | | avgWpm | Float | Calculated at end of session | | durationSec | Integer | Total active reading time | | timestamp | TIMESTAMPTZ | Start of session |

9. API Specification

9.1 Sync Reading Session

  • Endpoint: POST /api/v1/sessions
  • Payload: 
    {
  "url_hash": "sha256_hash",
  "wpm": 450,
  "duration": 120,
  "words_read": 900
}
  • Response: 201 Created with updated user_level.

10. UI/UX Requirements

  • Placement: The main control hub must reside in the Chrome Side Panel to prevent obscuring article content.
  • RSVP Window: Must be centered horizontally and vertically, utilizing CSS Anchor Positioning to stay relative to the viewport.
  • Visual Feedback: A progress bar at the top of the tab showing percentage of article completed.
  • Typography: Support for OpenDyslexic and high-contrast font options within the RSVP reader.

11. Non-Functional Requirements

  • Performance: Auto-scroll must not trigger "Long Tasks" (>50ms) to ensure high Interaction to Next Paint (INP) scores.
  • Security: Use Sanitizer API (setHTML) for all DOM injections to prevent XSS. Implement Trusted Types CSP.
  • Offline Support: Session data must be cached in indexedDB and synced when the connection is restored.
  • Accessibility: Full keyboard navigation support and ARIA-live regions for WPM changes.

12. Out of Scope

  • Native PDF file support (local files).
  • Mobile browser versions (Safari iOS / Chrome Android).
  • Social features (sharing speed stats to social media).

13. Risks & Mitigations

| Risk | Mitigation | | :--- | :--- | | Motion Sickness | Implement a 2-second "easing-in" period for scroll speed. | | Content Extraction Failure | Provide a "Manual Selection" tool if Defuddle fails to find the article body. | | API Rate Limiting | Implement local-first data aggregation; sync sessions in batches every 5 minutes. |

14. Implementation Tasks

Phase 1: Project Setup & Infrastructure

  • [ ] Initialize project using WXT with React 19 template
  • [ ] Configure Vite with React Compiler enabled
  • [ ] Set up Firebase Auth with FedCM support
  • [ ] Initialize PostgreSQL 18 with TimescaleDB schema

Phase 2: Core Reading Engine

  • [ ] Implement article extraction logic using Defuddle
  • [ ] Build the requestAnimationFrame scroll controller with Delta-Time logic
  • [ ] Create the Shadow DOM wrapper for UI injection
  • [ ] Implement setHTML Sanitizer for safe content rendering

Phase 3: RSVP & UI

  • [ ] Build RSVP Reader component with CSS Anchor Positioning
  • [ ] Implement Side Panel UI for speed controls and live stats
  • [ ] Create WPM Calibration onboarding flow
  • [ ] Develop keyboard shortcut manager (using chrome.commands)

Phase 4: Analytics & Integrations

  • [ ] Implement Instapaper OAuth 1.0a flow using crypto-js
  • [ ] Build the Weekly Progress Dashboard using Materialized Views
  • [ ] Set up Raindrop.io API integration
  • [ ] Final security audit for Trusted Types compliance