Synthwave sunset · qwen3.5-9b

The user wants me to build an animated synthwave landscape on a full-screen canvas. Let me break down the requirements:

1. **Visual Elements:**
   - Glowing gradient sun broken by horizontal scanline bands
   - Starfield
   - Perspective neon grid extending from foreground to horizon
   - Stylized reflection of sun's colors on the ground plane (below horizon)
   - Second sun in the sky (different from reflection)

2. **Animation:**
   - Grid moving toward viewer (forward travel effect)
   - Sun moving slowly down toward horizon
   - Loop of 10-20 seconds that repeats without distracting reset jump
   - Pause/Resume and Restart controls

3. **Technical:**
   - Single HTML file with inline CSS and JS
   - No external resources, CDNs, or network requests
   - No third-party libraries
   - Canvas fits to viewport
   - Procedural drawing and colors only

Let me start building this:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS styles */
    </style>
</head>
<body>
    <canvas></canvas>
    <div id="controls">
        <button id="pauseBtn">Pause</button>
        <button id="restartBtn">Restart</button>
    </div>
    <script>
        // JavaScript for canvas drawing and animation
    </script>
</body>
</html>
```

Let me write the complete code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Synthwave Landscape</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            background: #000;
        }
        
        canvas {
            display: block;
        }
        
        #controls {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 100;
        }
        
        button {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            border: 2px solid #ff00ff;
            background: transparent;
            color: #ff00ff;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        button:hover {
            background: #ff00ff;
            color: #fff;
            box-shadow: 0 0 20px #ff00ff;
        }
        
        button.active {
            background: #ff00ff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="controls">
        <button id="pauseBtn">Pause</button>
        <button id="restartBtn">Restart</button>
    </div>
    <canvas id="canvas"></canvas>
    <script>
        // Canvas setup
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const pauseBtn = document.getElementById('pauseBtn');
        const restartBtn = document.getElementById('restartBtn');
        
        // Animation state
        let animationId = null;
        let time = 0;
        let isPaused = false;
        let animationDuration = 15000; // 15 seconds
        let lastTime = 0;
        
        // Synthwave colors
        const colors = {
            skyTop: '#000033',
            skyBottom: '#1a0033',
            sunGradient: ['#ff6600', '#ffcc00', '#ff6600'],
            gridColor: '#00ffff',
            gridSecondary: '#ff00ff',
            starColor: '#ffffff'
        };
        
        // Resize canvas to fit viewport
        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        window.addEventListener('resize', resize);
        resize();
        
        // Draw stars
        function drawStars() {
            ctx.fillStyle = colors.starColor;
            const starCount = Math.floor(canvas.width * canvas.height / 10000);
            
            for (let i = 0; i < starCount; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * (canvas.height * 0.4); // Only in top portion
                const size = Math.random() * 2;
                
                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI * 2);
                ctx.fill();
            }
        }
        
        // Draw sun with scanlines
        function drawSun() {
            const sunY = canvas.height * 0.3 + time * 0.0001;
            const sunRadius = Math.min(canvas.width, canvas.height) * 0.15;
            
            // Sun gradient
            const gradient = ctx.createRadialGradient(
                canvas.width / 2, sunY - sunRadius * 0.3, 0,
                canvas.width / 2, sunY, sunRadius
            );
            gradient.addColorStop(0, colors.sunGradient[0]);
            gradient.addColorStop(0.5, colors.sunGradient[1]);
            gradient.addColorStop(1, colors.sunGradient[2]);
            
            ctx.beginPath();
            ctx.arc(canvas.width / 2, sunY, sunRadius, 0, Math.PI * 2);
            ctx.fillStyle = gradient;
            ctx.shadowBlur = 50;
            ctx.shadowColor = colors.sunGradient[1];
            ctx.fill();
            ctx.shadowBlur = 0;
            
            // Scanlines
            ctx.strokeStyle = 'rgba(255, 0, 255, 0.3)';
            ctx.lineWidth = 2;
            const scanlineCount = 10;
            const scanlineHeight = sunRadius / scanlineCount;
            
            for (let i = 0; i < scanlineCount; i++) {
                const y = sunY - sunRadius * 0.3 + i * scanlineHeight;
                ctx.beginPath();
                ctx.moveTo(canvas.width / 2 - sunRadius, y);
                ctx.lineTo(canvas.width / 2 + sunRadius, y);
                ctx.stroke();
            }
        }
        
        // Draw grid
        function drawGrid() {
            const horizonY = canvas.height * 0.6;
            const fov = canvas.height * 0.4;
            const gridSpeed = 2;
            
            // Calculate grid position based on time
            const gridOffset = time * gridSpeed;
            
            // Vertical lines
            const numVerticalLines = 20;
            const spacing = canvas.width / numVerticalLines;
            
            for (let i = 0; i < numVerticalLines; i++) {
                const x = i * spacing + gridOffset;
                
                // Perspective calculation
                const perspectiveX = (x - canvas.width / 2) / (canvas.width / 2);
                const perspectiveY = horizonY + perspectiveX * fov;
                
                ctx.strokeStyle = colors.gridColor;
                ctx.lineWidth = 1;
                ctx.shadowBlur = 10;
                ctx.shadowColor = colors.gridColor;
                
                ctx.beginPath();
                ctx.moveTo(x, horizonY);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
            }
            
            // Horizontal lines
            const numHorizontalLines = 15;
            const horizontalSpacing = canvas.height / numHorizontalLines;
            
            for (let i = 0; i < numHorizontalLines; i++) {
                const y = horizonY + i * horizontalSpacing;
                
                ctx.strokeStyle = colors.gridSecondary;
                ctx.lineWidth = 1;
                ctx.shadowBlur = 10;
                ctx.shadowColor = colors.gridSecondary;
                
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
        }
        
        // Draw reflection
        function drawReflection() {
            const horizonY = canvas.height * 0.6;
            const sunY = canvas.height * 0.3 + time * 0.0001;
            const sunRadius = Math.min(canvas.width, canvas.height) * 0.15;
            
            // Calculate reflection position
            const reflectionY = horizonY + (horizonY - sunY);
            
            // Gradient for reflection
            const gradient = ctx.createLinearGradient(
                canvas.width / 2, reflectionY,
                canvas.width / 2, reflectionY + sunRadius
            );
            gradient.addColorStop(0, colors.sunGradient[0]);
            gradient.addColorStop(0.5, colors.sunGradient[1]);
            gradient.addColorStop(1, colors.sunGradient[2]);
            
            ctx.beginPath();
            ctx.arc(canvas.width / 2, reflectionY, sunRadius, 0, Math.PI * 2);
            ctx.fillStyle = gradient;
            ctx.globalAlpha = 0.5;
            ctx.fill();
            ctx.globalAlpha = 1.0;
        }
        
        // Main animation loop
        function animate(timestamp) {
            if (!isPaused) {
                time = timestamp;
                lastTime = timestamp;
            }
            
            // Clear canvas
            ctx.fillStyle = colors.skyTop;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Draw sky gradient
            const skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            skyGradient.addColorStop(0, colors.skyTop);
            skyGradient.addColorStop(1, colors.skyBottom);
            ctx.fillStyle = skyGradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Draw stars
            drawStars();
            
            // Draw sun
            drawSun();
            
            // Draw reflection
            drawReflection();
            
            // Draw grid
            drawGrid();
            
            // Loop
            animationId = requestAnimationFrame(animate);
        }
        
        // Event listeners
        pauseBtn.addEventListener('click', () => {
            isPaused = !isPaused;
            pauseBtn.textContent = isPaused ? 'Resume' : 'Pause';
            pauseBtn.classList.toggle('active', isPaused);
        });
        
        restartBtn.addEventListener('click', () => {
            if (animationId) {
                cancelAnimationFrame(animationId);
            }
            time = 0;
            isPaused = false;
            pauseBtn.textContent = 'Pause';
            pauseBtn.classList.remove('active');
            animate(performance.now());
        });
        
        // Start animation
        animate(performance.now());
    </script>
</body>
</html>
```

I'll continue building out the complete implementation with proper styling and animation logic.