🌌 I spent 3 weeks optimizing this
When I first built the aurora system for MotionGlobe, I was rendering everything at full 60fps on the main canvas. The result? Beautiful, but it tanked performance on anything with more than 800 dots.
The challenge: How do you create a multi-layered, mouse-reactive aurora with compound sine waves, HDR luminance peaks, and organic curtain motion... without killing the frame rate?
The solution was counterintuitive:
1⃣ Offscreen Canvas Rendering — The aurora renders on a separate canvas at 20fps, then composites with globalCompositeOperation = 'screen' onto the main globe. This isolates the heavy gradient calculations from the dot-rendering loop.
2⃣ Smart Frame Skipping — if (t - this.lastT >= this.fps) return — Only redraw when needed. The aurora doesn't need 60fps to look smooth; 20fps is plenty for atmospheric effects.
3⃣ Pre-allocated Memory — Using Float32Array buffers and depth buckets means zero garbage collection spikes during animation.
The result? A cinematic, multi-layered aurora with 6+ color-cycling layers, mouse reactivity, and HDR-like luminance peaks... running smoothly alongside 2000+ animated dots at 60fps.
Sometimes the best optimization isn't making things faster it's making them selectively slower where it doesn't matter.
👇 What's the most counterintuitive performance optimization you've ever made?
Preview URL : https://aura-3d-globe-pro.framer.website/aurora_showcase
🌌 I spent 3 weeks optimizing this
When I first built the aurora system for MotionGlobe, I was rendering everything at full 60fps on the main canvas. The result? Beautiful, but it tanked performance on anything with more than 800 dots.
The challenge: How do you create a multi-layered, mouse-reactive aurora with compound sine waves, HDR luminance peaks, and organic curtain motion... without killing the frame rate?
The solution was counterintuitive:
1⃣ Offscreen Canvas Rendering — The aurora renders on a separate canvas at 20fps, then composites with globalCompositeOperation = 'screen' onto the main globe. This isolates the heavy gradient calculations from the dot-rendering loop.
2⃣ Smart Frame Skipping — if (t - this.lastT >= this.fps) return — Only redraw when needed. The aurora doesn't need 60fps to look smooth; 20fps is plenty for atmospheric effects.
3⃣ Pre-allocated Memory — Using Float32Array buffers and depth buckets means zero garbage collection spikes during animation.
The result? A cinematic, multi-layered aurora with 6+ color-cycling layers, mouse reactivity, and HDR-like luminance peaks... running smoothly alongside 2000+ animated dots at 60fps.
Sometimes the best optimization isn't making things faster it's making them selectively slower where it doesn't matter.
👇 What's the most counterintuitive performance optimization you've ever made?
Preview URL : https://aura-3d-globe-pro.framer.website/aurora_showcase
