FPS Playground
An interactive playground that renders a live 2D animation at any frame rate you choose, with a live FPS and frame-time readout, so you can see and feel the difference between frame rates.
Auto mode: the scene animates on its own. Pick a frame rate and watch how it looks.
How to Use FPS Playground
How it works
- Choose a frame rate using the preset chips (10, 20, 30, 60, 120), the slider (1-240), or Unlimited.
- Watch the stage run at that rate and read the live Measured FPS and frame time.
- Switch between Auto and Mouse mode with the toggle (or press M).
- In Mouse mode, steer the moving object with your pointer and feel how it tracks at different rates.
- Use Restart (or press R) to begin the scene again without changing your settings.
Modes
Auto animates the scene by itself. Mouse makes the moving object follow your pointer or touch. Changing mode never changes the selected frame rate.
Keyboard shortcuts
1-5 select the presets (10/20/30/60/120). U selects Unlimited. Left and right arrow keys nudge the slider (hold Shift for a bigger step). M toggles mode. R restarts. Esc closes this help.
When to Use FPS Playground
A quick, friendly way to see and feel frame-rate differences on your own screen:
-
Pick a feel
Try 30, 60 or 120 FPS on the same scene to see how much smoother higher frame rates look.
-
Feel your aim
Steer the object with your mouse and notice how much it improves to track at high FPS.
-
Check your screen
See your display's max refresh and why 120 FPS can look the same as 60 on a 60 Hz panel.
-
Spot the jank
Watch the frame-time meter to see long frames and stutter in real time.
-
Quick comparison
Flip between two frame rates in one click and instantly compare the smoothness.
Frequently Asked Questions
- What does this tool show?
- It renders the same 2D animation at different frame rates so you can see how each one looks, from choppy to silky.
- What's the difference between target and measured FPS?
- Target is the frame rate you selected. Measured is what your browser actually rendered. On slower hardware or a low-refresh screen, measured can be lower than target.
- Why does 120 FPS look the same as 60 FPS on my screen?
- If your display refreshes at 60 Hz, it can't show more than about 60 frames per second. The app detects your display's maximum and tells you when the rendered rate is capped.
- Can I control the character?
- Yes. Switch to Mouse mode and move your cursor (or drag your finger on a touch screen) to steer the object and feel the input smoothness at the chosen frame rate.
- Does it work on my phone?
- Yes. The layout adapts to small screens and touch input is supported, so you can watch and steer the animation on a phone or tablet.