Eject cartridge
03 DOM DEFENSEv1.3.1 / MIT

Swarm ProtocolProtect every last byte.

Release a swarm onto the page, then defend it. Bugs eat letters into binary, evolve, and drain your buttons. Squash them before the interface falls apart.

Play uses the selected build. Notes below describe the current release.

Created by · coded.design

DOM DEFENSEDOM / ACTIVE SURFACE
THE PAGE ISTHE PLAYFIELD.
The original DOM experiment.ARCADE SIGNALS / DOM TERRAIN
34.6 kBgzip · full immediate path
48bug cap
36Range reads / frame
240nearby glyph cache
MEET THE CHARACTERS

Know who’s on the page.

  • You · aim and squash

    Cursor target

    Move the crosshair over a bug and click to hit it. On touchscreens, tap the bug directly. Larger bugs can take more than one hit.

  • Tier 1

    Crawler

    Starts with one hit point. Feeds on real letters, changing each bite to 0 or 1. Squash it before it grows.

  • Tier 2 · 6 letters

    Evolved crawler

    After six letters it grows and gains one hit point. Earlier damage still counts; evolution does not fully heal it.

  • Tier 3 · 12 letters

    Button hunter

    After twelve letters it grows again and gains one more hit point. It hunts buttons, bites text on the way, and drains button integrity.

THE LOOP
  1. 01Release the swarm
  2. 02Defend the buttons
  3. 03Rescue distant attacks
  4. 04Recall the page

Know your controls.

  • Click/Tapsquash a bug
  • Scrolloutrun the swarm
  • Edge alertspaid Jump or Jump + Zap
  • EscRecall and restore the page
  • Scoreboardsoundpause / resumeminimizeRecall

Sound starts after your first input. Minimize keeps the game running; Recall restores the page.

A swarm with different priorities.

Bugs arrive inside your viewport near the pointer. Small bugs stay near local food and buttons. Grown hunters keep their assigned mission, biting letters already in their path. Scrolling can outrun the swarm; attached bugs track their target geometry while free bugs retain their document position.

The button is a living health bar.

The first bite fades the button to mint green. Yellow starts at 75% health, then coral red at 35%. Damage drains a fill behind the real label. Desktop surfaces ripple and bubble; mobile uses stable native CSS gradients and quiet radial bubbles. The label, icon and original handler remain part of the host page.

NERD NOTES · GITHUBHow Swarm Protocol works under the hoodEngineering notes, budgets and source in the README

Swarm Protocol on your site.

Established Swarm engine

swarm-protocol.jsJS / ESM
import { installSwarm } from "@chriscooley/swarm-protocol";

const swarm = installSwarm({
  textSelector: "[data-swarm-text]",
  targetSelector: "[data-swarm-target]",
  keyboard: false,
  triggerSelector: false,
});
await swarm.start();
// Later: swarm.destroy();
Choose your elements. Start playing.