Description
Users on lower-end mobile devices or laptops running integrated GPUs experience noticeable frame drops and high CPU usage when interacting with the 3D Orb Visualizer. Because Framer Motion is recalculating individual element states dynamically for the floating particles and multiple ripple rings simultaneously, it triggers heavy main-thread layout thrashing.
Scope of Work
- Optimize the particle rendering loop by switching the background particle calculations to CSS hardware-accelerated animations (
transform: translate3d) where possible.
- Reduce the absolute number of concurrent floating particle DOM nodes generated based on the device's capabilities, or implement
will-change: transform properties to lift the orb layers onto the GPU.
Description
Users on lower-end mobile devices or laptops running integrated GPUs experience noticeable frame drops and high CPU usage when interacting with the 3D Orb Visualizer. Because Framer Motion is recalculating individual element states dynamically for the floating particles and multiple ripple rings simultaneously, it triggers heavy main-thread layout thrashing.
Scope of Work
transform: translate3d) where possible.will-change: transformproperties to lift the orb layers onto the GPU.