Well I built something and it actually works :radar:.

For the past few weeks I’ve been working on a feature for this site called the Radar. It’s a 360° canvas visualization that maps everything I consume — videos, books, music, games, dev projects — onto a circular space. Status rings tell you where things are in my life: watchlist, active, or done. Click an entry, get a tooltip. Toggle to grid view if the canvas feels overwhelming.

What is the Radar?

Think of it as a real-time snapshot of my media diet. Each entry is a colored dot on a 2D canvas. Distance from center = status. Angle = distributed so nothing overlaps. Color = category.

Hover over a dot, you get a card: poster on top, title, metadata, badges for category/subtype/status, links to the original source or a related blog post.

There’s a rotating sweep line that does a full rotation every 4 seconds. It’s not functional; it’s just pretty. If you prefer reduced motion, it stops.

Why I built it

I’ve been thinking about how I consume media for a while now. Most people use apps: Letterboxd for movies, Goodreads for books, Spotify for music. But I like having control. I wanted one place where I could see everything at once, organized the way I think about it.

A grid is fine. But a circle felt right. There’s something about radial layouts that makes browsing easier — everything is equidistant from the center, no left-to-right bias. And the visual metaphor: a radar actually detects things at different distances and angles. Your media consumption is a bit like that. Some things are close (actively consuming). Some are far away (wishlist). Some just exist on the periphery.

Plus, making something visual is more fun than staring at a list.

How it works

Canvas rendering

The radar draws in Canvas 2D (not WebGL, not Three.js). The setup:

  • Outer circle: 700px max, scales down on mobile
  • Rings: Three status zones. Watchlist gets one ring. Active gets two (so you can see multiple things in progress without overlap). Done gets three (history).
  • Entry placement: Each entry gets its own space without overlap, distributed with a bit of chaos so it feels natural.
  • Dot shapes: Watchlist = filled with glow. Active = larger, semi-transparent. Done = small solid circle.
  • Sweep line: A rotating radial line from center, 5-arc glow trail, reads the theme color (magenta light, green dark).

Interaction

Hover over a dot → tooltip appears. Move your mouse away from the tooltip → it disappears. Simple. No timer. No “wait 60 seconds for it to vanish” nonsense. The tooltip positions itself smartly: if it would overflow the viewport, it flips left/right/up/down and clamps to keep everything visible.

Click the “Grid” button to switch views. Same data, different layout: categories as sections, cards in a grid, all the same styling.

Personal take

Building this was satisfying in a way that most web work isn’t. Most features are about solving a problem someone else has. This was pure indulgence: “what if I visualized my media consumption in a weird way?” And then I did it.

The interesting bit was the placement algorithm. Random dots on a canvas are boring and overlap. A smarter distribution feels intentional without being rigid. Each entry gets its own space, but nothing is locked in a grid. It’s chaotic but organized.

I also liked the constraints. No third-party positioning libraries. No 3D rendering. Just Canvas 2D, CSS, a little math, and some clever hover logic. Constraints force clarity.

The radar is live now. It’s in the nav. Add entries to it when I consume something new. Eventually it’ll be big enough that the visual gets crowded, and I’ll have to think about how to handle that. Zoom? Filtering? For now, it works.

Conclusions

  • A circle is a better way to browse than a list. Fight me :spiral:.
  • Smart placement beats pure chaos and pure order ⚖️.
  • Build things for yourself first. The best features are the ones you actually use 👀.
  • Canvas 2D is underrated. Not everything needs fancy rendering 🚀.
  • Tooltips don’t need timers. Hover + leave is cleaner :cursor:.
  • A rotating line makes anything feel alive ✨️.
  • The grid fallback matters. Not everyone wants the canvas :grid:.

The well got a new feature. 🐸