Radar Runner

Dive into slopes, soar off hilltops, outrun the night.

Play Radar Runner Hide game

How to play

Hold (click, tap, or Space) to dive heavy into slopes. Release to float light and soar off hilltops. Fly as far as you can before nightfall catches you.

Land 5 perfect dives in a row to trigger Fever Mode.

Install

bun add @alexbruf/radar-runner    # or npm install

Or load from a CDN — no build step needed:

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@alexbruf/radar-runner/dist/radar-runner.js">
</script>

Usage

<!-- That's it -->
<radar-runner></radar-runner>

Set an explicit size, or let it fill its container (max 640px, 8:5 aspect ratio):

<radar-runner width="800"></radar-runner>
<radar-runner height="300"></radar-runner>

Collapsed mode

Add collapsed to start as a button. The game chunk (~55 KB) only downloads when the user clicks — zero cost until they engage.

<radar-runner collapsed>
  <span slot="open">Play a game</span>
  <span slot="close">Hide game</span>
</radar-runner>

Theme

Follows prefers-color-scheme by default. Override with:

<radar-runner color-mode="dark"></radar-runner>
<radar-runner color-mode="light"></radar-runner>

Framework wrappers

Thin wrappers for React, Preact, and Vue — under 1 KB each:

// React
import { RadarRunner } from '@alexbruf/radar-runner/react';
<RadarRunner width={640} colorMode="dark" collapsed />

// Preact
import { RadarRunner } from '@alexbruf/radar-runner/preact';
<RadarRunner width={640} collapsed />

// Vue
import { RadarRunner } from '@alexbruf/radar-runner/vue';
<RadarRunner :width="640" :collapsed="true" />

Styling

CSS custom properties for the toggle button:

radar-runner {
  --rr-toggle-bg: #1a1a2e;
  --rr-toggle-color: #e94560;
  --rr-toggle-radius: 12px;
  --rr-toggle-padding: 12px 32px;
}

Or use ::part(toggle) for full CSS access. In-game buttons expose ::part(btn-help), ::part(btn-pause), and ::part(btn-reset).

Architecture

File	Size (gzip)	Contents
`radar-runner.js`	~3 KB	Web component shell, loading, theme, sizing
`radar-runner-game.js`	~55 KB	Planck.js physics + game logic (lazy-loaded)

Terminal version

█▀▄

There's also a standalone terminal version that renders the same Planck.js physics using Unicode braille characters. Grab a prebuilt binary from Releases, or run from source:

bun tui.ts