Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-nexus/llms.txt

Use this file to discover all available pages before exploring further.

ParticleField is a full-screen animated background component that paints a constellation-like particle system onto an HTML <canvas> element. Hundreds of small particles in the site’s four neon colors drift slowly across the void with a subtle upward bias. The canvas sits behind all page content at z-index: 0 and ignores pointer events entirely so it never interferes with interactive elements above it.

​
Props

ParticleField accepts no props. All particle behavior — density, speed, and colors — is controlled by constants and calculations defined inside the component source (components/ParticleField.js).

​
Usage

Mount ParticleField once at the application shell level, before any page content, so it underlies the entire layout: 
import ParticleField from './components/ParticleField';
import NavBar from './components/NavBar';
import Footer from './components/Footer';
import { Outlet } from 'react-router-dom';

export default function AppShell() {
  return (
    <>
      <ParticleField />   {/* fixed, full-screen, z-0 */}
      <NavBar />
      <main className="relative z-10 pt-16 min-h-screen">
        <Outlet />
      </main>
      <Footer />
    </>
  );
}
Ensure page content containers carry position: relative and a z-index higher than 0 (e.g., z-10) so they render above the canvas layer. Without this, interactive elements may appear behind the particle field in some browsers.

​
Visual Behavior

PropertyDetail
Positionposition: fixed, covers 100vw × 100vh via inset-0
Z-index0 — behind all page content
Canvas backgroundTransparent — the site’s dark void background shows through
Canvas opacityopacity-60 applied via Tailwind class on the <canvas> element
Particle colorsFour neon hues drawn randomly per particle: electric-violet #9d4dff, neon-lime #9eff5b, ghost-mint #6dffc7, hot-magenta #ff4ad8
Particle appearanceSmall filled circles with a matching shadowBlur glow; radius between 0.5 px and 2 px
Particle densityDynamic: floor(canvasWidth × canvasHeight / 15 000) — scales automatically with viewport size
Particle motionRandomized horizontal drift with a slight upward bias; each particle wraps to the opposite edge when it exits the canvas
Pointer eventspointer-events: none — fully non-interactive
Animation loopDriven by requestAnimationFrame for smooth, CPU-efficient rendering; canvas is cleared with clearRect each frame

​
How the Animation Loop Works

On mount, the component:
  1. Sets the canvas size to window.innerWidth × window.innerHeight and adds a resize listener to recalculate on viewport changes.
  2. Initializes an array of particle objects, each with a random (x, y) position, velocity (vx, vy), radius, alpha, and one of the four palette colors.
  3. Starts a requestAnimationFrame loop that on every tick:
    • Clears the canvas with clearRect (preserving the transparent background).
    • Updates each particle’s position by its velocity.
    • Wraps particles that drift off any edge back to the opposite edge.
    • Draws each particle as a filled circle with a colored shadowBlur glow.
  4. On unmount, cancels the animation frame and removes the resize listener via the cleanup function returned from useEffect.
Particles do not draw connection lines between each other. The field is purely a drifting particle system — no proximity-based line drawing occurs.

​
Customization Tips

All tunable values are inside components/ParticleField.js: 
// Density is derived dynamically:
const count = Math.floor(canvas.width * canvas.height / 15000);

// Each particle's velocity (slight upward bias on vy):
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3 - 0.1,   // negative = upward drift
Increase density: Lower the divisor (e.g., 10000 instead of 15000) to spawn more particles per viewport area. Note that rendering many particles can impact frame rate on low-end devices. Speed up the field: Increase the multiplier on vx/vy from 0.3 for a more energetic feel, or decrease it toward 0.1 for an almost static starfield. Change particle colors: Find the color array and replace or extend the hex values with any colors from your Tailwind theme: 
const colors = ['#9d4dff', '#9eff5b', '#6dffc7', '#ff4ad8'];
Reduce motion for accessibility: 
import { useReducedMotion } from 'framer-motion';

const shouldReduce = useReducedMotion();
// skip requestAnimationFrame loop entirely if shouldReduce is true
On mobile devices, consider increasing the density divisor (e.g., 25000) behind a window.innerWidth < 768 check to maintain smooth 60 fps on lower-powered hardware.

Build docs developers (and LLMs) love

Get started for freeTalk to us