{"claude_md":"# Canvas Particle System\n\nHTML5 Canvas particle fountain with gravity, color palettes, and fade trails. Beginner-friendly visual demo.\n\n## Quick Reference\n\n# Canvas Particle System\n\n> **Difficulty:** Beginner | **Runtime:** HTML5 Canvas | **Output:** Visual animation\n\nTeach an AI agent to generate a colorful particle fountain with gravity, fade trails, and configurable color palettes using the HTML5 Canvas API.\n\n## What You'll Build\n\nA self-contained HTML file that renders an animated particle system:\n- Particles spray upward from the bottom center of the canvas\n- Gravity pulls particles back down in natural arcs\n- Each particle has a random color from a curated palette\n- Particles fade out as they age, creating trailing effects\n- The system runs at 60fps using `requestAnimationFrame`\n\n## Core Concepts\n\n### 1. Particle Data Structure\n\nEach particle tracks position, velocity, age, and color:\n\n```javascript\n{\n x: number, // horizontal position\n y: number, // vertical position\n vx: number, // horizontal velocity\n vy: number, // vertical velocity\n life: number, // remaining life (0-1)\n color: string, // HSL color string\n size: number // radius in pixels\n}\n```\n\n### 2. Physics Update Loop\n\nEvery frame:\n1. **Emit** new particles at the source point\n2. **Update** each particle's position: `x += vx`, `y += vy`\n3. **Apply gravity**: `vy += GRAVITY`\n4. **Age** particles: `life -= decay`\n5. **Remove** dead particles (`life <= 0`)\n6. **Render** each particle as a filled circle with alpha = life\n\n### 3. Color Palettes\n\nUse HSL color space for vibrant, varied particles:\n- **Fire:** hues 0-60 (red → yellow)\n- **Ocean:** hues 180-240 (cyan → blue)\n- **Forest:** hues 90-150 (green spectrum)\n- **Rainbow:** random hue 0-360\n\n## Instructions\n\n1. Create an HTML file with a full-viewport `