Fireworks · grok-build-0.1
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
transcript · 8 messages
Create a fireworks display on a full-screen canvas where clicks launch shells that explode into gravity-affected, fading particle bursts.
thinking
The task is: "Build a single-page web app and write it ALL into one self-contained file named index.html in the current directory: CSS in a <style> tag, JS in a <script> tag, inline — do not create se...
{"command":"ls -la /tmp/ws"}total 0 drwxr-sr-x. 2 node node 6 Aug 1 19:57 . drwxrwsrwx. 3 root node 16 Aug 1 19:57 ..
thinking
The task is to build a single-page web app in one self-contained file named index.html. It should be a fireworks display on a full-screen canvas. Clicks launch shells that explode into gravity-affecte...First, the user wants a single self-contained index.html file with HTML, CSS in <style>, JS in <script>, all inline. No external resources.
It's a fireworks display on full-screen canvas.
Clicks launch shells that explode into gravity-affected, fading particle bursts.
I need to create:
- Canvas full-screen.
- CSS: body { margin:0; overflow:hidden; background:black; } canvas { display:block; }
- JS: animation loop with requestAnimationFrame.
Implement:
- Shells: launched from bottom (say center x, y=height), towards click point.
- Shell moves with gravity? Typically fireworks shells go up with initial velocity, decelerate due to gravity.
- So shell: x,y,vx,vy (vy negative for up), each frame x+=vx, y+=vy, vy+=g (g=0.1 or so), if y<0 or time>explode_time, explode.
- Explosion: 100+ particles random direction, initial speed, then gravity on them.
- Particles: x,y,vx,vy, alpha=1, decrease by 0.01 each frame, size maybe fixed.
- Draw: clear with rgba(0,0,0,0.1) for trails, or full black 0.2.
- Use shadowBlur for glow.
- Colors: random or specific firework colors.
- Handle resize.
- On click: launch shell from bottom center to mouse position.
Let's code it in mind.
Full code structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF- 8">
<title>Fireworks</title>
<style>
body {margin:0; overflow:hidden; background:#000;}
canvas{display:block;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
// JS code here
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
window.addEventListener('resize', () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
});
let shells = [];
let particles = [];
const GRAVITY = 0.15;
const GROUND_Y = height; // but launch from height
function launchShell(e) {
const x = e.clientX;
const y = e.clientY;
// launch from bottom center? or from x, bottom
const launchX = x; // launch from click x at bottom
const launchY = height;
const dx = x - launchX;
const dy = y - launchY;
const dist = Math.sqrt(dx*dx + dy*dy);
const speed = 8; // initial speed up
const vx = dx / dist * speed * 0.5; // horizontal component
const vy = -dy / dist * speed * 0.5 - 10; // vertical strong up
shells.push({x:launchX, y:launchY, vx, vy, color: `hsl(${ Math.random()*60 + 0, 100%, 70%})`});
}
canvas.addEventListener('click', launchShell);
// for touch too? add 'touchstart'
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
launchShell(e .touches[0]);
});
function explode(shell) {
const numParticles = 100;
for(let i=0; i<numParticles; i++) {
const angle = Math.random()*Math.PI*2;
const speed = Math.random()*5 + 3;
particles.push ({
x: shell.x,
y: shell.y,
vx: Math.cos(angle)*speed,
vy: Math.sin(angle)*speed - 2, // up bias
alpha: 1,
life: 1,
color: shell.color
});
}
}
function update() {
// update shells
for(let i=shells.length-1; i>=0; i--) {
const s = shells[i];
s.x += s.vx;
s.y += s.vy;
s.vy += GRAVITY;
if(s.y < 0 || s.vy > 0) { // exploded
explode(s);
shells.splice(i,1);
}
}
// update particles
for(let i=particles.length-1; i>=0; i--) {
const p = particles[i];
p.x += p./tmp/ws/index.html (9489 bytes)Successfully wrote 9489 bytes to /tmp/ws/index.html
thinking
The user wants a single-page web app with fireworks on a full-screen canvas. All content must be in one index.html file, self-contained, no external resources.
{"command":"ls -la /tmp/ws/index.html && wc -c /tmp/ws/index.html"}-rw-r--r--. 1 node node 9489 Aug 1 19:58 /tmp/ws/index.html 9489 /tmp/ws/index.html
thinking
The file is created. It's a single self-contained index.html with full-screen canvas fireworks.
Created `/tmp/ws/index.html` — a fully self-contained, single-file fireworks display. **Features:** - Full-screen canvas with dark night sky - Click/touch anywhere to launch shells (aimed toward click point) - Shells follow realistic ballistic trajectories with gravity - Explosions create dense particle bursts with: - Gravity affecting every particle - Air drag - Per-particle fading and size scaling - Varied hues around the shell's color - Bright core flash + lingering embers - Twinkling background stars - Subtle vignette - Auto-launches at startup + occasional random fireworks - Keyboard: `Space` for double launch, `r` to clear - Touch-friendly and responsive to window resizing Open `index.html` in any browser — everything runs completely offline with no external dependencies.
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
EVALUATION
Fireworks launch and explode into colorful fading particle bursts responding to clicks and other inputs, with gravity-like fall visible.
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.