Frame rate (FPS)
Also called FPS or frames per second
The number of frames a screen draws each second; around 60 fps, motion looks smooth, and at lower rates it starts to look choppy.
import { useEffect, useState } from 'react';
function fpsColor(fps: number) {
if (fps >= 55) return 'text-emerald-400';
if (fps >= 30) return 'text-amber-400';
return 'text-red-400';
}
// Render it in development only: {import.meta.env.DEV && <FpsMeter />}
export function FpsMeter() {
const [fps, setFps] = useState<number | null>(null);
useEffect(() => {
let frames = 0;
let start = performance.now();
let frameId = 0;
// requestAnimationFrame runs once per frame the browser draws.
function tick(now: number) {
frames += 1;
if (now - start >= 500) {
setFps(Math.round((frames * 1000) / (now - start)));
frames = 0;
start = now;
}
frameId = requestAnimationFrame(tick);
}
frameId = requestAnimationFrame(tick);
return () => cancelAnimationFrame(frameId);
}, []);
return (
<output
className={`fixed right-3 bottom-3 rounded-md bg-black/80 px-2 py-1 font-mono text-xs tabular-nums ${fps === null ? 'text-white/60' : fpsColor(fps)}`}
>
{fps ?? '--'} fps
</output>
);
}Add a small FPS meter to the corner of the page in development only: count frames with requestAnimationFrame, update the number every 500ms, and color it green at 55 fps or more, amber from 30 to 54, and red below 30.
Paste into Layerwise or any AI coding tool.
What is Frame rate (FPS)?
Motion on a screen is a quick series of still pictures called frames. Frame rate, measured in frames per second (fps), is how many of those pictures appear each second. More frames mean smaller jumps between them, so movement reads as one continuous glide. At 15 fps the same movement looks like a flip book.
Most screens refresh 60 times a second, and many phones and laptops run at 90 or 120. The browser tries to draw one frame per refresh, which leaves about 16.7ms per frame at 60Hz, or 8.3ms at 120Hz, for your JavaScript, style, layout, and painting.
Base JavaScript animation on elapsed time with requestAnimationFrame, so it moves at the same speed at any frame rate. Animate transform and opacity when you can, and check real numbers with the Performance panel or the Frame Rendering Stats overlay in Chrome DevTools, ideally on a mid-range phone.
Often confused with
- Stepped animation
- A stepped animation jumps between a few positions on purpose with
steps(). A low frame rate makes every animation choppy by accident.
Related terms
All termsJank
Visible stutter in an animation or scroll, caused when the browser misses frames because it cannot finish its work in time.
GPU acceleration
A browser technique where the graphics chip moves, fades, or scales an element on its own layer instead of redrawing the page every frame.
Stepped animation
An animation that jumps through a set number of frames instead of moving smoothly, made with the CSS steps() timing function.
Perceived performance
How fast an app feels to people, which skeleton screens, instant feedback, and progressive loading can improve even when the real wait stays the same.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.