Particle Nebula

Particle field

• particleCount (default 300) — How many particles exist. Particles are scattered randomly inside a sphere. Changing it rebuilds the particle buffers.
• particleSpread (default 10) — Radius of the cloud in world units, i.e. how dispersed the particles are. Bigger = wider, airier cloud.
• particleBaseSize (default 100) — Base point size of each particle before distance shrinkage and randomness. It's divided by distance from camera, so with the default camera (~20 units) a value of 100 ≈ 5 px.
• sizeRandomness (default 1) — How much particle sizes vary. 0 = all identical; 1 = sizes vary by roughly ±50% around the base size.
• zStretch (default 10) — Stretches the cloud along the depth axis. Higher = deeper cloud, so near particles look much bigger than far ones (stronger depth/parallax feel).

Motion

• speed (default 0.1) — Global time multiplier. Affects drift, cloud rotation, twinkle, iridescence shimmer and grain. Higher = everything faster; lower = slow-motion.
• drift (default 1) — Amplitude of the per-particle floating wobble (each particle drifts on its own sine path). 0 = particles hold position (the cloud can still rotate as a whole); higher = more turbulent floating.

Particle look

• particleColors (default ['#ffffff', '#9db4ff']) — Array of hex colors; each particle randomly picks one from the list. Accepts #rgb, #rrggbb, #rrggbbaa. Invalid entries fall back to white. Changing it rebuilds the buffers.
• particleShape (default 'disc') — Shape of each particle sprite: 'disc' (circle), 'soft' (soft radial glow dot), 'ring' (hollow ring), 'square'.
• alphaParticles (default false) — Edge style: false = hard-edged, fully opaque shapes; true = feathered, semi-transparent edges (max ~85% alpha). Pairs well with additive blending.
• iridescence (default 0.2) — Animated rainbow shimmer across each particle (an oil-slick-like color oscillation). 0 = particles stay their base colors; higher = stronger shifting sheen.
• twinkle (default 0) — Per-particle pulsing brightness, like fireflies. 0 = constant; 1 = strong pulsing between ~35% and 100% brightness.
• blend (default 'add') — How overlapping particles combine. 'add' = additive — overlaps accumulate into brighter, glowing cores. 'normal' = standard alpha compositing — particles layer like normal shapes.

Interaction

• disableRotation (default false) — false = the whole cloud slowly tumbles on its own (gentle X/Y sway plus constant Z spin). true = no automatic rotation; only drag rotates it.
• moveParticlesOnHover (default true) — Moving the pointer over the canvas nudges the whole cloud away from the cursor (parallax follow). Automatically disabled when reduced motion is active.
• particleHoverFactor (default 1) — Strength of that hover parallax. 0 ≈ off; higher = cloud shifts more per cursor movement.
• dragRotate (default true) — Click-and-drag (or touch-drag) to rotate the cloud manually. Pointer capture is used so drags keep tracking outside the canvas. Disabled under reduced motion.

Trails

• trails (default 0) — Motion-trail persistence via a feedback buffer: each frame, a faded copy of the previous frame is drawn under the new one. 0 = off; 0.55 = medium ghosting; up to a hard cap of 0.985 = very long smears.
• feedbackZoom (default 1) — Zoom applied to the previous frame each trail pass (only active when trails > 0). 1 = trails stay in place; slightly above 1 = trails shrink toward the center (tunnel effect); below 1 = trails expand outward.

Camera & resolution

• cameraDistance (default 20) — How far the camera sits from the cloud's center. Larger = cloud appears smaller and flatter; smaller = closer, bigger, more immersive (too small and particles clip).
• fov (default 15) — Vertical field of view in degrees. Low values (~15) give a flat, telephoto look; high values give stronger perspective distortion. Changing it re-projects the camera.
• pixelRatio (default 1) — Render-resolution multiplier, clamped to 0.25–4. 1 = one canvas pixel per CSS pixel (fast); 2 = retina sharpness (4× the pixels, and particle sizes scale up to compensate). Changing it re-allocates all render targets.

Glow (bloom)

• glow (default 0.6) — Intensity of the bloom pass — a soft halo added around bright areas. 0 = off. This is the master amount; the next two shape it.
• glowRadius (default 2) — Blur radius of the halo in the upsample pass. Higher = wider, softer glow spread.
• glowThreshold (default 0.18) — Brightness a pixel needs before it blooms (soft-knee threshold). Lower = more of the scene glows; higher = only the brightest particle cores do.

Post-processing / color grading

All applied to the final image in one composite pass:

• rgbShift (default 0) — Chromatic aberration: the red and blue channels are offset radially from the center. The value is roughly the max offset in pixels — keep it small (0–3). 0 = off.
• rgbFalloff (default 1.6) — How the RGB shift grows from center to edge, as radius^falloff. 1 = linear growth; higher = shift concentrated in the corners; lower = it reaches further inward.
• grain (default 0.05) — Animated film-grain noise amount. 0 = clean render; ~0.05–0.15 = subtle texture.
• scanlines (default 0) — CRT-style horizontal scanline darkening. 0 = off; 1 = full strength.
• scanCount (default 600) — Density of those scanlines — roughly the number of lines across the canvas height.
• vignette (default 0.5) — Darkening toward the corners. 0 = none; 1 = strong.
• brightness (default 1) — Multiplies the final image brightness.
• contrast (default 1) — Contrast pivoted around mid-gray: (color − 0.5) × contrast + 0.5.
• saturation (default 1) — Color saturation. 0 = grayscale; 1 = unchanged; above 1 = oversaturated.
• hue (default 0) — Hue rotation of the final image in degrees (e.g. 180 flips the palette). Near-zero values are treated as off.

Background

• background (default 'transparent') — Composite background mode: 'solid', 'linear' (vertical gradient), 'radial' (glow from center), 'checker' (48×48 checkerboard), or 'transparent' — the canvas stays see-through so your page background shows behind the particles.
• bgColor1 (default '#05060c') — First background color: the solid color, the top of the linear gradient, the outer edge of the radial, or checker color A.
• bgColor2 (default '#141b3a') — Second background color: the bottom of the linear gradient, the center of the radial, or checker color B.

Accessibility

• reducedMotion (default 'auto') — How the effect handles prefers-reduced-motion. 'auto' = follow the user's OS/browser setting (and react live if it changes); 'on' = force reduced motion; 'off' = always animate regardless. When reduced: the animation pauses, hover/drag/burst are disabled, and a single static frame is rendered at a fixed pleasant angle.

Gotchas worth knowing

• Structural changes: particleCount and particleColors trigger a GPU buffer rebuild via set(); pixelRatio and fov trigger a full resize/re-allocation; reducedMotion re-syncs the play state.
• Size chain: perceived particle size = particleBaseSize × pixelRatio ÷ camera distance, modified by sizeRandomness, fov, and burst. Tune these together, not in isolation.
• Hardware cap: point sizes are clamped to the GPU's max point size (queried at runtime, up to 512). Very close/large particles can get visually clipped as flat cards.
• Clamps: trails is capped at 0.985 (above that, feedback never fully clears); pixelRatio is clamped to 0.25–4; drag tilt is limited to ±1.2 rad.
• speed is global: it drives drift, rotation, twinkle, shimmer and grain animation — you can't slow one without the others (except by lowering the individual amplitudes like drift or twinkle).
• Additive + transparent: with blend: 'add' and background: 'transparent', the canvas overlays cleanly on any page background — the classic "floating dust over content" setup.