Open Source

collide.js

IntersectionObserver for any two elements. collide.js fills the gap the browser leaves — proximity detection, collision events, and time-to-collision metrics between arbitrary DOM elements — with AABB or circle shapes, relative velocity, and a single shared requestAnimationFrame loop that batches reads and stops when idle. 2.1KB gzipped, zero dependencies, TypeScript-first, MIT.

TypeScriptIntersectionObserverCollision DetectionProximityTime to CollisionVelocity TrackingAABB + CircleShared RAFZero DependenciesESM + UMDOpen SourceMIT License

Visit Live Site

The Problem

Challenge

The browser ships `IntersectionObserver`, but it only compares an element against the viewport (or one ancestor). There's no built-in way to ask the far more common question: is *this element* near, overlapping, or on course to collide with *that other element*? Teams end up with ad-hoc `getBoundingClientRect` polling in every scroll/animation frame — duplicated per feature, unbatched, leaking performance on layout thrash. Drag-and-drop libraries, magnetic snap, collision-aware animations, and proximity-based UI all need the same primitive, and none was available under 2KB.

Our Approach

Strategy

We built collide.js around a single shared RAF loop that reads every observed pair once per frame, batches all DOM measurements, and stops automatically when no pair is active. The `Collide.watch(a, b, opts)` API emits `near` / `collide` / `separate` / `leave` / `tick` events with a rich metrics payload — distance, overlap, direction, angle, relative velocity, and estimated time-to-collision in seconds. Shapes support AABB (default) and circle for organic UI, with cross-shape (AABB ↔ circle) handled. `Collide.check(a, b)` and `Collide.shapes(sA, sB)` give instant one-off snapshots for imperative code paths. The landing page ships live demos: draggable balls that connect with lines when within 140px and flash on collision, drop zones that glow orange as a card approaches and turn green on overlap, and a magnetic snap demo where a node pulls toward a target within 120px with easing.

The Solution

Result

A 2.1KB gzipped, MIT-licensed collision and proximity library with zero runtime dependencies. One shared RAF loop, AABB + circle shapes, velocity + TTC metrics, and an event-driven API that scales from two elements to hundreds. Ships ESM, UMD, and full TypeScript declarations. Deployed on Vercel at collidejs.techzunction.com with an interactive docs site that lets visitors drag, drop, and collide shapes directly on the page.

Screenshots