█▀█ █▀█ █▀█ ▀█▀ █ █ ▄▀▄ █▀█ █▀▄ █▀█ █ █ █▀█
█▀▀ █▄█ █▀▄ █ █▀█ █▀█ █▀▄ █▄█ █▄█ █▄█ █▀▄
Computer ports on a pixel-art harbour. Pun + pleonasm (port = harbour). Both intended. 🚢
⭐ Now on the VS Code Marketplace: Port Harbour.
Your listening sockets are fishing boats moored at the seawall. Your Docker containers light up windows in the red palazzo on the right. The cathedral keeps real time. The lighthouse rotates. The sun rises and sets with your system clock.
Each LISTEN row is a boat at the seawall. Click one to inspect.
Install
Install from the VS Code Marketplace, or search for Port Harbour in the VS Code Extensions view.
After installing, open it from the Port Harbour Activity Bar icon, the Port Harbour status bar item, or the command palette command Port Harbour: Open.
Run from source
- Open this folder in VS Code.
- Press F5.
- In the new window: ⌘⇧P → Port Harbour: Open.
Click any audio toggle to wake up the sea, bells, and retro music (browsers gate Web Audio).
Things to look for
- 🌅 Day/night cycle (golden hour is the prettiest)
- ⛪ Someone waving from the cathedral window
- 🐱 Two cats. One has spots.
- 🐋 A whale. Dolphins. A sea serpent. Glowing jellyfish at night.
- 🛸 UFOs at 3 AM (rare)
- 🍾 A bottle drifting past with a love note
- 🌈 Konami code → CRT mode
No VS Code? There's a TUI
cd rust && cargo build --release
./target/release/portharbour
q quit · / filter · s sort · k kill PID · ? help.
Build
Needs Node 24+ and Rust.
cd rust && cargo build --release && cd ..
npm install && (cd webview-ui && npm install) && npm run build
Credits
Art inspired by Igor Grincu (LinkedIn). His harbours are hand-painted. Mine are drawn by code in a <canvas> at 30 FPS.
License
MIT.