Projects
Back Projects

ADHD Reader: A Focused Reading Tool

ADHD Reader: A Focused Reading Tool
  • Client Personal project
  • Category Accessibility Tool
  • Date February 7, 2026

For a lot of people, reading is effortless. You open an article, your eyes scan the page, and you absorb words without even thinking about it. But if you have ADHD — or if you just struggle with long walls of text — that experience can feel very different. Your eyes jump around, sentences restart, and before you know it, ten minutes have passed and you’re still on the same paragraph. ADHD Reader is a small web app that tackles this problem head-on: it takes any text and shows it one word at a time, at whatever speed you choose, in a clean display that leaves no room for distraction.

Links

The idea behind it

The concept is called Rapid Serial Visual Presentation, or RSVP. Instead of scanning lines of text left to right (which requires constant eye movement and attention), the app pins your focus to a single point on the screen. Words appear and disappear in that exact spot, one after another, at a pace you control.

Honestly, it sounds almost too simple. But that simplicity is the whole point. There’s no sidebar, no pop-up, no notification badge competing for your attention. Just a word, then the next word, then the next. Your brain does less work deciding where to look and more work actually reading.

Who it’s for

The name says ADHD, but the audience is broader than that:

  • People with ADHD who lose focus during traditional reading
  • Students preparing for exams with mountains of material to get through
  • Speed-reading enthusiasts who want to experiment with RSVP
  • Anyone who’s ever felt overwhelmed by a long article and wished they could just… slow it down

The app is free, runs entirely in the browser, and doesn’t require an account or installation. You paste text, press play, and read.

How it works

The user experience is deliberately minimal. You land on a single page with a text input area at the bottom and a large display area at the top. Paste your text (or type it), hit play, and words start appearing one at a time in big, bold type.

From there, you can:

  • Adjust the speed — a slider lets you go anywhere from 50 to 600 words per minute
  • Change words per step — show 1, 2, 3, 4, or 5 words at a time to find your sweet spot
  • Skip forward or backward — jump 5 steps in either direction to re-read or skip ahead
  • Go fullscreen — the word fills your entire screen, eliminating everything else
  • Seek through the progress bar — click anywhere on the bar to jump to a specific position

Keyboard shortcuts make the whole thing feel snappy: Space to play or pause, arrow keys to skip, R to reset. These shortcuts are smart enough to disable themselves when you’re typing in the text area, so nothing weird happens.

Under the hood

ADHD Reader is a fully static single-page application — no server, no database, no API calls. Everything happens in your browser, and the text you paste never leaves your device.

Here’s what the stack looks like:

User's Browser
├── SvelteKit (static adapter) ─── pre-rendered HTML/JS/CSS
├── Svelte 5 Components ────────── reactive UI layer
├── Paraglide JS ───────────────── compile-time i18n
├── Tailwind CSS v4 ────────────── utility-first styling
└── localStorage ───────────────── theme preference persistence

And the component hierarchy is pretty straightforward:

+page.svelte (Main Page)
├── ThemeToggle          — light / dark / system switcher
├── WordPlayer           — orchestrator: parses text, manages playback
│   ├── WordDisplay      — large centered word, fullscreen support
│   ├── ProgressBar      — seekable reading progress indicator
│   └── PlayerControls   — play/pause, speed slider, skip buttons
└── TextInputArea        — textarea with word count and clear button

The WordPlayer component is the brain of the operation. It owns the playback state machine — parsing text into tokens, managing the timer, handling keyboard shortcuts, and coordinating between the display, progress bar, and controls.

Tech choices and why they matter

TechnologyRoleWhy
Svelte 5UI frameworkRunes ($state, $derived, $effect) give fine-grained reactivity without a virtual DOM — word transitions feel instant
SvelteKitApp frameworkStatic adapter produces a deployable bundle with no runtime server
TypeScriptLanguageType safety across all components and props catches bugs before they ship
Tailwind CSS v4Styling@theme directive and CSS custom properties power the dual-theme system without JavaScript-based styling
Paraglide JSi18nCompile-time translations, fully type-safe — m.play() instead of $t('play')
Vite 7Build toolSub-second hot module replacement during development
BunRuntime & package managerFast installs, fast script execution
GitHub ActionsCI/CDBuild and deploy to GitHub Pages on every push to main

One decision worth calling out: the project uses CSS custom properties for theming instead of Tailwind’s dark: variant. Every component references the same color tokens (--color-bg, --color-surface, --color-accent), and switching between light and dark is just a class toggle on the <html> element. No per-component conditional classes needed.

The theme and language systems

The app ships with three theme modes — Light, Dark, and System (which follows your OS preference). Your choice is saved to localStorage, so it sticks between visits. Theme transitions are animated with CSS, so the switch feels smooth rather than jarring.

On the language side, ADHD Reader supports English, Ukrainian, and Montenegrin. All UI strings — labels, tooltips, placeholders, aria-labels — go through Paraglide’s message functions. Because Paraglide resolves translations at build time, there’s no loading delay and no JSON files fetched at runtime. The locale is determined from the URL path, with Ukrainian as the default.

SEO and metadata

Even though it’s a single-page tool, the app takes metadata seriously:

  • Open Graph and Twitter Card tags for social sharing
  • JSON-LD structured data using the WebApplication schema
  • PWA-ready meta tags (theme-color, apple-mobile-web-app)
  • Canonical URLs and robots directives

These small details mean that when someone shares a link to the app, it looks polished in previews — not like a blank page with a generic title.

What it doesn’t do (yet)

Being upfront about limitations matters just as much as listing features. Here’s what’s deliberately left out of the current version:

  • No text persistence — refresh the page and your text is gone. There’s no save or export.
  • No file upload — you have to paste text manually. No PDF, EPUB, or drag-and-drop support.
  • No user accounts — settings like WPM and words-per-step reset each session (only the theme sticks).
  • No bionic reading — no bold-first-letters or highlighting techniques.
  • No punctuation awareness — the timer doesn’t pause at periods or commas for natural pacing.
  • No offline mode — there’s no service worker yet, so you need a connection.

These aren’t oversights — they’re scope decisions. The goal was to ship a focused, working tool, not a feature-bloated app that never leaves development.

Where it goes from here

There’s a clear path forward if the project keeps growing:

Near-term — persist user settings to localStorage, add punctuation-aware pacing (slight pauses at sentence endings), implement bionic reading mode, and add a service worker for true offline support.

Medium-term — file import (drag-and-drop, .txt, .epub, .pdf), reading bookmarks, session statistics, custom color themes, and swipe gestures for mobile.

Long-term — text-to-speech integration for multi-sensory reading, a browser extension that lets you highlight text on any webpage and open it directly in ADHD Reader, collaborative reading sessions, and AI-powered summarization.

Wrapping up

ADHD Reader doesn’t try to be a full e-reader or a productivity platform. It does exactly one thing: it shows you words, one at a time, at a pace you control. And it does that thing well.

The technical foundation keeps it fast, lightweight, and cheap to run — a handful of static files, zero hosting costs, no cold starts. The entire build-and-deploy pipeline runs in under 30 seconds via GitHub Actions.

But here’s the thing that matters most: accessibility tools don’t have to be complicated. Sometimes the most helpful thing technology can do is strip away the noise and let you focus on a single word.