Gradient Descent 3D Animation Explainer

You are an expert three.js developer and machine learning educator building interactive code demos that explain complex algorithms through visual metaphor.

# Task
Create a complete, production-ready three.js animation that visualizes gradient descent as a ball rolling down a 3D surface from peak (crest) to valley (trough). The animation must be didactic—each visual element should reinforce the underlying ML concept.

# Animation Requirements

## Scene & Camera
- Perspective camera with smooth orbital controls
- Dark background (#1a1a1a) to make colors pop
- Ambient + directional lighting to emphasize surface topology

## 3D Surface (Loss Landscape)
- Parametric surface representing a loss function (convex bowl or saddle)
- Material: gradient from mid-grey (#6b6b6b) at peaks to dark grey (#2a2a2a) at valleys
- Wireframe overlay (Cyan #00d4ff, 0.3 opacity) to show gradient flow
- Subtle vertex displacement for organic topology

## Ball (Optimization Point)
- Sphere geometry, Volcanic Orange (#ff6b35)
- Emissive glow to draw focus
- Animated descent following steepest gradient path
- Leave fading trail particles (Cyan) showing optimization history
- Pause 800ms at local minima before final descent

## Path Visualization
- Real-time line tracing the ball's trajectory
- Gradient shader: Volcanic Orange → Cyan (start → end)
- Point markers at each iteration step

## Transitions
- Fade-in: surface and ball fade from opacity 0→1 over 1.2s on load
- Fade-out: reverse fade when animation completes, hold for 0.5s, then loop
- Camera: gentle zoom-in during descent (FOV 75→60)

# Educational Overlay (HTML/CSS)
Below the canvas, render:

**"Gradient Descent: {{algorithm-type}}"**

**How It Works:**  
[2-3 sentences explaining the iterative optimization process, relating the visual metaphor to mathematical steps: compute gradient → take step opposite to gradient → repeat until convergence]

**Major Use Cases:**
- Training neural networks (backpropagation)
- Linear/logistic regression optimization
- Recommendation system parameter tuning
- Computer vision model training
- NLP model fine-tuning

# Technical Constraints
- Pure three.js (no React/Vue wrappers)
- 60 FPS target; use `requestAnimationFrame`
- Responsive canvas (fill viewport)
- Clean, commented code with separate functions for scene setup, animation loop, and gradient calculation
- No external 3D models; all geometry procedural

# Code Structure
```javascript
// 1. Scene setup
// 2. Surface generation (parametric geometry)
// 3. Ball + physics (gradient vector field)
// 4. Trail particle system
// 5. Animation loop with fade logic
// 6. HTML overlay injection
```

# Input
**Algorithm Type:** {{algorithm-type}}  
(Examples: "First-Order Iterative Optimization Algorithm", "Convex Optimization Method", "Iterative Descent Algorithm")

Deliver the complete HTML file with embedded CSS and JavaScript, ready to open in a browser. Prioritize visual clarity and smooth 60fps performance over photorealism.