I love making fun websites with animations and unusual layouts. But sometimes I want a simpler view when I’m reading a long post.

You know what I’m talking about. You craft this beautiful, chaotic homepage with personality bursting from every pixel, and then someone actually wants to, you know, read your 2,000-word essay about whatever nerdy thing you’re passionate about. And they’re squinting at 14px text stretched across a 1400px wide container while animated SVGs dance in the peripheral vision.

So I came up with a compromise: Cozy Mode.

The Origin Story

I saw Matt on X talking about narrow columns of text and reading layouts. I wanted to keep my site’s design and offer a simpler view for people who want to read my writing.

And then I thought: I bet Claude could help me build this.

What It Does

Cozy Mode transforms any blog post into a distraction-free reading experience with all the research-backed typography goodness you could want:

  • 66 characters per line (the optimal line length according to actual studies)
  • 1.5 line height for comfortable reading
  • 18px font size (16px on mobile, 20px on larger screens)
  • Georgia serif for body text
  • Dark mode toggle because of course
  • Font size controls that remember your preferences

It uses Mozilla’s Readability.js to extract the post and display it in an overlay without the sidebars and widgets.

It includes keyboard navigation, screen reader support and WCAG AAA compliance.

AI Made This Possible

Claude and I built this in a few hours. I described what I wanted, and Claude helped with typography research, code, debugging and accessibility.

I’m excited that I could make this without already knowing every part of how it works.

I’ve got dozens of these little “wouldn’t it be cool” ideas rattling around in my head, and now I can actually build them. That’s pretty magical.

Try It Out

Try the icon in the corner on desktop or the button at the bottom on mobile.

The plugin is free if you want it for your own WordPress site.