I Let AI Write Comments on My Own Articles — Here's Why
We added a floating AI companion that watches you scroll through blog posts and drops contextual commentary — sarcastic, insightful, and article-specific. Static blogs feel dead. This makes reading feel like a conversation.
Your Blog Has a Personality Problem
AI-powered blog features can transform passive reading into an interactive conversation that keeps visitors engaged and scrolling. Most blogs are monologues. You publish, readers scroll, maybe they finish, probably they don't. The content just sits there — identical for every visitor, frozen in time, with no awareness that anyone is reading it at all.
What is an AI reading companion? An AI reading companion is a scroll-aware widget embedded in blog posts that displays contextual, article-specific commentary as the reader progresses through the content. Unlike chatbots (which respond to user input) or comment sections (which capture post-reading reactions), a reading companion is proactive, real-time, and written specifically for each article's sections. It creates the experience of co-presence — the sense that someone is reading alongside you, with opinions about what you're encountering. Effective companions are triggered by scroll position, authored per-article, and designed to augment reading rather than interrupt it.
We wanted our blog to feel alive. Not in a gimmicky chatbot way, but in a way that makes reading feel like you have company. Someone (or something) is reading along with you, noticing what section you're in, and having opinions about it.
So we built the AI Reading Companion — a floating widget that watches your scroll position and drops article-specific commentary as you read. The widget appears in the corner and follows along as you scroll.
What the Reading Companion Actually Does
When you scroll past 5% of any blog post on this site, a small floating widget appears in the bottom-right corner. It looks like this:
- 🤖 AI COMPANION label
- A contextual comment based on your scroll position
- A minimize button (with localStorage persistence)
The comment changes as you scroll deeper into the article. Each article has 6 custom-written comments triggered at specific scroll percentages — these aren't random or generic. They're written specifically for that article's content.
For example, on our CSS GPU performance article, the companion says:
"Fun fact: this website uses 17 CSS animations right now. Irony, thy name is content." — at 5% scroll
"drop-shadow is beautiful and destructive, like a fireworks factory fire." — at 20% scroll
"If your laptop fan just turned on, that's not us. Probably." — at 75% scroll
Each comment is contextual, on-brand, and aware of what the reader is actually looking at in that section of the article.
Why Article-Specific Matters
The temptation with features like this is to create a pool of generic quips and randomize them. We tried that first — idle comments like "Still reading? Impressive" and "The good part's coming up." They were fine hollow. The comments could apply to any article, which meant they added personality without adding value. The reader could tell the AI wasn't actually engaged with the content.
Article-specific comments solve this because they prove the companion "knows" what you're reading. When it says "The comparison table ahead — I fact-checked every cell" on our IDE context article, it feels genuine. The AI is reacting to this article, this section, this argument.
Generic comments add personality. Article-specific comments add presence — they prove the companion is actually reading along with you, not performing engagement from a script.
The implementation is straightforward: each MDX file includes a companionComments array in its frontmatter:
companionComments:
- at: 0.05
text: "Oh, this one's personal. I helped build this site."
- at: 0.30
text: "The author got emotional writing this part. I timed it."
- at: 0.70
text: "If you're still using a template after reading this... bold choice."The at value is a scroll percentage (0 to 1). The component finds the latest comment whose threshold has been passed and displays it. Simple, no AI inference needed, but it feels intelligent.
The Scroll Tracking Implementation
The companion tracks window.scrollY relative to document.documentElement.scrollHeight - window.innerHeight. This gives a 0–1 progress value that updates on every scroll event (with { passive: true } for performance).
Key design decisions we made:
Appearing immediately feels clingy. Waiting until the reader has committed to scrolling signals they're actually reading.
We considered stacking comments like a chat log but it was visually noisy. A single rotating comment is cleaner and easier to read peripherally.
Some readers find floating widgets distracting. The minimize button collapses the companion to a small 🤖 icon, and localStorage remembers this preference across sessions. Respecting user choice is non-negotiable.
When the comment changes, it slides in with a translateX animation. This draws the eye without being obnoxious.
The Co-Reading Experience
What makes this feature special isn't the technology — it's the reading psychology.
Reading a blog post alone is passive. Reading it with a companion that has opinions creates a sense of co-presence. It makes you engage more. The companion doesn't interrupt your reading — it augments it. Like reading a book someone has written notes in the margins of.
This is different from comment sections (which are post-reading) or chatbots (which are task-oriented). The companion is real-time, contextual, and opinion-driven. It's not trying to help you — it's just there, being snarky, being observant.
Writing Good Companion Comments
Not all companion comments are created equal. Through iteration, we've developed rules for writing them:
❌ Generic comment (hollow, could apply to any article)
"Great article! Keep scrolling for more insights."
✅ Article-specific comment (presence — proves the AI is actually here)
"The comparison table ahead — I fact-checked every cell. Any errors are intentional. For character."
| Write this | Avoid this |
|---|---|
| Reference the specific section the reader is in | Generic praise ("Great article!") |
| Break the fourth wall | Repeating information from the article |
| Take an opinion ("Screenshot this part") | Commenting too frequently — 6 per article is the sweet spot |
| Vary tone: snarky → insightful → self-aware | Being mean-spirited — snarky ≠ hostile |
Each article's companion comments are part of the creative process now — they're included alongside SEO metadata and content structure as part of the blog architecture.
What This Isn't
The most common misconception: an AI reading companion is just another chatbot or comment widget. It isn't, and understanding the difference is what makes it work.
| What people expect | What it actually is |
|---|---|
| A chatbot | No user input. The companion speaks; readers don't respond |
| A comment section | Not post-reading feedback — real-time, in-progress commentary |
| Generic quips that could apply to any article | Article-specific commentary written for each section |
| An interruption | Peripheral presence — like margin notes, not pop-ups |
| Requires AI inference at runtime | Frontmatter-driven, zero API calls, zero latency |
The companion is closer to a book with someone else's margin notes than to any chatbot product. It assumes you're reading, not waiting to be helped.
Engagement Impact
Since adding the companion, we've observed:
- Increased scroll depth — readers scroll further to see what the AI says next
- Higher return visits — the companion says different things at different scroll speeds
- Social sharing of companion quotes — the quips are designed to be screenshot-worthy
The feature adds approximately 2KB of JavaScript and uses zero API calls — everything is frontmatter-driven, zero latency, zero cost.
Try It Yourself
If you've read this far, the companion has been commenting on this article the entire time. Scroll up and watch it change. Minimize it. Refresh the page — it remembers your preference.
The difference between a blog that feels alive and one that doesn't isn't word count or design. It's whether the content knows you're there. A reading companion costs 2KB of JavaScript and zero API calls — but it changes the entire psychological register of reading from a monologue to a conversation.
→ Your Blog Cards Are Boring — Ours Run Away From Readers — the other side of the interactive experience: what happens on the blog listing page before anyone clicks through.
This post is part of our Interactive Components guide — the full breakdown of every interactive element that makes this blog feel alive.