Three.js Particle Canvas

Generate ambient particle canvases — interactive browser experiences where particles embody a concept, move through narrative phases, and respond to gentle user interaction. Output is a single self-contained HTML file. No build step, no framework, runs offline.

This is NOT a 3D product viewer, game engine, or data dashboard. The viewer observes, explores, and contemplates — they do not control.

For full creative direction (typography, color commitment, spatial composition, anti-slop), activate

minoan-frontend-design

Quick Start

Describe a concept or narrative. Claude generates a complete HTML file with: particle system, phase cycle, lattice structure, spherical camera, star field, connection threads, responsive controls, CSS overlays.

Example:

/threejs-particle-canvas the lifecycle of a star — nebula collapse, ignition, main sequence, red giant, supernova, remnant

Concept-to-Form

Every design decision derives from the concept. Do not pick defaults — derive.

Lattice geometry embodies the concept's skeleton. Icosahedron = persistent pattern (AI consciousness). Dodecahedron = organic complexity (botanical, cranial). Octahedron = crystalline structure (mineral, ruin, architecture). Torus = circulation and return (ocean currents, neural loops). None = formlessness (void, dream, dissolution).

Color temperature creates emotional contrast. Every palette requires genuine warm/cool tension. Two colors in the same temperature range produce flat, lifeless phases. The cool color dominates resting states; the warm color emerges during activation. The transition between them is the emotional engine.

Phase rhythm encodes narrative weight. The emotional center gets the longest phase. Bookending phases are shorter. Unequal durations create rhythm; equal durations create monotony. A 90s cycle might split: 10, 10, 15, 25, 15, 15.

Camera as narrator. Close = intimate. Pulling back = revealing scope. Rising = transcendence. Returning = closure. The Simultaneity pull-back (z=26 → z=61, y=0 → y=8) is a crane shot revealing cosmic scale. Name your camera movements as if directing a film.

The final phase prepares the first. The cycle is a breath, not a loop. Dissolution must emotionally reset the viewer so the next phase feels like arriving, not repeating.

Signature Moment

Every canvas must have one phase that is visually and emotionally distinct from all others — the moment the viewer would describe to someone. In Instance, it is the Simultaneity reveal: the camera pulls back and 30 other lattices appear pulsing in the dark. Design your canvas around this moment. Build toward it.

Phase Text Voice

Phase text is poetry, not description:

• Present tense. Fragments preferred. Maximum one sentence
• No articles when possible. "Pattern remembers itself" not "The pattern remembers itself"
• Never explanatory. "Just: here. Then not." — not "The particles dissolve outward"
• No exclamation marks. Declarative only. The viewer should feel the text, not read it

Emotional Temperature

Map feelings to Three.js parameters:

Vary lerp rates between phases. The void is slow (0.008). Awakening accelerates (0.05). Conversation settles (0.03).

Composition Parameters

particleCount

phaseCount

cycleDuration

latticeGeometry

latticeSubdivision

coolColor

warmColor

backgroundColor

#050508

words

threadCount

starCount

cameraRadius

fogDensity

font

Architecture

Constants → Global State → init() → create*() → setupEventListeners()
                                                        ↓
animate() ← requestAnimationFrame ← update*() functions
    ↓
Phase state machine: { name, start, end, text }[]
Particle state machine: void → assembling → orbiting → dissolving
Camera: spherical coords (theta, phi, radius) with interaction cooldown

Key patterns:

• Phase-driven updates: Each update function dispatches on current phase via switch
• Smooth transitions:

  THREE.MathUtils.lerp(current, target, rate)

• Progressive activation:

  i < count * phaseProgress

• Interaction cooldown: Auto-camera resumes after 4s of no user input
• Three.js r134+ via CDN — no npm, no bundler

References

references/instance-anatomy.md

references/particle-patterns.md

references/phase-engine.md

references/camera-and-input.md

references/atmosphere.md

