WordFlash uses rapid serial visual presentation (RSVP) to show one word at a time in the same spot on screen. Each word highlights a single focal character so your eyes stay put instead of scanning left to right.
Watch the MP4 · Recording script
Screenshot
Paste text or give it a URL. For URLs it pulls the article body with Mozilla Readability and reads it back in the same word-by-word view.
Built with Next.js, React, and Tailwind CSS.
- Focal-character highlighting with configurable color, font, and WPM
- Natural punctuation and line-break pauses, plus extra time for unfamiliar names, numbers, and long words (timing rules)
- Article reader with the full text beside the RSVP panel; click a word to jump
- A bookmarklet ("Read in WordFlash") for opening the current page in the reader
- Light, dark, and system themes; reduce motion and reduce transparency toggles
- Reading position saved in the browser when you come back
wordflash/
├── apps/web/ Next.js app
├── functions/ Firebase Cloud Function for /api/extract
├── packages/core/ Word timing, parsing, focal index
└── package.json pnpm workspaces
Use pnpm 12.14.0 and the latest Node.js 24 patch release for development, the web app, and Firebase Functions. Node.js 24.11.0 is the minimum supported version because of the build tooling. The runtime is set in the package manifests and firebase.json; .nvmrc selects Node.js 24 for compatible version managers. Package-manager settings live in pnpm-workspace.yaml.
TypeScript stays on 6.0.x and ESLint on 9.x until the lint plugins support the newer major versions. Node type definitions stay on 24.x to match the runtime. Framer Motion is pinned to 14.3.0 so this update respects pnpm's 24-hour release-age gate; no release-age exemptions are configured.
pnpm install
pnpm run devDev server: http://localhost:3000
| Command | What it does |
|---|---|
pnpm run dev |
Web dev server |
pnpm run build |
Build core + web |
pnpm run lint |
Lint all packages |
pnpm run test |
Run all tests |
Watch tests in one package:
cd packages/core && pnpm run test:watch
cd apps/web && pnpm run test:watchProduction build:
pnpm run build
pnpm --filter wordflash run startVercel: Create a project from this repo and set Root Directory to apps/web. The app's vercel.json pins pnpm for install and build commands to bypass Vercel's incompatible automatic pnpm bootstrap. Keep that version aligned with packageManager. See the Next.js deploy docs if you need the details.
Firebase: firebase.json hosts the web app and routes /api/extract to the extract Cloud Function in functions/. Use a Firebase CLI release that supports Node.js 24. Install the Functions dependencies with pnpm --dir functions install and authenticate the Firebase CLI before running firebase deploy. The predeploy hook builds the Functions code. Review .firebaserc and choose your own Firebase project before deployment.