LightUp

AI-Powered Annotations for every page on the web. December 2024

LightUp

Project Overview

Visit Live
Product DesignChrome ExtensionOpen SourceAI/ML
Video preview

Platform

Chrome Extension

Role

Solo Designer & Developer (0 → 1)

Traction

668 installs · 252 weekly active users · 37.7% retention

Marketing

$0 funding. $0 Marketing spend. 100% organic growth

Timeline

6 Months

The Space Between

The moment between not knowing and knowing—without breaking your reading flow.


The web was built for publishing, not understanding. Every page assumes you already know what you're reading. When you don't—you leave. You copy text, open a new tab, paste into a search bar, skim results, try to remember the answer, hunt for your original tab among seventeen others. By then, you've forgotten why you were reading.


That forgetting isn't random. Studies put the refocus cost at around 23 minutes per interruption. But even that number undersells it—what you lose isn't time, it's state. The thread you were following. The question you were about to ask. The momentum.


I kept thinking: the problem isn't finding answers. It's that finding them requires leaving. What if you didn't have to? What if understanding could happen right where confusion starts—on the same page, in the same breath?


That's the space LightUp lives in. The moment between not knowing and knowing, without the rupture in between.

Boxes Inside Boxes

A mental model of knowledge as nested boxes, each answer opening the next.


Once I had the problem clear, a mental model emerged.


Knowledge isn't flat. It's nested—boxes within boxes. You understand one thing, and inside it is something else to understand. Each answer opens new questions. The shape of learning is recursive.


This became the design principle: highlight a sentence, a small window opens. Ask a follow-up, another layer appears. You're still on the same page, but you've gone somewhere. Each answer becomes a foundation for the next question.


LightUp represents how knowledge actually grows—contained yet infinite, simple on the surface yet deep underneath.

(Knowledge as nested boxes—each highlight opens a new layer.)

What Had to Be True

With the model clear, I set constraints before writing any code. Three things had to be true:


Reduce context switches. Get answers without leaving the page. If the user opens a new tab, I've failed.


Preserve flow. Under 2 seconds from highlight to insight. Slow enough to notice is too slow.


Earn attention organically. No marketing budget. With no budget, the only growth lever is product quality.

One Moment, Many Tensions

Here's what makes browser extensions strange: you're building on someone else's canvas. Every website has different fonts, colors, moods. You don't control any of it. You have to appear without jarring, adapt to infinite contexts, and disappear completely when not needed.


That single moment—when you select text and LightUp appears—contains every design decision. And every decision exists in tension.

Consistent vs. Adaptive

Have identity, but fit anywhere.


Dark sites, light sites. Dense academic papers, minimal landing pages. Aggressive security policies, weird font stacks. LightUp had to look like itself while never breaking the page it lived on.


The brand carries this same tension. The logo is an eclipse—light returning after darkness. In Arabic: الكسوف (al-kusuf). The imagery draws from thinkers across history—philosophers, scientists, builders. Not decoration. Lineage. Knowledge building on knowledge, like boxes inside boxes.

Present vs. Invisible

Be helpful, but never intrusive.

The first version showed a popup automatically the moment you finished highlighting. Good idea in theory. In practice? Users sometimes just want to highlight text without any bubble appearing.

After talking one-on-one with teachers, students, and CEOs, I changed it: now a small icon appears after highlighting. Hover to choose what to do, or ignore it entirely. Control stays with the user.

This wasn't a feature decision—it was a philosophical one. The tool should feel like it's waiting for you, not demanding from you. Present when needed. Invisible when not.

Powerful vs. Simple

AI is complex, the interface can't be.

Highlight any text → a compact popup appears with clear options: Explain, Summarize, Translate, or Ask anything. Keyboard shortcuts for power users. no assumptions, no noise.

But beneath this simplicity lives real depth. Gemini, Grok, OpenAI, and 10+ local AI providers. Context-awareness that understands the page you're reading. Customizable popup positions, highlight colors, and behavior toggles.

The popup has a simple design on the surface, but if you want the settings, there's a way to enter and see the real capability of the extension. None of it clutters the main experience.

Building on Someone Else's Canvas

Accept the platform as law, then push the edges inside it.


The tensions above shaped the design. But Chrome's environment shaped the engineering—through constraints I had to treat as laws.


While I was working on LightUp, The Browser Company was teasing Dia, their AI-first browser. They had been hinting at a more AI-centric product since October 2024 and then, on December 2, 2024, properly revealed Dia—two days before LightUp's first public beta.


Watching a team with real capital go all-in on owning the browser itself made something obvious feel concrete: platforms are one of the most powerful forms of leverage in modern networked economies. If you own the canvas, you decide what tools and behaviors are even possible on top of it.