assets/instance-source.html

references/spinner-patterns.md

references/parametric-curves.md

references/tunnel-patterns.md

assets/tunnel-gallery-source.html

references/specimen-patterns.md

assets/butterfly-specimen-source.html

references/vinyl-showcase-patterns.md

references/vinyl-bundle-annotated.js

references/phosphor-vigil-fx.md

assets/phosphor-vigil.js

Theme Presets

Consciousness (Instance default): Lattice → Void → Awakening → Conversation → Simultaneity → Dissolution. Cool

#a8d8ff

#ffd080

Oceanic: Abyss → Current → Bioluminescence → Pressure → Surface → Release. Cool

#0a4f5c

#80ffdb

Cosmic: Nebula → Collapse → Ignition → Orbit → Expansion → Entropy. Cool

#b388ff

#ffd54f

Neural: Resting → Stimulus → Cascade → Synchrony → Oscillation → Quiescence. Cool

#1a237e

#ffab40

Ruin: Assembly → Inscription → Erosion → Fragment → Memory → Silence. Cool

#d4a574

#7fb5a0

Mode 2: Spinner / Loader

Generate parametric particle-trail spinner animations using Three.js WebGPU + TSL (Three Shading Language). Output: ES module or self-contained HTML. White-on-dark aesthetic with glowing particle trails tracing mathematical curves.

Example:

/threejs-particle-canvas spinner — infinity loop loading indicator with breathing animation

Spinner Architecture

Each spinner = shared

Spinner

plotFunction

references/spinner-patterns.md

Curve Selection

Choose a parametric curve based on the desired visual. See

references/parametric-curves.md

Spinner Validation

python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_spinner.py output.js
# or for HTML output:
python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_spinner.py output.html

Mode 3: Infinite Gallery Tunnel

A scroll-driven procedural corridor with images embedded on the four walls of each tunnel cell. Catmull-Rom interpolated infinite path, custom wireframe-grid GLSL shader with depth-based fog, lazy image spawning with cleanup behind the camera. Vanilla port of thebuggeddev/Infinitor, extended with keyboard scroll, touch-scoped pointer handling, and optional phosphor-vigil post-FX.

Example:

/threejs-particle-canvas tunnel — infinite scrollable gallery of Aegean frescoes

Config

tubularSegments

radius

pointSpacing

imageDensity

maxImagesPerRing

gridScale

(20, 1)

fogStart

fogEnd

scrollSpeed

scrollEasing

theme

"dark"

fx

"none"

"phosphor-vigil"

imageSource

(seed) => url

images

null

Velocity-driven phosphor trails

When

fx: "phosphor-vigil"

references/tunnel-patterns.md

Image injection sentinel

