Skip to content
/ lag-radar Public

Trace frame rate lag with a sexy performance radar

Notifications You must be signed in to change notification settings

mobz/lag-radar

Repository files navigation

LagRadar

It's a sexy little component for demonstrating performance - or lack of - in your javascript application.

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

npm i lag-radar

Usage

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

import lagRadar from 'lag-radar';

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 ...
destroy();

It also exposes css class hooks for styling the radar

To run the demo locally

npx http-server
open http://localhost:8080/

Genesis

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

About

Trace frame rate lag with a sexy performance radar

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published