LightUp chooses a different kind of leverage. It doesn't own the browser; it specializes in being the intelligent layer that slips into whatever browser people already use. Rather than trying to compete with The Browser Company, I treated Chrome as a hard boundary and focused on building the sharpest possible tool inside that constraint.


That choice hardened into a few non‑negotiable rules for how LightUp behaves inside Chrome.


Don't exist until needed. Extensions can slow everything down. The content script that loads on every page is ~1KB. The full React app only injects when you interact. Memory stays near zero most of the time.


Never touch the host. Shadow DOM encapsulation keeps my styles mine and theirs theirs. No CSS bleeding in or out.


Privacy by structure, not policy. Conversations live in memory only. No disk. No sync. When the tab closes, everything disappears. This isn't a promise—it's architecture.


Surface and Depth

One philosophy across two layers: simple first, deep when invited.


At a distance, it feels like a single UI. In reality it's split into two layers: a surface for staying in the reading flow, and a deeper layer for shaping how the tool thinks.


The design goal was that you never have to learn two products. You just notice that when you need more control, the same mental model continues—boxes inside boxes, but now in the interface itself.

The Popup

The surface you meet while reading—fast, quiet, and close to the text.


the front of LightUp. It's what most people ever see: a compact window that sits on top of the page, fast and quiet. Highlight text, pick an action, get an answer. No dashboards, no extra chrome, no mental mode switch.


On the surface, it looks like a tiny UI—just enough controls to feel obvious. Underneath that simplicity sits all the logic for context, AI providers, and state. Every extra control was treated as a direct tax on reading: if you can't understand it in one glance while still tracking your sentence, it doesn't belong in the popup.

(Popup anchored to bottom in light mode)
(Popup anchored to bottom in dark mode)
(Centered popup layout in light mode)
(Centered popup layout in dark mode)
(Floating popup layout in light mode)
(Floating popup layout in dark mode)
(Popup navigation in light mode)
(Popup navigation in dark mode)
(Sidebar popup layout in light mode)
(Sidebar popup layout in dark mode)

The Settings

All the sharp edges, tucked away where only intention finds them.


If the popup is the surface, the settings are the back-of-house. Here you choose providers, tune how much context they see, and decide how the popup behaves—positions, highlight colors, shortcuts, and triggers. All the sharp edges live here instead of leaking into the main experience.


The design leans on progressive disclosure: default settings are safe and useful for students, teachers, and non-technical readers. Power users can open this layer once, wire up multiple models and behaviors, then go back to reading. The complexity is real, but it's contained in a place that respects attention.

What I Had to Unlearn

From building for myself to building for the people actually using it.


I started building for myself. It's a solid first block to build on—but not a foundation you can keep building on alone.


"My way is the right way." That's the exact trap of building only for yourself—your preferences feel universal until real people push back. The first version fired automatically—highlight text, popup appears. I loved it. Users hated it. They wanted to highlight without being interrupted. So I added choice: auto-popup or a subtle icon that waits. My preference didn't get to be the default.


"Everyone knows this." I made API keys required to start. Trivial to me—just paste it in. For non-technical users, it was a wall. I added a free tier: limited daily actions, no configuration needed. Try first. Configure later.

The Weight of Decisions

Every feature is a tradeoff in attention, not just another checkbox.


What stayed with me:


Attention is the product. I thought I was saving time. I was actually protecting state—the thread, the momentum, the focus. A tool that saves seconds but shatters concentration is worse than nothing.


Features are taxes. Every addition costs something. Retention improved when I removed things. The product became useful by refusing to ask too much.


Intuition is hypothesis. Gut feelings start the work. Feedback finishes it. You can't shortcut your way to product sense—you have to build, ship, and watch what actually happens.


Building product is one of the hardest and most rewarding things you can do. It isn't just design or code—it's the messy, deeper work of stitching together judgment, tradeoffs, and care into something people invite into their lives.


Over time you start to see the human characters inside the product. There are pieces of you in the product, and pieces of everyone who uses it inside of it. And as much as you try to shape how people read and learn, the thing you build ends up shaping you back.

Resonance

Impact measured in how it lands with people, not only in charts.


Zero marketing spend. Zero funding.


668 installs. 252 weekly active. 37.7% retention. Project of the day on Peerlist. Listed among the top 9 AI data annotation tools on SaaSHub and in AI directories like AITrendyTools. Recognized as a top‑10 builder on a global platform of over 170,000 builders.


But the numbers matter less than the pattern: students using it to stay with dense pages, a teacher introducing LightUp to an entire class, a CEO cold-emailing just to say thank you. Those are the kinds of responses you can't really put a price on.


The product found its people through the question it answers: What does this mean?

Video preview