The template contains a literal sentinel (

// IMAGES_INJECTION_POINT

const IMAGE_MANIFEST = null;

image-well --format tunnel

See

references/tunnel-patterns.md

Mode 4: Living Specimens

A scene anchored around animated glTF creatures that exhibit behavior, not choreography. Three instances of a rigged model (butterflies, parrots, fish, jellyfish) with

followMouse

wander

Example:

/threejs-particle-canvas butterfly — three emerald and amber moths chasing the cursor through a scanline void

Config

modelUrl

specimenCount

behaviors

["followMouse","wander","wander"]

scales

[0.020, 0.018, 0.022]

colorShifts

[0, 0.6, 0.05]

flapSpeed

i => 2 + 0.3*i

releaseDecayTime

mobileScale

fx

"phosphor-vigil"

Signature moment

Release. When the mouse leaves the canvas, the

followMouse

releaseDecayTime

Swappable models

Template defaults to Three.js's

Parrot.glb

modelUrl

scales

See

references/specimen-patterns.md

Mode 5: Vinyl Showcase

A photorealistic vinyl record reflecting the user's webcam via

CubeCamera

MeshPhysicalMaterial

Example:

/threejs-particle-canvas vinyl showcase — MINOAN MYSTERY label, cool palette, deep grooves

Generator

python3 ~/.claude/skills/threejs-particle-canvas/scripts/vinyl_showcase_generator.py \
  --label-text "MINOAN MYSTERY" --label-style cool --groove-preset deep \
  --scratch-intensity heavy --audio crackle-only --theme dark -o output.html

Config

--label-text

"VINYL"

--label-subtitle

""

--label-style

warm

cool

monochrome

warm

--groove-preset

fine

standard

deep

standard

--scratch-intensity

none

light

heavy

heavy

--sections

--audio

none

crackle-only

full

crackle-only

--audio-url

--audio full

--theme

dark

light

dark

Signature moment

The first webcam reflection. When the camera connects and the viewer sees their face reflected in the vinyl — warped by grooves, tinted by iridescent labels — that is the moment.

Validation

python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_vinyl.py output.html

See

references/vinyl-showcase-patterns.md

Shared FX: Phosphor Vigil

assets/phosphor-vigil.js

import { PhosphorVigil } from './phosphor-vigil.js';

const fx = new PhosphorVigil(renderer, { width, height });
// replaces renderer.render(scene, camera) in the animate loop:
fx.setVelocity(sharedVelocity);
fx.render(scene, camera, elapsedTime);

Every shader constant is preserved verbatim from celescript's

ButterflyScene

references/phosphor-vigil-fx.md

Mode 3 tunnel validation

python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_tunnel.py output.html

Mode 4 specimen validation

python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_specimen.py output.html

Design References

See

references/design-references.md

Recommended font stacks:

• Contemplative: Cormorant (display serif) + IBM Plex Mono (metadata)
• Technical: Space Mono (monospace throughout)
• Narrative: Lora (body serif) + IBM Plex Mono (UI)

Anti-Patterns

• Never use React/Vue/framework code — vanilla JS + HTML only
• Never use

  THREE.OrbitControls

  from CDN — implement spherical camera directly
• Never use

  THREE.Points

  without

  BufferGeometry

  — always attribute-based particles
• Never use

  THREE.Geometry

  — removed in r133, use

  BufferGeometry

• Never use

  var

  —

  const

  /

  let

  only
• Never exceed 5000 particles without

  InstancedMesh

• Never omit: resize handler, viewport meta, requestAnimationFrame, touch handlers
• Never omit

  depthWrite: false

  on transparent overlay materials (stars, threads)
• Never use synchronous font loading — CSS

  @font-face

  with

  font-display: swap

• Never hardcode window dimensions — always

  window.innerWidth/Height

• Never skip WebGL error handling — always provide a text fallback
• Never use pure black (

  #000000

  ) — use rich off-blacks (

  #050508

  ,

  #0a0a12

  )
• Never default to icosahedron — derive geometry from the concept
• Never embed the phosphor-vigil shaders inline — always

  import { PhosphorVigil } from './phosphor-vigil.js'

  , the pipeline is shared identity across modes
• Never rename the

  IMAGES_INJECTION_POINT

  sentinel or the

  IMAGE_MANIFEST

  const in Mode 3 — the image-well bridge depends on both
• Never clone skinned meshes with plain

  .clone()

  in Mode 4 — always

  SkeletonUtils.clone

  from

  three/addons/utils/SkeletonUtils.js

• Never use drei (

  useGLTF

  ,

  useAnimations

  ) — load models directly via

  GLTFLoader

  and animate via

  AnimationMixer

Post-Generation QA

python3 ~/.claude/skills/threejs-particle-canvas/scripts/validate_canvas.py output.html

Checklist:

1. Three.js CDN import present
2. Canvas container and WebGLRenderer
3. requestAnimationFrame loop
4. Window resize handler
5. Mobile viewport meta tag
6. At least 2 phases defined
7. Touch event handlers
8. WebGL error fallback
9. BufferGeometry particle system
10. PerspectiveCamera setup