oneshotlm
Compare all models on this prompt →

Fireworks · glm-4.5

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
The user wants me to create a single-page web app with a fireworks display on a full-screen canvas. The requirements are:
1. Full-screen canvas
2. Clicks launch shells
3. Shells explode into gravity-affected, fading particle bursts
4. Everything in one self-contained index.html file
5. CSS in <style> tag, JS in <script> tag
6. No external resources, CDNs, or network requests

Let me create this fireworks display with:
- A canvas that fills the screen
- Click handling to launch fireworks shells
- Animation loop for updating and rendering particles
- Physics: gravity affecting particles, fading opacity over time
- Colorful explosions with multiple particles per shell

I'll write this all into one index.html file.

I'll create a full-screen fireworks display with click-to-launch shells and physics-based particle explosions.

write /tmp/ws/index.html (10293 bytes)
toolResult

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

assistant
thinking
Done! I've created a complete fireworks display in a single HTML file. The app features:

1. **Full-screen canvas** - Automatically resizes with the window
2. **Click-to-launch shells** - Click anywhere to launch a firework shell to that position
3. **Physics-based particles** - Particles have:
   - Gravity pulling them down
   - Friction slowing their velocity
   - Fading opacity over time
   - Trail effects for visual flair
4. **Visual effects**:
   - Glowing particles with radial gradients
   - Colorful explosions with HSL colors
   - Shell trails as they ascend
   - Particle trails as they fall
   - Sparkle particles mixed in with main explosion
5. **Auto-launch** - Occasionally launches fireworks automatically for ambient effect
6. **Touch support** - Works on mobile devices too
7. **No external dependencies** - Everything is self-contained in one file

The display starts with one initial firework and then continues with occasional auto-launches, while also responding to user clicks.

Created a complete fireworks display in `index.html` with: - **Full-screen canvas** that auto-resizes - **Click/touch to launch** shells that travel to the clicked position - **Physics-based explosions** with: - Gravity pulling particles down - Friction slowing velocity - Fading opacity over time - **Visual effects**: - Glowing particles with radial gradients - Colorful HSL-based explosions (80-150 particles each) - Shell trails as they ascend - Particle trails as they fall - Sparkle particles mixed in - **Auto-launch** feature for ambient fireworks - **Touch support** for mobile devices Just open the file in a browser and click anywhere to launch 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

modelglm-4.5
vendorZ.ai · GLM
harnesspi-agent
generated2026-08-01

EVALUATION

4/5 working

Continuous colorful fireworks display with gravity-affected fading particles, clicks launch additional shells convincingly.

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 motion25.6%
on click24.3%
on drag15.7%
on wheel23.9%
on enter + space11.8%
on arrow keys21.0%
on w/a/s/d19.8%
frame spread28.3 / 255
console errors0
js errors none

METRICS

runtime74.2s
tokens in5.4k
tokens out2.8k
cached2.6k
cost / run$0.0082