Read Time for Framer — accurate, lightweight, and fully customizable without code.
The Read Time component calculates and displays the estimated reading time for your articles by connecting directly to your CMS's rich text field. It accounts for both word count and image viewing time using Medium's proven formula, giving your readers an accurate estimate right out of the box. It also features multiple property controls so that you can match your project's design. Add it to blog posts, documentation pages, article cards, and everywhere.
Important: This component requires a CMS Collection List or CMS Page to function. It must be placed inside a CMS-connected context so it can access your rich text content field. It will not work on static pages or outside of a CMS collection.
You can customize all the content:
Connect your CMS's rich text field directly
Prefix and suffix labels with singular/plural support
Adjustable reading speed (words per minute)
Image reading time calculation toggle
Separator characters for inline use with other metadata
Configurable empty state when no content is connected
You can customize all the styles:
Font styles via Framer's native font picker (Font Family, Font Size, Line Height, Weight, Letter Spacing, etc.)
Text color with Color Style support
Text transform
Optional clock icon with adjustable gap
To use the component, copy it and paste it into your Framer canvas inside a CMS Collection List or CMS Page. Connect the Content property to your CMS rich text field using the variable connector (plug icon) in the properties panel. All of the dynamic properties can be adjusted on the sidebar.
Content—Connect to your CMS rich text field
Empty Text — Text shown when no content is connected or the article is empty
Words / Min — Average reading speed (default: 238 wpm, the research-backed average)
Count Images—Add image viewing time using Medium's formula (12s for the first image, decreasing to 3s per image)
Prefix—Text displayed before the number (e.g., "Reading time:")
Suffix (1) — Suffix when read time is exactly 1 (e.g., "minute")
Suffix (2+) — Suffix when read time is 2 or more (e.g., "minutes")
Sep. Before—Separator character before the label for inline use with other metadata (e.g., ·—|/)
Sep. After — Separator character after the label
Show Icon—Toggle the clock icon visibility
Icon Gap — Spacing between icon and text
Font — Font-related styles via Framer's native picker (Font Family, Font Size, Line Height, Weight, Letter Spacing, etc.)
Text Transform—Transform text casing: None, Uppercase, Lowercase, or Capitalize
Color — Color of the component text and icon, with Color Style support
João Saraiva
