Inspiration

Most bookmark managers treat links as data, flat lists sorted alphabetically or by date. I wanted bookmarks to feel like a living space that reflects how you actually browse, not how you think you browse. Option 2's theme of environments that grow and shift based on user behavior over time was the perfect fit.

What it does

Bookmarky turns bookmarks into floating bubbles governed by physics. Every time you click a link, its bubble grows. Over time, the layout organically reshapes itself, frequent destinations become larger and more central, forgotten ones shrink to the edges. You drag bubbles to rearrange, paste URLs to add, right-click to edit or delete. The space remembers your behavior between visits.

How I built it

Built as a single React component using Framer's AI. The physics used: center attraction, inter-bubble repulsion, boundary collision, and friction all calculated per frame. Favicons are pulled from Google's favicon service. State persistence uses session or local storage. All styling is inline with glassmorphism, backdrop blur, layered transparency, and soft shadows.

Challenges I ran into

Getting drag and click to coexist on the same element without false triggers. I solved it with a movement threshold, if the pointer moves more than 5px during a press, it's a drag, otherwise it's a click. Keeping the physics stable with many bubbles at different sizes also took tuning, too much repulsion and they fly apart, too little and they overlap.

Accomplishments that I'm proud of

The whole thing is one file with zero external dependencies beyond React and Framer Motion. The physics feel natural without a library. Duplicate detection, live URL preview, edit/delete flows, and persistence all work cleanly. The space genuinely looks different after a week of use compared to day one.

What I learned

Intentional friction can be a feature. The slight delay on click, the organic layout, the lack of sorting, these slow things down in a way that makes the interaction more meaningful. I also learned that simple physics tuning (five parameters) can produce surprisingly rich emergent behavior.

What's next for Bookmarky

  • Decay over time: bubbles that haven't been clicked in weeks slowly shrink, so the space reflects recent habits, not just total history
  • Clusters: bubbles from the same domain drift toward each other, forming natural groupings
  • Shared spaces: multiple users contributing to the same bubble canvas
  • Import/export: bring in bookmarks from browsers and export the living layout as a snapshot

Built With

  • framer
Share this project:

Updates