LoopR.jsAnimation Loops for JavaScript

A lightweight animation and render loop manager with built-in high precision clock and FPS capping.

Get Started

API Reference

🔄

requestAnimationFrame Wrapper

Cleanly manage and orchestrate your render loops without repetitive boilerplate.

⏱️

High Precision Clock

Built-in clock provides accurate delta time, total time, and running average FPS.

🛑

Frame Capping & Delta Clamping

Cap maximum FPS or clamp maximum delta duration to shield simulations against lag spikes.

🧩

Modular Design

Use the Player or import the Clock independently for your own animation loops.

Built with LoopR.js

Animation loop demo

A render loop managed by Player, updating state with delta time and capped at 30 FPS.

0 FPS (capped at 30)0.0 ms Δt0.00sx: 0px

import { Player } from '@1pizzateam/loopr';
import { Vec2 } from '@1pizzateam/spock';

const position = new Vec2(0, 100);
const speed = 100; // move 100 pixels per second
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const animation = new Player((delta) => {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Update state using delta time
  position.x += speed * delta;
  if (position.x > canvas.width) position.x = 0;
  
  // Render
  ctx.fillStyle = '#5b8cff';
  ctx.fillRect(position.x, position.y, 50, 50);
});

// Optional: cap at 30 FPS
animation.capFPS(30);

// Start the loop!
animation.start();