Trace frame rate lag with a sexy performance radar
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
index.html fix problem where induced lag would have skip some frames Apr 3, 2018
lag-radar.js factor out arcs array Mar 29, 2018


It's a sexy little lag radar for demonstrating performance - or lack of.

Add this to any javascript application and you can see when the app drops below 60fps as the radar sweep changes colour and gets janky.



The radar is published as a zero dependency es6 javascript module.

import lagRadar from './lag-radar.js';

const destroy = lagRadar({
  frames: 50,    // number of frames to draw, more = worse performance
  speed: 0.0017, // how fast the sweep moves (rads per ms)
  size: 300,     // outer frame px
  inset: 3,      // circle inset px
  parent: document.body, // DOM node to attach to

// later ...

It also exposes css class hooks for styling the radar

To run the demo

npm install
npm start
open http://localhost:9080/


This version authored by @mobz with ideas and contributions from others for this talk by @dan_abramov and shared to the world with love.