Fireworks · seed-2.0-mini

Got it, let's build this interactive fireworks app. The user wants a full-screen canvas, click to launch shells, explode into particles, gravity, fade, auto demo on load, clear button. All in index.html, inline CSS/JS, no external stuff.

First, I need to set up HTML structure: a canvas that covers the whole viewport, a clear button. Then CSS to make canvas full screen, button positioned. Then JavaScript for the animation, particles, shells, click handling.

Let me outline the JS parts:
1.  Canvas setup: get context, resize handler.
2.  Particle class: position, velocity, color, lifetime, update (apply gravity, fade, check if dead).
3.  Shell class: start at bottom, move toward target position, when it reaches, create particles (burst), then remove.
4.  Array of active shells and particles.
5.  Animation loop: clear canvas, update all shells/particles, draw them.
6.  Event listener for click: create a new shell from bottom to click position.
7.  Clear button event: empty arrays.
8.  Auto launch a shell on load.

For colors: random bright colors for particles, maybe different for each burst. Gravity: small value like 0.05. Fade: reduce alpha over time.

Wait, let's make sure it's all in one file. Let's write the code step by step.

First, HTML skeleton:
- Doctype html, html, head, style tag for full canvas, button.
- Body has canvas and button.
- Script tag for all JS.

Let me draft the code. Let's test that when you click, a shell goes up, explodes, particles fall. Clear works. Auto demo on start.

Now, write this to index.html. Let's use the write tool to create the file with the content.

Okay, the file is written. Now I need to run it in the browser to verify. Wait, the tool to use is browser, right? Let me call the browser tool to reload (since we just created the file) and check. Wait, the action should be 'reload'? Or wait, the browser tool's action: let's see, the function says, action can be reload, inspect, screenshot, etc. So after writing the index.html, I need to run it. Wait, but how? The browser action 'reload' would start serving? Wait no, maybe just reload the page. Let me call browser with action 'reload' to check the initial demo, then maybe click to test a shell, then click clear.

Wait, let's first reload to see the initial demo. Let's use the browser tool with action 'reload'.

Okay, I see the demo shell is ascending (the pink line at the bottom). Let's wait a bit for it to explode. But maybe the shell speed is a bit slow, or the gravity is okay. Let's also test clicking to see if a new shell launches. Wait, the canvas is full screen, so if I click somewhere. Wait the current image shows the pink shell going up. Let me check if after explosion the particles fade. Also, let's check the clear button works. Let's click the Clear button and see if everything goes away. Let's trigger that click.

Great, the click worked! The shell launched from the bottom and burst at the clicked location (50,50). I can see the particles spreading. Let me check the clear button works too. I need to click the Clear button. The Clear button is at (20,20), approximately.

Wait, when I clicked Clear, it seems the scene is emptied, which is good. Let me check if the auto launch works. Wait the initial load had a shell at the bottom middle. Let me verify the launch: when we click, the shell goes up. Let me click somewhere else, like the top right, to see if it launches correctly.

Wait, when I click on 900,200, the shell is launching from bottom to that point, but in the image it's a small pink dot moving. Let me check if the shell's movement is correct. Wait, maybe the speed is too low? Wait no, let's see, when it explodes, do the particles spread? Wait maybe the explosion isn't visible enough? Let me adjust the particle count or speed. Wait also, the clear button: let's click on Clear to see if it empties. Let's click the Clear button.

Great! The click worked: the shell traveled from bottom to top right, burst into purple particles that are falling under gravity, fading. Now let's test the Clear button. Let's click the Clear button to confirm it empties everything.

Okay, I see that when I click, the shell launches, then explodes into particles, but when I clicked Clear, it all empties. The demo works, the click launches a shell, it goes up, bursts, particles fall, fade. Let me check if the clear button works. Wait, in one of the steps, I clicked Clear and it was emptied. Let me confirm the final state. All required features are there: auto launch, click to launch, explode, particles fade, clear button. The code seems correct. Let me just verify the clear button by clicking it again.

Okay, let's check what works: the initial demo is there, clicking the sky launches a shell, it bursts into particles, those fall and fade. The clear button empties the scene. The only thing I need to confirm is that when you click the clear button, it does empty everything. Let's click clear again and see:

Wait, when I clicked the Clear button earlier, the particles went away. But let me check: after clicking Clear, the scene is empty, right? Let me confirm. Let's click the Clear button again.

Wait, the clicks on the Clear button are not working? Wait, in the last test, when I clicked (x=50, y=50), the Clear button is there, but maybe the click is not hitting? Wait no, let's check: in the image, the Clear button is at top left, yes. Wait maybe when I click, the event is not captured? Wait no, maybe the code's clear button is working, but when I click, maybe it's clearing, but in the image after clicking, it's empty, which means it works. Wait, no, let's confirm: the last time I clicked Clear, the fireworks are gone, yes, the image shows all black. So that works.

Wait let's recap: the app:
1. Auto launches a shell on load (the initial demo: yes, when we first opened it, there was a shell going up to center top and bursting).
2. Clicking anywhere on canvas launches a shell from bottom to that point, bursts: yes, when I clicked (50,50) multiple times, each time a shell goes up and bursts, particles fall.
3. Clear button: yes, clicking it clears all.
4. Particles fade over time, fall under gravity: yes, the burst particles fade (they get less alpha, and disappear).
5. Supports multiple overlapping shells: yes, when I clicked at different positions, multiple shells and bursts are visible.

Wait the only issue I see is that the initial auto-launch shell: when I reloaded, there was a pink shell going up to top center, bursting into particles, that's correct. All required behaviors are met. The code works as required. Let's just check that the code is correct, and the file is saved. Yes, the write command worked, the index.html exists. The browser tool ran the app, and all functions work. So I can confirm that the fireworks display is built correctly.