ClaraLeitura

Inspiration

Everyone reads differently, but most websites offer a single way to read. Small things like line length, spacing, font and contrast can make a long text tiring or comfortable. [Add here, in your own words, what made you pick this problem.]

What it does

ClaraLeitura lets you paste any text and adapt it live: font, size, line and letter spacing, line width, reading theme, a focus ruler and read-aloud. You can compare the adjusted text with the original, save your settings as a reading profile and share it with a link. No account needed.

ClaraLeitura is about reading comfort and personal preference. It does not diagnose or treat any condition.

How I built it

A front-end only app built with plain HTML, CSS and JavaScript. Profiles are stored in the browser (LocalStorage) and shared through a link that encodes the settings. Read-aloud uses the browser's built-in speech synthesis. I used AI-assisted development tools to help write and review the code, and I designed the product, the interface and the flows myself. [Adjust to what is really true.]

Design decisions

• Warm paper-like palette and a legible type system (Atkinson Hyperlegible and Fraunces).
• Before/after comparison so the effect of each setting is visible.
• Full keyboard support, visible focus, reduced-motion support and screen reader labels.

Challenges

TODO

What I learned

TODO

What's next

Importing PDFs, an optional reading test to suggest a starting profile, and a browser extension.

Built With

• css3
• html5
• javascript
• localstorage
• web-speech-api