Home▸Computer Science▸Frame-Budget Tier Ladder: Progressive Enhancement Simulator

Frame-Budget Tier Ladder: Progressive Enhancement Simulator

Interactive simulator of a mobile app's progressive-enhancement tier ladder: a hysteresis state machine watches a smoothed frame-time budget and upgrades or downgrades rendering complexity, visualized as growing/shrinking instanced particle shells around a 3D device core.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version

Real mobile apps that follow progressive enhancement don't pick a rendering tier once at startup and freeze it — they keep measuring, because thermal throttling, background load and battery-saver modes change what a device can afford mid-session. This simulator runs that decision loop live: a synthetic frame cost is generated every tick from the current enhancement tier and a device-stress multiplier, smoothed with an exponential moving average, and compared against a target frame budget (30/60/90fps). A hysteresis state machine — slow to upgrade, fast to downgrade — walks a five-rung tier ladder up or down, and the 3D scene mirrors every step: instanced particle shells appear around the device core as the tier rises and vanish as it falls. Drag the stress slider, shrink the hysteresis window to watch it flicker, or fire a throttle spike to see a sustained cost shock force a downgrade.

⚙ Under the hood

A hysteresis state machine watches a smoothed frame-time budget and walks a five-rung rendering-quality ladder up or down, visualized as instanced particle shells growing and shrinking around a 3D device core.

progressive enhancementhysteresisframe budgetmobile performanceadaptive renderingEMA

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install