PersonalReadingEnv

About

ReaderFlow brings a fully customizable, distraction-free reading experience directly into your Framer sites. Drop it into blogs, documentation, articles, or resource hubs to give your readers total control over how they consume your content. They can switch themes, scale text, and even listen along, making your pages incredibly accessible and engaging.

What it does

It dynamically renders text content with a suite of built-in user controls. The component handles instant theme switching, font family adjustments, and precise font size scaling. It features a focus mode to hide distracting layout elements, an integrated text to speech engine with adjustable reading speeds, text annotation capabilities, and a sleek visual reading progress bar.

What you can customize

• Content & Theme: Add your custom body text, set a default theme like Warm Sepia, or pass an entire custom theme object.

• Typography: Change the font family (like Serif or Sans-Serif), set the starting font size, and choose whether to show or hide the full typography controls panel.

• Layout & Features: Toggle the theme selector visibility, enable or disable focus mode, switch text to speech on or off, and enable user annotations.

• Progress Tracker: Show or hide the top reading progress indicator, change its color to match your brand, and configure the default reading speed in words per minute.

Great for

• Blogs and article layouts

• Documentation and user guides

• Portfolio case studies

• Educational and tutorial platforms

• Long-form content hubs

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb