This is a long-running multi-hour visual engineering project. Build a highly polished browser experience in which an enormous GPU particle system continuously transforms between beautiful large-scale forms. PROJECT NAME: PARTICLEVERSE The final result must be visually stunning enough to post as a short video without explanation. Do not build unrelated application features, authentication, a backend, or content-heavy menus. ================================================== PRIMARY EXPERIENCE ================================================== Create a 60–90 second cinematic sequence where hundreds of thousands to more than one million particles transform between distinct worlds and structures. Candidate sequence: 1. silent point cloud 2. spiral galaxy 3. collapsing black-hole vortex 4. giant ocean wave 5. tornado or atmospheric vortex 6. blooming organic structure 7. abstract human-scale silhouette or sculpture 8. the word or symbol PARTICLEVERSE 9. final explosive expansion into a new galaxy The transitions must be fluid, intentional, dimensional, and visually coherent. After the cinematic, unlock an interactive sandbox. ================================================== RESEARCH AND PLANNING ================================================== Research: - WebGPU compute particles - GPU-based particle integration - ping-pong textures and WebGL2 fallback techniques - SDF target fields - point-cloud morphing - curl noise - divergence-free flow fields - attractor systems - spring/damping systems - temporal trails - additive vs physically plausible blending - depth sorting alternatives - millions-of-particles performance - modern generative motion art - cinematic particle composition Create: - `docs/RESEARCH.md` - `docs/ART_DIRECTION.md` - `docs/SIMULATION.md` - `docs/ARCHITECTURE.md` - `docs/PERFORMANCE.md` - append-only `PROGRESS.md` ================================================== UNLAZY EXECUTION ================================================== Install/read the latest `Leonxlnx/unlazy`. Use approximately tree depth 5 or 6. Create gates for: - GPU simulation - rendering - morph targets - cinematic sequence - interaction - performance - visual QA - social output - verification Use fresh subagents where available for: - GPU compute architecture - generative-art direction - motion design - performance review - hostile visual review Verify all important claims yourself. ================================================== TECHNICAL FOUNDATION ================================================== Use: - Vite - TypeScript - direct Three.js - WebGPU compute as the preferred high-end path - intelligent fallback with reduced particle count if necessary Required commands: - `npm run dev` - `npm run build` - `npm run verify` - `npm run capture` - `npm run benchmark` Use deterministic seeds. Support quality presets. ================================================== PARTICLE SYSTEM ================================================== High mode should attempt at least 1,000,000 active particles if the environment and implementation permit it. Do not sacrifice the entire visual result merely to claim a large number. The system needs: - GPU-resident state - position - velocity - target or field information - per-particle phase/seed - color or energy state - stable updates - adaptive particle counts - minimal CPU-GPU synchronization Avoid per-particle JavaScript updates. Measure actual active particle counts and performance. ================================================== MORPHING ================================================== Do not simply lerp every particle from A to B in a straight line. Build transitions using combinations of: - target attraction - curl fields - orbital motion - turbulence - staged release - waves of activation - local delays - spring behavior - controlled overshoot - density preservation - camera choreography - color/energy evolution Each form must be readable before transitioning. Transitions should have anticipation, transformation, and settling. No abrupt snapping. ================================================== FORM QUALITY ================================================== Create at least seven visually distinct states. Each must have: - recognizable silhouette - internal motion - layered depth - local variation - intentional density - distinctive palette - a strong hero camera The galaxy must not be a flat disk of points. The wave must not be a sine curve. The tornado must not be a simple cone. The final logo/text state must not look like ordinary DOM text with particles placed over it. ================================================== RENDERING ================================================== Use high-quality particle rendering: - depth-aware size - subtle size variation - energy/color variation - soft particles where useful - restrained bloom - proper tone mapping - depth and fog - controlled motion trails - good anti-aliasing - no giant blurry circles - no harsh square sprites Experiment with: - point sprites - instanced quads - custom fragment shaders - anisotropic streaks - velocity-based elongation - temporal accumulation Choose based on measured visual quality and performance. ================================================== INTERACTION ================================================== After the cinematic, allow the user to: - select forms - trigger morphs - attract/repel particles with pointer input - create vortices - adjust turbulence - adjust time scale - pause - rotate camera - hide UI - replay cinematic Input must feel responsive and satisfying rather than gimmicky. ================================================== ART DIRECTION ================================================== Use a coherent visual language: - mostly dark background - deep spatial contrast - rich but controlled color - large readable forms - moments of near-silence - moments of extreme energy - smooth exposure changes - cinematic camera movement Avoid generic purple-gradient AI visuals. Do not make every state neon rainbow. Each state should have its own identity while belonging to one system. ================================================== VISUAL QA ================================================== Create at least nine deterministic capture states: 1. galaxy 2. galaxy close-up 3. collapse 4. wave 5. vortex/tornado 6. organic bloom 7. sculpture/silhouette 8. PARTICLEVERSE state 9. final expansion Store under: `artifacts/screenshots/` Create automated capture. After the first baseline, complete at least SIX full visual refinement cycles. Each cycle: - capture - hostile review - score - rank visible defects - improve - recapture - document Review: - form readability - morph quality - depth - motion - color - composition - particle rendering - temporal stability - performance - originality - post-worthiness ================================================== AUTOMATIC FAILURE CONDITIONS ================================================== Fail and continue if: - particles visibly snap - motion is mostly random noise - the result looks 2D - all particles have the same size/color - forms are unreadable - transitions are plain linear interpolation - bloom hides the particles - performance collapses during morphs - the experience resembles a common particle tutorial - the cinematic lacks pacing - UI dominates the visuals ================================================== PERFORMANCE ================================================== Measure: - actual particle count - FPS - frame time - update cost - render cost - resolution - quality preset - memory indicators where available Create adaptive presets such as: - Low - Medium - High - Extreme No fabricated numbers. ================================================== SOCIAL OUTPUT ================================================== Create: - nine clean hero screenshots - one thumbnail - a deterministic 20–40 second highlight timeline - MP4/WebM if tooling permits - otherwise frame sequence Store under: `artifacts/social/` The highlight should work without UI or explanatory text. ================================================== COMPLETION ================================================== Completion requires: - verify/build pass - no meaningful runtime errors - cinematic works - sandbox works - at least seven high-quality forms - at least nine captures - six refinement cycles - real benchmark - final hostile review average >= 8.5/10 - no major category below 8 - no automatic failure conditions - committed final state Report final commit, commands, particle counts, benchmarks, captures, scores, limitations, and social assets. The target reaction is: “Wait, that is running live in the browser?”