Readability Widget

Show Preview
Readability Widget

About Readability Widget

About

Readability & Fun Widget gives visitors simple controls to make any Framer website easier and more enjoyable to read. It combines reading comfort tools with playful extras in one compact floating panel.

Use Cases

  • Portfolio websites

  • Blogs and writing pages

  • Resource libraries

  • Accessibility-friendly landing pages

Features

  • Compact floating widget panel

  • Light & dark styling

  • Text size controls

  • Readable font option

  • Text spacing toggle

  • Eye comfort mode

  • Reduced motion option

  • Cursor trail effect

  • Celebration animation

  • Customizable accent color

  • Demo preview mode for showcasing the widget

  • Targeted section control for safer site behavior

How To Use

  1. Add the component to your Framer page.

  2. Select the section or frame you want the widget to affect.

  3. Rename that section/frame to Readability Scope.

  4. In the component properties, keep Target Name as Readability Scope.

  5. If you use a different section name, enter that exact name in Target Name.

The widget will only apply text size, readable font, text spacing, color tone, and reduced motion to the section entered in Target Name. This keeps the component safe and prevents it from changing unrelated parts of the page.

For real websites, set Preview to Closed before publishing. Use Open Panel or Demo Active only for previews, screenshots, or marketplace demos.