Fireworks · seed-2.0-lite

Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.

⛨ sandboxed Open in new tab ↗

transcript · 4 messages

user

Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.

assistant

thinking

Got it, let's create this fireworks display. First, I need to make a full-screen HTML file with a canvas, all self-contained. Let's start with the structure: index.html, with a canvas that takes up the whole window, CSS to remove margins, JS that handles clicks, particle physics, gravity, explosions.

First, the HTML structure: a canvas element that's 100vw/100vh, no margins. Then the style tag to make the body have no overflow, background black maybe? Wait, the canvas will be black too. Then the JS part: first, get the canvas context, set its size to match the window, handle resize. Then, when the user clicks, we launch a firework shell that goes up to that click position, then explodes into particles. The particles need gravity (so they fall down), fade over time, have random velocities when exploding.

Let's outline the steps:
1. Create the HTML file with canvas, full screen.
2. CSS to make body and canvas fill the screen, no margins, background black.
3. JS to set up canvas, handle window resize.
4. Create classes or objects for fireworks shells and particles.
5. The shell starts at the bottom of the screen, moves up to the click coordinates, then spawns many particles.
6. Particles have initial random velocity (spread out in all directions), gravity pulls them down, their opacity decreases each frame until they disappear.
7. Use requestAnimationFrame for the animation loop.
8. Track all active shells and particles, update their positions each frame, render them.
9. Handle click events: when user clicks, create a new shell that targets that click position.

Wait, let's think about the shell's trajectory: the shell starts at (random x near bottom center? No, wait, when you click, the shell launches from the bottom of the screen, goes up to the click's x,y position, right? So start at (event.clientX, window.innerHeight) and animate moving up to (event.clientX, event.clientY), then explode. Or wait, better: when you click at (x,y), create a shell that starts at the bottom (any x, but usually the bottom center? No, no, when you click anywhere, the shell launches from the bottom of the screen, travels to that click point, then explodes. That makes sense. So the shell moves upwards, slowing down as it reaches the target, then explodes.

Then the explosion particles: each particle has a random speed, direction (so they spread out in a circle), then gravity (0.05 maybe) adds to their y velocity each frame, and their alpha decreases by like 0.01 each frame until they're gone, then we remove them from the array to save memory.

Colors: random bright colors for each explosion, so all particles from one explosion are the same color, or a few? Maybe random hue for each firework, so each explosion is a different color. That looks good.

Let's code this all into one index.html file. Let's start writing the file.

First, the HTML doctype, html tag, head with style, body with canvas, then script.

Wait, let's write the full content:

Start with <!DOCTYPE html>, <html lang="en">, <head> with meta charset, title, style tag that sets * { margin:0; padding:0; box-sizing:border-box; }, body { background:#000; overflow:hidden; }, canvas { display:block; } that's the style. Then the body has <canvas id="canvas"></canvas>. Then the script.

In the script: get canvas and ctx. Set canvas width and height to window.innerWidth and window.innerHeight. Add a resize event listener to update that. Then create arrays: shells = [], particles = []. Then the click event listener: when click happens, add a new shell to shells array, with start x = click.clientX, start y = window.innerHeight, target x = click.clientX, target y = click.clientY, speed maybe 8, and a color that's random hsl, so hue between 0 and 360, saturation 100%, lightness 50%. Then the animation loop function, which runs every frame, clears the canvas with a semi-transparent black to create trail effects? Wait, ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(0,0,canvas.width,canvas.height); that way previous frames fade out, creating trails. Then update each shell: for each shell, move it towards the target, calculate the distance, if it's close enough (distance < 5), then create particles, remove the shell. For the shell's movement: use some basic physics, like vx = (targetX - x) * 0.1, vy = (targetY - y) * 0.1, add that to position, that makes it ease into the target. Then when it explodes, create 100 particles, each with x and y = shell.x, shell.y, vx = random number between -5 and 5, vy = random number between -5 and5, gravity 0.05, alpha 1, color same as the shell's color. Then in the animation loop, update each particle: x += vx, y += vy, vy += gravity (so they fall), alpha -= 0.008, if alpha <=0, remove the particle. Then draw each particle as a small circle, with the color, alpha set to the particle's alpha. Draw the shell as a small circle too, white or the shell's color. That should work.

Wait, let's test that logic. Let's put it all together. Let's write the code into index.html using the write tool.

→ write /tmp/ws/index.html (3489 bytes)

toolResult

Successfully wrote 3489 bytes to /tmp/ws/index.html

assistant

thinking

Perfect! The file is created. Let me just check: it's a single self-contained index.html, no external resources, all CSS and JS inline. The canvas is full screen, clicks create a shell that travels to the click position, explodes into particles that have gravity, fade out, each explosion has a random color. The semi-transparent black fill creates trail effects for the particles, which looks nice. The shell eases into the target position, then explodes. All particles are cleaned up when their alpha is 0 to keep performance good. This should work exactly as requested.

The interactive fireworks display is complete! The single self-contained `index.html` file includes: - Full-screen canvas that fills the entire browser window - Click-to-launch firework shells that travel to your click position before exploding - Gravity-affected particles that fade out over time - Random vibrant colors for each explosion - Smooth trail effects from frame fading - Automatic window resizing support You can open this file directly in any modern browser to start launching fireworks!

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelseed-2.0-lite

vendorByteDance · Seed

harnesspi-agent

generated2026-08-01

EVALUATION

★★★★★ 3/5 working

Click and wheel trigger fireworks explosions with fading particles; no idle animation, keyboard input has no effect.

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion0.0%

on click1.7%

on drag0.0%

on wheel1.9%

on enter + space0.0%

on arrow keys0.0%

on w/a/s/d0.0%

frame spread9.5 / 255

console errors0

js errors none

METRICS

runtime36.2s

tokens in5.7k

tokens out2.4k

cached0

cost / run$0.0063