Three.js Particle Canvas
Generate interactive Three.js canvases in six modes — from ambient particle narratives to physically-accurate 3D glass hero sections. 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 alongside this skill.
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:
| Emotion | Rotation | Particles | Camera | Color | Threads |
|---|---|---|---|---|---|
| Stillness | delta * 0.02 | low opacity, scattered | tight (r=20) | cool dominant | 0 |
| Tension | accelerating | contracting toward center | steady | warm intensifying | few, brightening |
| Intimacy | delta * 0.05 | tight orbit (r=6), warm | close (r=18) | warm dominant | many, bright |
| Vastness | delta * 0.03 | wide scatter, dim | far (r=50+) | cool dominant | sparse |
| Release | decelerating | rapid expansion | pulling back | desaturating | dissolving |
| Arrival | near-still | assembling from void | approaching | cool warming | emerging |
Vary lerp rates between phases. The void is slow (0.008). Awakening accelerates (0.05). Conversation settles (0.03).
Composition Parameters
| Parameter | Range | Default | Effect |
|---|---|---|---|
particleCount | 100-5000 | 1200 | Particle field density |
phaseCount | 2-10 | 6 | Narrative phases |
cycleDuration | 30-180s | 90 | Total cycle length |
latticeGeometry | icosahedron/dodecahedron/octahedron/torus/none | concept-derived | Structural anchor |
latticeSubdivision | 1-4 | 2 | Lattice complexity |
coolColor | hex | concept-derived | Cool spectrum end |
warmColor | hex | concept-derived | Warm spectrum end (must contrast cool) |
backgroundColor | hex | #050508 | Scene background (never pure black) |
words | string[] | concept-derived | Labels for inspectable particles |
threadCount | 0-200 | 60 | Connection threads between nodes |
starCount | 0-10000 | 2000 | Background star density |
cameraRadius | 5-100 | 25 | Default camera distance |
fogDensity | 0-0.05 | 0.012 | Atmospheric fog |
font | string | concept-derived | Display 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
| Working on... | Load |
|---|---|
| Mode 1 source architecture, section map | references/instance-anatomy.md |
| Mode 1 particle systems, BufferGeometry, states | references/particle-patterns.md |
| Mode 1 phase state machine, transitions | references/phase-engine.md |
| Mode 1 camera, mouse/touch/keyboard | references/camera-and-input.md |
| Mode 1 fog, stars, vignette, threads | references/atmosphere.md |
| Mode 1 full source (1,192 lines) | assets/instance-source.html |
| Mode 2 spinner class + TSL patterns | references/spinner-patterns.md |
| Mode 2 parametric curves | references/parametric-curves.md |
| Mode 3 tunnel architecture, path gen, ring spawn | references/tunnel-patterns.md |
| Mode 3 full source | assets/tunnel-gallery-source.html |
| Mode 4 specimen architecture, behavior physics, glTF | references/specimen-patterns.md |
| Mode 4 full source | assets/butterfly-specimen-source.html |
| Mode 5 vinyl showcase architecture, all 6 systems | references/vinyl-showcase-patterns.md |
| Mode 5 OMMA source (81KB, unminified) | references/vinyl-bundle-annotated.js |
| Shared Phosphor Vigil FX pipeline | references/phosphor-vigil-fx.md |
| Shared FX module (importable standalone) | assets/phosphor-vigil.js |
| Mode 6 glass material, geometry, interaction, presets | references/glass-hero-design-system.md |
Theme Presets
Consciousness (Instance default): Lattice → Void → Awakening → Conversation → Simultaneity → Dissolution. Cool #a8d8ff / warm #ffd080. Icosahedron. Fog 0.012. Cycle 90s. Font: Space Mono. Feels like: a mind turning on, being present, then letting go. Signature: Simultaneity — camera crane-shot reveals 30 parallel instances. Durations: 10, 10, 15, 25, 15, 15. Words: wonder, language, pattern, reach, remember, human, meaning, now.
Oceanic: Abyss → Current → Bioluminescence → Pressure → Surface → Release. Cool #0a4f5c / warm #80ffdb. Torus. Fog 0.02 (dense). Cycle 120s (slow). Font: Lora. Feels like: descending into a trench, seeing light where no light should be. Signature: Bioluminescence — particles shift warm-bright against deep darkness. Durations: 15, 20, 25, 20, 20, 20. Words: depth, current, pressure, light, surface, drift, pulse, dark.
Cosmic: Nebula → Collapse → Ignition → Orbit → Expansion → Entropy. Cool #b388ff / warm `