Introducing Pop: The Portal of Portals
Tabs are everywhere. It’s not just Web Browsers that use tabs these days. File managers, graphical DB clients, terminal emulators and terminal applications all use tabs.
When was the last time you didn’t see a browser window with dozens upon dozens of tabs open? The page title hardly visible, favicon to the left, x-button to the right. That x-button feels dangerously clickable by accident. Don’t windows, tabs, and browser history work?
Looking for a page looks like playing roulette across the tab bar. Where will I land? Ah, yes, that mini page view on hover. How helpful. Regardless, you’ve got to guess at the relative proximity of the tab you want, and then… Ooopps! You got to where you wanted but where were you just at? Opening a new page incurs a huge context-loss.
Now we’ve got horizontal tabs, and vertical tabs, and grouping tabs, and splitting tabs. These are all solutions to the problem we’ve made of tabbing. Is there a better way?
A single page is centered when you start. There are at most three pages fully visible. The current page is centered, any pages preceding it in your navigation history are to its left, and any succeeding it are to its right (if you’ve clicked back in time).
Clicking on a Gemini link will open the page side by side, to the right of center, slide into place, and push any preceding pages to the left.
Clicking on any visible page will center it.
Immediate context stays within view and recent history is within reach. Your cursor does not need to travel as far from content to navigation. You are free to jump back and forth in order to explore history or a different path.
The Gemini universe is perfect for developing this interface and an intuition for it. It is:
- Simple: so it was workable quickly. I could focus on the interface itself.
- Connected: so as to demonstrate through obvious connection and relationships.
- Plentiful: so there was ample content with which to demonstrate.
- Real: content that is compelling in its own right.
The interesting development/design notes and observations I made along the way:
-
The easing on the horizontal sliding is really important so that the eye can track where it should go.
-
A lot of carousel or carousel-like interfaces provide left and right buttons, or a vertical bar top-to-bottom on each side (as in the Rust documentation), with which to navigate to navigate leftward and rightward. Instead, Pop reveals a fraction of the pages left and right, to serve as navigation aids, increase visual consistency, and enable the sliding effect.
-
The orientating effect of the dots and sliding window are worth the space at the bottom of the screen. It is a minified abstract map that mirrors and reinforces the mechanics of the view.
-
The URL in the Web Browser (not the Gemini URL) is shareable including the page that is in-focus. This was inspired by the Federated Wiki.
-
Placing a page’s Gemini URL in Pop’s address bar instead of on the page in a title-bar meant that I could get more space for the content.
-
The way content is loaded deliberately mimics what real “new” interactions are like, i.e. loading left to right in sequence, rather than in parallel, as a sort of initiation or reminder of the interface.
-
I tried a collapsible panel in an earlier version before realising it was antithetical to preserving context.
It’s worth noting that to accomplish (2) it was easier to do so visually if the pages are boxes, a vertical rule/line is more challenging, which I realized when trying to simplify as much as possible.
Let me tell you a bit about the inspiration for Pop, and similar interfaces I discovered along the way, in chronological order:
-
The Glamorous Toolkit (GT) is by far the biggest inspiration. I’ve wanted to port its more general interface and replicate it ever since, again and again, in different contexts.
-
Slide-over preview-panes on the RHS, as seen in Notion, always felt limited after the experience of working with GT. They are just one level deep. I kept experiencing this limitation accross the Web and native interfaces.
-
Obsidian has Tab Stack Groups but the experience was lacking for me.
-
I discovered The Federated Wiki where I saw a left to right cascade of this sort of interface on the Web for the first time.
-
I experimented with interactive fiction as content.
-
I joined Alembic and worked on a Proof of Concept to browse data in Ash applications. I got excellent results working with Claude Code and Cursor, but development was driven through a test-bed, GUI interaction, and prompting. The code needed a lot of work. I did see what was possible, how to accomplish it, and I refined the interaction.
-
In an effort to document prior art, I went back to Obsidian to look up their documentation, which cited Andy Matuschak as their inspiration.
-
A friend likened the left-to-right cascade to the options screens on games.
-
Around the same time I realize Xanadu must have been an indirect antecedent to all of the above.
-
A friend pointed me to Miller Columns after sharing an early version. I was completely unaware that anything similar had a name. Miller Columns seem to focus on lists however, and they appear to be more static, most familiar to myself at least from OS X’s Finder view.
Pop is really an exercise in building the left-to-right cascade that grows dynamically on the Web while styling it like the contemporary interfaces of Notion or Linear. Jennifer Tidwell and Tufte’s work certainly played a part in understanding what I saw and how it developed.
This is not a perfect interface, and it is not a perfect instantiation of it, there are limitations. Future work could include:
- A mobile version
- A forking/branching feature
- Preserve vertical scroll when link shared and an indicator on what you clicked
- Panels that snap left, middle, and right
- Swipe left/right and arrow-button support
- A light theme
- Experiment with CSS page transitions to make the technical implementation lighter
Pop has been a really fun way to explore the Gemini universe! It was a lot of fun building it too.
One final observation is that the interface resembles a list zipper with a sliding window instead of a single-element cursor. Joel Spolsky suggested that most good interfaces have a simple data structure or model behind them. Spreadsheets as in Excel are obviously good at tables. Kanban boards as in Trello are a list (of lists). Pop is a (sliding) window on list zipper.