Particle Backgrounds

The particle background is the most-built 3D effect on the web right now. It is behind the hero sections of countless SaaS products, portfolios, and agency sites, and for good reason. It works on any brand, any colour scheme, and any screen size.

This lesson builds one from scratch.

What you are building

A full-screen Three.js particle field with 800 particles drifting slowly in 3D space, mouse tracking so particles react when the cursor moves near them, one or two subtle point lights for depth, your regular HTML content sitting above the canvas, and smooth performance with a reduced particle count on mobile.

Choosing your visual direction

Before you write the prompt, decide two things.

First, your colour palette. Here are proven particle colour combinations to choose from.

Near-black background #0a0a0a with white particles #ffffff creates a clean tech and premium atmosphere. Dark navy background #111827 with soft blue particles #60a5fa creates an AI, data, and modern SaaS feel. Black background #0f0f0f with gold particles #d4a843 creates a luxury and consultancy feel. Deep navy background #0a0f1a with soft purple particles #a78bfa creates a creative and design atmosphere. Off-white background #fafafa with dark particles #1a1a2e creates a minimal editorial feel.

Pick one combination and write down the exact hex codes before continuing.

Second, your movement style. Drift means particles float slowly in random directions with no interaction. Mouse attract means particles move toward the cursor position. Mouse repel means particles move away from the cursor and is the most popular choice. Wave means particles pulse in a slow sine-wave motion.

The particle background prompt

Copy this prompt into Claude Code and replace every placeholder with your actual values.

Build me a Three.js particle background website with these exact specifications:

FILE STRUCTURE:

Create three files: index.html, style.css, and main.js.

Put the Three.js r128 CDN link in the HTML head:

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js

PAGE CONTENT in index.html above the canvas:

- Hero section with this heading: [YOUR HEADING]
- Subheading: [YOUR SUBHEADING]
- CTA button: [YOUR BUTTON TEXT]
- Navigation with logo [YOUR NAME OR BRAND] and two nav links: [LINK 1] and [LINK 2]

• Use Google Font: [YOUR FONT CHOICE e.g. Space Grotesk] from fonts.googleapis.com

STYLING:
- Background colour: [YOUR BACKGROUND HEX]
- Text colour: [YOUR TEXT HEX]
- CTA button background: [YOUR ACCENT HEX], white text, 8px border radius, no outline on hover

• Hero text centred and vertically centred on screen

PARTICLE SYSTEM in main.js:

• 800 particles on desktop, reduce to 500 on screens under 768px width
• Particle colour: [YOUR PARTICLE HEX]
• Particle size: 1.5
• Particles fill a 3D box: width 2000, height 2000, depth 2000
• All particles drift slowly with a unique random velocity (very slow, max 0.1 units per frame)
• Mouse interaction: track the mouse position and convert to 3D coordinates. When the cursor

is within 150 units of a particle, push it away from the cursor. The repel force should be

smooth and proportional to distance.

- Add two point lights: one [YOUR ACCENT HEX] light above-left and one white light below-right,

both with low intensity of 0.3

• Camera positioned at z: 500 looking at the origin
• Canvas element: position fixed, full screen, z-index -1, pointer-events none

ANIMATION LOOP:

• Rotate the entire particle system very slowly on the Y axis at 0.0002 per frame
• Update particle positions with drift velocity each frame
• Particles that drift out of bounds beyond the box wrap around to the opposite side

PERFORMANCE:

• Use BufferGeometry not Geometry for the particles
• Keep all 3D math simple with no physics libraries

SELF-CHECK BEFORE DELIVERING:

• Open the HTML file in a browser
• Confirm particles are visible and moving
• Move the mouse and confirm particles react
• Resize the browser to 400px wide and confirm the page still looks correct

Customising after it is built

Once Claude builds the particle background you can refine it with follow-up prompts.

To change particle count: "Increase the particle count to 1200 on desktop and reduce the drift speed by half."

To change interaction style: "Change the mouse interaction from repel to attract. Particles should be pulled toward the cursor instead of pushed away."

To change particle size: "Make particles slightly larger at size 2.5 instead of 1.5. Also add a very subtle opacity variation so some particles appear dimmer than others."

To add a glow effect: "Add a subtle bloom-like effect to the particles. They should appear slightly luminous and not like hard dots."

Testing your particle background

After Claude builds it, open the folder as a local file in Chrome and check four things.

Particles visible: you can see small dots moving in the background. Mouse reaction: moving your cursor across the screen makes particles respond. Text readable: your heading and subheading are clearly legible above the particles. Mobile check: resize the browser to 375px wide and the page should still look correct.

If any check fails, bring the exact problem back to Claude: "The particles are visible but they are not reacting to the mouse. Please fix the mouse interaction in main.js."

What breaks and how to fix it

Particles not appearing is almost always a CDN load issue. Check that the Three.js script tag loads before main.js. In index.html the Three.js script tag must come before the main.js script tag.

Mouse interaction not working means the mouse coordinates are not being converted from pixel space to Three.js normalised device coordinates. If Claude missed this, paste the error from the browser console using F12 and then the Console tab back to Claude.

Page scrolling but particles not following means the canvas needs position fixed in CSS and not position absolute. Fixed means it stays with the viewport regardless of scroll position.

Everything black and nothing visible means the camera might be pointed in the wrong direction or the particles might have the same colour as the background. Ask Claude: "The canvas renders but nothing is visible. Check that the camera is at z:500 looking at the origin and that the particle colour is not matching the background colour."