Read Time

Description Read Time for Framer — accurate, lightweight, and fully customizable without code.

Description 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. Customization 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 Usage 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. Properties 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

simple, clean, and fully customizable