Nebula Cloud
A volumetric, drifting nebula you can fly into, with thousands of additive glowing points clustered into soft billowing clumps that swirl and breathe under bloom. Scroll to dive inside, drag to orbit, middle-drag to pan.
Build a self-contained, performant Canvas 2D visual effect in a single React + TypeScript component.
Effect: "Nebula Cloud".
Description: A volumetric, drifting nebula you can fly into, with thousands of additive glowing points clustered into soft billowing clumps that swirl and breathe under bloom. Scroll to dive inside, drag to orbit, middle-drag to pan.
Current settings: points = 9000, spread = 8, density = 0.6, swirl = 0.6, point size = 0.09, color = Dual, hue = 290, second hue = 200.
Tags: 3d, webgl, three.js, r3f, particles, space.
Requirements:
- Use requestAnimationFrame with a delta-time (dt) step, clamped to avoid jumps on tab switches.
- Render crisply: fully clear the canvas every frame (clearRect). Do NOT fake motion blur by painting a translucent background each frame, because that causes permanent 8-bit "ghost" burn-in. If you want trails, store each particle's recent positions and draw them as an explicit fading tail.
- If many short-lived particles are spawned, use an object pool (pre-allocate, reuse, swap-remove on death) to avoid GC pauses.
- Scale the backing store by devicePixelRatio (cap ~2) and handle resize.
- Pause when the tab is hidden or the canvas is off-screen; respect prefers-reduced-motion.
- Expose the listed settings as adjustable props/controls.