Synthwave sunset · qwen3-coder-flash
Create an animated synthwave sunset: a glowing gradient sun with scanlines setting over an infinite neon grid that scrolls toward the viewer, with a starfield and a reflected horizon.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Create an animated synthwave sunset: a glowing gradient sun with scanlines setting over an infinite neon grid that scrolls toward the viewer, with a starfield and a reflected horizon.
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Synthwave Sunset</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Arial', sans-serif; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .title { position: relative; z-index: 2; color: white; text-align: center; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; font-size: 2rem; margin-bottom: 20px; animation: pulse 3s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .subtitle { position: relative; z-index: 2; color: #00ffff; text-align: center; font-size: 1rem; text-shadow: 0 0 5px #00ffff; } </style> </head> <body> <div class="title">SYNTHWAVE SUNSET</div> <div class="subtitle">Glowing Gradient Sun with Scanlines Over Neon Grid</div> <canvas id="scene"></canvas> <script> // Get canvas and context const canvas = document.getElementById('scene'); const ctx = canvas.getContext('2d'); // Set canvas to full window size function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // Sun properties const sun = { x: canvas.width / 2, y: canvas.height, radius: 80, glowRadius: 150, hue: 30, saturation: 100, lightness: 50, speed: 0.5 }; // Grid properties const grid = { size: 40, speed: 2, color: [255, 50, 255], // Neon pink alpha: 0.7 }; // Star properties const stars = []; const starCount = 500; // Initialize stars for (let i = 0; i < starCount; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2 + 0.5, brightness: Math.random() * 0.5 + 0.5, speed: Math.random() * 0.5 + 0.1 }); } // Scanline effect const scanlines = { speed: 1, opacity: 0.1 }; // Draw gradient sun function drawSun() { // Create radial gradient for sun const gradient = ctx.createRadialGradient( sun.x, sun.y, 0, sun.x, sun.y, sun.radius ); // Sun core gradient.addColorStop(0, `hsla(${sun.hue}, ${sun.saturation}%, ${sun.lightness + 30}%, 1)`); gradient.addColorStop(0.3, `hsla(${sun.hue}, ${sun.saturation}%, ${sun.lightness + 10}%, 0.8)`); gradient.addColorStop(0.6, `hsla(${sun.hue}, ${sun.saturation}%, ${sun.lightness}%, 0.4)`); gradient.addColorStop(1, `hsla(${sun.hue}, ${sun.saturation}%, ${sun.lightness - 20}%, 0)`); // Draw sun ctx.beginPath(); ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); // Sun glow const glowGradient = ctx.createRadialGradient( sun.x, sun.y, sun.radius, sun.x, sun.y, sun.glowRadius ); glowGradient.addColorStop(0, `hsla(${sun.hue}, ${sun.saturation}%, ${sun.lightness}%, 0.3)`); glowGradient.addColorStop(1, `hsla(${sun.hue}, ${sun.saturation}%, ${sun.lightness}%, 0)`); ctx.beginPath(); ctx.arc(sun.x, sun.y, sun.glowRadius, 0, Math.PI * 2); ctx.fillStyle = glowGradient; ctx.fill(); } // Draw grid function drawGrid(time) { const gridSize = grid.size; const offsetX = (time * grid.speed) % gridSize; ctx.strokeStyle = `rgba(${grid.color[0]}, ${grid.color[1]}, ${grid.color[2]}, ${grid.alpha})`; ctx.lineWidth = 1; // Vertical lines for (let x = -offsetX; x < canvas.width + gridSize; x += gridSize) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } // Horizontal lines for (let y = -offsetX; y < canvas.height + gridSize; y += gridSize) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } } // Draw stars function drawStars(time) { for (let i = 0; i < stars.length; i++) { const star = stars[i]; // Move stars toward viewer star.x -= star.speed * time * 0.1; // Reset stars that go off screen if (star.x < 0) { star.x = canvas.width; star.y = Math.random() * canvas.height; } // Draw star ctx.fillStyle = `rgba(255, 255, 255, ${star.brightness})`; ctx.beginPath(); ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2); ctx.fill(); } } // Draw scanlines function drawScanlines(time) { ctx.fillStyle = `rgba(0, 0, 0, ${scanlines.opacity})`; for (let y = 0; y < canvas.height; y += 4) { if (Math.floor((y + time * scanlines.speed) / 4) % 2 === 0) { ctx.fillRect(0, y, canvas.width, 2); } } } // Draw reflected horizon function drawHorizon() { const gradient = ctx.createLinearGradient(0, canvas.height / 2, 0, canvas.height); gradient.addColorStop(0, 'rgba(255, 0, 255, 0.1)'); gradient.addColorStop(0.5, 'rgba(0, 255, 255, 0.05)'); gradient.addColorStop(1, 'rgba(0, 0, 255, 0)'); ctx.fillStyle = gradient; ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2); } // Animation loop let time = 0; function animate() { time += 0.01; // Clear canvas with a dark background ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw elements drawStars(time); drawGrid(time); drawHorizon(); drawSun(); drawScanlines(time); requestAnimationFrame(animate); } // Start animation animate(); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.