This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
What I Built
I built ReadEase for my friend’s mom, who has lived with dyslexia her entire life.
Whenever she tries to read online articles, long emails, recipes, or digital documents, letters often seem to flip, rotate, and crowd together on the screen. The harsh glare of standard white web pages causes severe eye fatigue and headaches within minutes. Over the years, she found herself having to ask family members to read things out loud for her, something that took away her reading independence and left her feeling frustrated.
Commercial assistive apps either felt overly complicated, were cluttered with ads, or required expensive monthly subscriptions.
I wanted to give her a calm, dignified, and effortless reading space. ReadEase is a web-based assistive reading studio designed to eliminate visual crowding, restore reading comfort, and give her back full autonomy over whatever she wants to read:
- Weighted Dyslexia-Friendly Fonts: Integrates OpenDyslexic (weighted bottoms that anchor letters to prevent them from flipping or swapping in the mind’s eye), Atkinson Hyperlegible (crafted by the Braille Institute for unmistakable character distinction), and Lexend.
- Soft Contrast Backdrops: Replaces harsh screen glare with soothing, optometrist-recommended paper tints (Warm Cream, Sage Green, and Soft Slate) that reduce visual stress and Scotopic Sensitivity (Irlen syndrome).
- Guided Line Focus Ruler: A movable reading ruler that highlights the active line and dims out peripheral distractions, preventing her from accidentally skipping lines.
- Bionic Fixation Reading: Automatically bolds the initial letters of each word, gently guiding her eyes across the sentence so her brain doesn't have to work overtime to recognize word boundaries.
- Synchronized Read-Along (Dual Sensory Immersion): High-quality, warm neural voice narration synchronized with millisecond-precision karaoke word highlighting—allowing her to hear and see words simultaneously without losing her place.
- One-Click Text Simplifier & Multilingual Support: Automatically rewrites convoluted sentences into clear, accessible language, and translates text into her preferred language whenever needed.
Demo
- 🌐 Live Application: https://readease.onrender.com
- 🛠️ Source Code github.com/abhinavnayak21/ReadEase
The Experience
- Zero Distractions: A distraction-free canvas where she can paste any recipe, letter, or news article.
- One-Touch Customization: Effortlessly tweak font size, letter spacing, and line height to match her comfort level.
- Human-like Audio: Calm, patient reading voices that she can slow down or speed up at will.
Code
ReadEase is fully open source under the MIT License:
👓 ReadEase - Assistive Typography & AI Reading Studio
ReadEase is an open-source assistive typography studio and reading workspace built to make digital reading effortless for everyone—including neurodivergent readers, individuals with dyslexia or ADHD, language learners, and people with visual sensitivities.
🌟 Core Features
| Feature | Description | Why It Helps |
|---|---|---|
| 📖 Dyslexia Mode | Activates the OpenDyslexic typeface with weighted baselines, generous line height, and custom letter tracking. |
Prevents letter rotation/inversion and reduces visual crowding. |
| 🎯 Bionic Reading | Dynamically bolds the initial syllables/fixations of words across sentences. | Guides saccadic eye movements, reducing cognitive fatigue and boosting reading speed. |
| 📏 Interactive Reading Ruler | A cursor-following focus bar with gentle contrast styling. | Prevents accidental line skipping and aids readers with ADHD or focus difficulties. |
| 🔤 Typography Engine | Custom selection of accessibility fonts (OpenDyslexic, Roboto, Nunito, Comic Sans MS, Georgia). |
Allows readers to customize letterforms for maximum visual comfort. |
Repository Link: https://github.com/abhinavnayak21/ReadEase
How I Built It
To make the app truly accessible, every detail had to prioritize cognitive comfort over complex UI:
Fluid Typography & Visual Ergonomics: We built a custom CSS custom-property pipeline that applies letter weighting, expanded kerning, and line-height multipliers dynamically without layout shifts.
Cohere Command-R+ (Cognitive Simplification & Translation): For complex medical notices or dense news articles, we integrated Cohere’s command-r-plus model. With carefully crafted few-shot prompts, it deconstructs compound sentences into simpler clauses while preserving the core meaning and tone.
Millisecond-Accurate Neural Speech (ElevenLabs Alignment): Because dual-channel processing (visual + auditory) dramatically reduces dyslexic reading errors, we used ElevenLabs’ timestamped speech API (/with-timestamps). It returns character-level offsets that we map directly to word spans in the React DOM for real-time, synchronized highlighting.
Why Does Open Innovation Matter?
Accessibility should never be locked behind a paywall.
An estimated 700+ million people worldwide live with dyslexia. Many are adults, parents, and seniors who simply want to read daily emails or news without strain, yet modern assistive technology is increasingly commodified into costly $15–$30/month subscriptions.
Open innovation made ReadEase possible:
- Independence & Privacy: She can read private letters, medical records, or personal recipes knowing her data is never sold or retained for ad targeting.
- Built on Open Research: ReadEase stands on the shoulders of open-access fonts like OpenDyslexic and Atkinson Hyperlegible, which were gifted to the public domain by researchers and typographers.
- Extensibility: Anyone with a family member facing similar challenges can fork this repository, add their native language, or customize presets to their loved one's specific visual preferences.
My Agent Session
Built and refined using an agentic pairing workflow to transition the architecture into a clean, unified full-stack web application ready for 1-click cloud deployment.
Prize Categories
- Best Project Built for a Friend
- Accessibility / Assistive Tech
- ElevenLabs
- Render
Top comments (0)