FPS Comparison Test

Compare motion at different target frame rates

FPS Comparison puts the same cowboy, horse and scrolling landscape into eight lanes with targets from 15 to 600 FPS. It is a visual frame-rate demonstration: compare the spacing between motion updates, the readability of moving details and the feeling of continuity. For a 30 FPS vs 60 FPS motion comparison, the lower lanes offer a direct starting point. For 60Hz vs 144Hz or 144Hz vs 240Hz questions, account for what your current browser and display can actually present.

How to use the tool

1. Start with the default shared speed and compare the 15, 30 and 60 FPS lanes. Follow the horse with your eyes, then hold your gaze on a stationary part of the scene and watch the landscape pass.
2. Compare the 60, 144 and 240 targets next. Note whether the differences persist or whether the high-target lanes look alike on this setup.
3. Use the shared motion-speed control to slow every lane equally. Pause to inspect the artwork, reset for a fresh run and use fullscreen when you want a larger view.
4. Check browser cadence with the refresh-rate tool, verify the OS display mode and return to the same scene. Keep the same speed when comparing two settings.

What the targets mean

At 30 FPS, an evenly paced content frame lasts about 33.33 milliseconds; at 60 FPS about 16.67 milliseconds. Targets of 144 and 240 imply about 6.94 and 4.17 milliseconds respectively. Shorter intervals can reduce the distance an object travels between updates, which is why a rapidly moving edge makes differences easier to notice.

The engine advances motion at each lane’s target interval but draws through shared browser animation callbacks. A selected 600 FPS target is therefore not 600 independently visible frames on a 60Hz display. When the page receives only around 60 callbacks each second, several high targets can update once per callback and look very similar.

The ten-frame gallop advances with distance traveled, and every lane uses the same movement speed. This keeps the comparison focused on motion sampling rather than different horse speeds. The page-updates indicator counts lane redraws; it is not a physical refresh-rate measurement. Brief firing effects also use the shared callback so low-target lanes can show them.

Compare smoothness without confusing it with response time

Watch the scene in two ways. Tracking the horse highlights how a moving object appears to your eyes; watching a fixed point makes the gaps between successive positions clearer. Both observations are useful, but neither converts the animation into a numeric panel response-time test.

A high target may still show blur or trails. Pixel transitions, display settings, sample-and-hold presentation and eye tracking can affect appearance. A lower target may look regularly stepped or unevenly paced depending on the presentation path. Use the motion patterns for a different set of edges and text, then compare one setting at a time.

If the comparison stutters

Keep the tab in front and wait for scene assets to finish loading. Close intensive applications, repeat at a slower shared speed and try another browser if stuttering persists. A rendering bottleneck can make several lanes stumble together, so it should not be mistaken for a clean demonstration of a frame-rate difference.

For the system mode, Windows users can open Settings → System → Display → Advanced display and select the monitor’s refresh rate. On supported Macs, use System Settings → Displays → Refresh Rate for the selected display. Confirm available modes before expecting a visible distinction between 144 and 240 targets.

References: MDN: animation callbacks · Windows refresh settings · Mac refresh settings.