PHASE 2.1 // DEVELOPER TOOLKIT

BRING YOUR OWN FIRE.

Paste HTML and CSS, preview your animation in isolation, then compare frame timing against a static baseline on this browser and device.

Measurements reflect this browser tab and display refresh rate. They are not a universal hardware rating. Keep the tab visible during testing.

01 // EDIT

YOUR ANIMATION

HTML MARKUP CSS STYLES & KEYFRAMES

TEST DURATION (PER PASS) PREVIEW SIZE

Each test runs twice: static baseline first, animation second. A 30-second selection takes about 60 seconds total.

02 // PREVIEW

ISOLATED ARENA

READY

Only HTML and CSS are supported. Scripts, event handlers, forms, embeds, external fonts and network resources are blocked inside the preview. Stop replaces the test frame.

03 // RESULTS

SMART PERFORMANCE REPORT

NOT TESTED

AVERAGE FPS—

LOWEST 1s FPS—

P95 FRAME TIME—milliseconds

LONG FRAMES—> 50 ms

Run a test to measure your animation and compare it with a static baseline.

BASELINE VS ANIMATION

STATIC BASELINE FPS—

ANIMATED FPS—

FPS CHANGE—

BASELINE P95—milliseconds

Your performance recommendation will appear here.

Frame timing uses requestAnimationFrame inside the preview, not isolated CSS rendering cost. The static baseline disables animations and transitions but preserves markup and styles. Results vary with browser load, refresh rate, thermal throttling and run order; repeat tests.