Building a Live, User-Controlled Canvas Background System That Doesn't Kill Low-End Phones
The idea Most apps give you a static background. I wanted Pairly to feel alive instead, so I built "Atmosphere": a real-time animated Canvas layer that sits behind every chat, fully tunable by the user, speed, density, opacity, brightness, saturation, all live. There are currently over 40 atmospheres in the system, from calm ones like Snow and Fireflies to more elaborate ones like a black hole…
Most apps provide users with a static background. However, Pairly's Atmosphere offers a dynamic, real-time animated canvas layer that sits behind every chat and is fully customizable by the user. With over 40 atmospheres available, ranging from serene options like Snow and Fireflies to intricate designs like a black hole accretion disk called Abyss, the challenge was to ensure smooth performance on low-end Android devices without exhausting battery life.
To achieve this, Atmosphere employs two rendering paths: ParticleCanvas, a generic particle system, and useCanvasLoop, a raw draw-loop hook for continuous scenes. These engines centralize performance concerns, allowing each atmosphere to focus solely on its visual presentation. The core of the drawing mechanism is encapsulated in the useCanvasLoop's frame loop, which uses a throttling accumulator pattern to regulate drawing speed according to the device's performance profile.
This pattern checks the device's hardware concurrency and memory capacity before rendering, adjusting particle count and drawing rate accordingly. For instance, a low-end device with limited resources will display effects at 45% of the resolution it would on a high-end device, without any explicit user intervention.
One crucial optimization is capping the device pixel ratio (DPR) at 1.25 for low-end devices. On modern phones, DPR values such as 3 or 4 can lead to inefficient rendering if not managed. By limiting the DPR for low-end devices, the system significantly reduces the pixel count that needs to be processed each frame, resulting in a substantial performance boost.
Additionally, pausing the rendering when the tab is not visible further conserves battery life and enhances performance by avoiding unnecessary calculations during periods of inactivity. These optimizations collectively ensure that the visually rich Atmosphere backgrounds remain smooth and battery-friendly on a wide range of devices.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
