git404hub

what is hypurr-harbor fr?

quicknode/hypurr-harbor — explained in plain English

Analysis updated 2026-07-25

2TypeScriptAudience · generalComplexity · 3/5Setup · moderate

tl;dr

A pixel-art harbor visualization for the Hyperliquid blockchain where pending transactions appear as cats on a pier and confirmed blocks sail them away on boats. Runs in the browser with live on-chain data.

vibe map

mindmap
  root((repo))
    What it does
      Live blockchain art
      Cats are transactions
      Boats are blocks
    Visual details
      Golden cats pay priority
      Size shows order type
      Hover to pet cats
    Tech stack
      Vite and TypeScript
      PixiJS for rendering
      Node relay server
    Use cases
      Watch live chain activity
      Demo without credentials
      Self-host on Railway
    Audience
      Crypto enthusiasts
      Visual learners
      General audience

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Watch live Hyperliquid blockchain activity as a playful pixel-art harbor scene in your browser.

VIBE 2

Run in demo mode with no credentials to see synthetic traffic and explore the visualization.

VIBE 3

Self-host on a VPS or Railway with a Quicknode endpoint to display real mainnet transaction data.

VIBE 4

Use as an educational tool to understand how pending transactions get confirmed into blocks.

what's the stack?

TypeScriptVitePixiJSNode.js

how it stacks up fr

quicknode/hypurr-harbor4ssh1/mine-sweeperachawla19/intuitcode-extension
Stars222
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-01-31
MaintenanceMaintained
Setup difficultymoderatemoderatemoderate
Complexity3/52/54/5
Audiencegeneralvibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · moderate time til it works · 5min

Runs immediately in demo mode with Node 20+, but connecting to live data requires a Quicknode Hyperliquid endpoint and API token.

No license is mentioned in the explanation, so default copyright restrictions may apply.

in plain english

Hypurr Harbor is a playful pixel-art visualization of the Hyperliquid blockchain's live activity. Instead of showing raw data on a chart, it renders a tiny retro harbor scene in your browser. Every pending transaction appears as a cat sitting on a pier, and every confirmed block arrives as a boat. When a block confirms, the cats whose transactions made it into that block hop aboard and sail off. Transactions that never confirm simply slip through the planks into the water. The cats are deterministic: the same transaction always produces the same cat, with coat, markings, and name derived from the transaction hash. Visual details carry meaning. Golden cats are orders paying a priority fee, high-visibility cats are cancel orders, and cat size reflects the order type, from tiny cancels to large whale transfers. The boarding order mirrors the real consensus sequence the blockchain uses. You can hover to pet a cat, click to pin a live info card that updates as the transaction confirms, and hunt for easter eggs hidden in the scene. Under the hood, a small Node relay server subscribes to two live data streams from a single Quicknode Hyperliquid endpoint: one for pending transactions and one for block confirmations. It rebroadcasts every event to your browser immediately, with no batching or delay, so what you see on screen matches real on-chain timing. The relay also translates numeric asset IDs into coin names, anchors block numbers to match what explorers show, and shuts down its upstream streams when nobody is watching to avoid wasting resources. The frontend is built with Vite, TypeScript, and PixiJS for rendering. All sprites are drawn procedurally with no image files, and audio is synthesized in the browser, except for one real cat meow used under a Creative Commons license. To run it locally you need Node 20 or newer. With no credentials it starts in demo mode, generating synthetic traffic. Add a Quicknode endpoint and API token to connect to live mainnet data. You can host the whole app as a single process on any platform that keeps a long-running server alive, such as Railway or a VPS.

prompts (copy fr)

prompt 1
How do I set up Hypurr Harbor locally with a Quicknode endpoint to show live Hyperliquid mainnet data instead of demo mode?
prompt 2
What do the different cat colors and sizes mean in the Hypurr Harbor visualization, and how do they map to transaction types?
prompt 3
How can I deploy Hypurr Harbor to Railway so the relay server stays running and streams live blockchain data to visitors?
prompt 4
How does the Hypurr Harbor relay server subscribe to pending transactions and block confirmations, and how does it rebroadcast them to the browser?

Frequently asked questions

what is hypurr-harbor fr?

A pixel-art harbor visualization for the Hyperliquid blockchain where pending transactions appear as cats on a pier and confirmed blocks sail them away on boats. Runs in the browser with live on-chain data.

What language is hypurr-harbor written in?

Mainly TypeScript. The stack also includes TypeScript, Vite, PixiJS.

What license does hypurr-harbor use?

No license is mentioned in the explanation, so default copyright restrictions may apply.

How hard is hypurr-harbor to set up?

Setup difficulty is rated moderate, with roughly 5min to a first successful run.

Who is hypurr-harbor for?

Mainly general.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.