threejs-particle-canvaslisted

Generate interactive Three.js canvases in four modes: (1) Narrative canvas — particle phase cycles with geodesic lattices. (2) Spinner/loader — parametric curve particle trails via WebGPU + TSL. (3) Infinite Gallery Tunnel — scroll-driven procedural corridor with walled images. (4) Living Specimens — glTF creatures with behavior physics. Ships a shared Phosphor Vigil FX module (feedback trails, CRT composite, scanlines, chromatic aberration) that is importable standalone into any Three.js scene. Output is self-contained HTML. This skill should be used when creating particle WebGL art, ambient 3D canvases, spinners, loaders, infinite scroll galleries, tunnel flythroughs, animated glTF specimens, or when adding a CRT post-processing pipeline to an existing Three.js project.
tdimino/claude-code-minoan · ★ 32 · Web & Frontend · score 85

Install: claude install-skill tdimino/claude-code-minoan

# 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` 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 s