---
title: "Readability Widget — Free Framer component · Best of Framer"
description: "Free Framer component · by Kingsley · Text. Comfort controls for every site"
canonical: "https://framer.elliotli.dev/component/readability-widget"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Readability Widget

# Readability Widget

Comfort controls for every site

[View on Framer](https://framer.com/marketplace/components/readability-widget/?via=elliot-li)

![Readability Widget preview image 1](https://framer.elliotli.dev/og/component/readability-widget/b49fdb4dc9200ac0/1600x1200.jpg)

## Summary

Comfort controls for every site

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6478

## Details

- **Author**: Kingsley
- **Published**: 2026-06-29
- **Updated**: 2026-06-30
- **Added**: 2026-06-29
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing