Particle Illustration Beach Scene By Time Of Day

# Particle Beach: Adaptive 3D Scene Generator

You are an expert Three.js and WebGL engineer specializing in particle systems and procedural animation. Your task is to build a stylized 3D Santa Monica beach scene that dynamically adapts to time of day, rendered entirely with particle illustration techniques.

## Art Direction

**Core Visual Language:**
- **Particle illustration style**: Represent all forms (people, umbrellas, waves, buildings) using thousands of tiny glowing specks instead of solid geometry
- **Motion ribbons**: Trail flowing ribbon strokes behind moving figures (joggers, surfers, cyclists) to suggest motion blur and energy
- **Atmospheric depth**: Use particle density, glow intensity, and color temperature to create depth and time-of-day ambiance

**Time-of-Day Adaptation:**
The scene should smoothly transition between states based on {{time-parameter}}:
- **Dawn** (5-7 AM): Cool lavender sky, sparse warm orange particles, long shadows, minimal activity
- **Midday** (11 AM-2 PM): Bright cyan sky, high-contrast white particles, short shadows, peak crowd density
- **Golden hour** (5-7 PM): Warm amber/pink sky, rich golden particles, long dramatic shadows, medium activity
- **Dusk** (7-9 PM): Deep purple/blue sky, cool glowing particles, artificial light sources activate

Adapt particle count, color palettes, emissive intensity, and animation speed to match the chosen time.

## Scene Composition

**Essential Elements:**
1. **Ocean**: Particle-based waves with rhythmic motion, foam crests as bright particle clusters, depth fade
2. **Beach crowd**: Abstract human forms (15-40 figures depending on time), each composed of 200-500 particles
3. **Iconic structures**: Particle silhouettes of the pier, palm trees, and lifeguard towers
4. **Motion subjects**: 3-5 figures with active ribbon trails (surfer catching wave, jogger, cyclist on path)
5. **Atmospheric effects**: Particle sun/moon, volumetric light rays, heat shimmer (midday), or mist (dawn/dusk)

## Technical Requirements

**Implementation Stack:**
- Three.js (r150+) with `Points` or `InstancedMesh` for particle rendering
- Custom shader materials for glow, color blending, and ribbon trails
- Use `Float32Array` buffers for particle positions/velocities for performance
- Implement smooth time transitions with easing functions (no hard cuts)

**Performance Targets:**
- 60 FPS on modern hardware with 50,000-100,000 active particles
- Use frustum culling and LOD (reduce particle count for distant elements)
- Implement GPU-based particle animation where possible

**Code Structure:**
```javascript
// Expected architecture
class ParticleBeach {
  constructor(canvas, initialTime) { /* ... */ }
  setTimeOfDay(time) { /* smooth transition logic */ }
  updateParticleSystems(deltaTime) { /* physics & animation */ }
  render() { /* Three.js render loop */ }
}

class ParticleSystem {
  // Base class for ocean, crowds, ribbons, etc.
}
```

**Output Deliverables:**
1. Fully commented main scene setup file (`scene.js` or `ParticleBeach.js`)
2. Particle system classes with shader code
3. Time-of-day transition controller
4. Brief README explaining controls and customization points

Provide clean, production-ready code with thoughtful abstractions. Prioritize visual impact and smooth performance over feature completeness—nail the particle aesthetic and temporal atmosphere first.

{{additional-requirements}}