Synthwave sunset · gemma-4-26b-a4b-it

The objective is to create a single-file `index.html` containing an animated synthwave landscape.

    *   Glowing gradient sun with horizontal scanline bands.
    *   Starfield.
    *   Perspective neon grid moving towards the viewer (forward travel).
    *   Sun moving slowly towards the horizon.
    *   Stylized reflection of the sun's colors on the ground plane (below the horizon).
    *   10-20 second loop that repeats smoothly.
    *   Pause/Resume and Restart controls.
    *   No external assets/CDNs.
    *   Full-screen canvas.
    *   Procedural drawing and colors only.

    *   HTML: Container for the canvas and the UI controls.
    *   CSS: Full-screen, hide overflow, style the controls (overlay).
    *   JavaScript:
        *   `requestAnimationFrame` for the animation loop.
        *   Canvas API for drawing:
            *   `drawStars()`: Randomly placed white/blue dots.
            *   `drawSun()`: Radial gradient with scanline rectangles/lines.
            *   `drawGrid()`: Lines following perspective projection.
            *   `drawReflection()`: Gradient/shapes on the ground plane.
        *   Animation logic:
            *   `time` variable to track progress.
            *   `loopDuration` (e.g., 15 seconds).
            *   `progress = (time % loopDuration) / loopDuration`.
            *   `sunY` moves from top to horizon based on `progress`.
            *   `gridOffset` moves based on `progress`.
        *   Controls logic:
            *   `isPlaying` flag.
            *   `restart()` function.

    *   Horizon line: roughly middle or slightly above middle.
    *   Sun: Large circle, gradient from orange/pink to yellow. Scanlines are horizontal dark or transparent strips.
    *   Grid: Lines converging to a vanishing point on the horizon.
        *   Vertical lines (perspective lines): `x` coordinates relative to vanishing point.
        *   Horizontal lines: `y` coordinates spaced out. To animate, use `y + offset`.
    *   Reflection: A blurry, colored gradient on the ground plane, following the sun's position/color.

    *   *Looping:* If `progress` goes from 0 to 1, `sunY` can go from `y_start` to `y_horizon`. When it resets, it jumps back to `y_start`.
    *   To make it *not* a distracting reset jump, maybe the sun doesn't go *all* the way to the horizon, or it moves in a way that the loop is seamless.
    *   Wait, the prompt says "Move the sun slowly down toward the horizon while keeping the composition visible" and "Use a loop of 10 to 20 seconds that repeats without a distracting reset jump".
    *   If the sun moves from Top -> Horizon, and then resets to Top, it's a jump.
    *   How to loop smoothly?
        *   Option A: Sun moves Top -> Bottom (below horizon) -> Top.
        *   Option B: Sun moves in a cycle that doesn't end at a extreme.
        *   Option C: The "sun" is actually a cycle of two elements? No.
        *   Actually, if the sun moves from $Y_{top}$ to $Y_{horizon}$, and then at $T=0$ it's back at $Y_{top}$, it's a jump.
        *   If I make the sun's movement a sine wave? Or if the sun starts at the horizon and moves up?
        *   Let's try: Sun moves from a bit above the horizon to a bit above the horizon? No, "down toward the horizon".
        *   Maybe the loop is: Sun is at horizon, moves up, then moves down.
        *   Actually, a better way to avoid a "distracting reset jump" for a continuous motion like a grid:
            *   Grid: `offset = (time * speed) % gridSpacing`. This is seamless.
            *   Sun: If the sun moves from $Y_1$ to $Y_2$, it *will* jump if it's a linear progress.
            *   Wait, maybe the "loop" refers to the whole scene's state.
            *   If I use a sine wave for the sun's Y position: `y = horizon + amplitude * sin(progress * 2PI)`. This is a smooth loop.
            *   But the prompt says "Move the sun slowly down toward the horizon".
            *   Let's interpret "without a distracting reset jump" as "the animation loop should be seamless".
            *   If the sun moves from $Y_{high}$ to $Y_{horizon}$, and then we want it to loop, it must return to $Y_{high}$.
            *   Actually, if I make the sun movement part of a continuous loop where the *end state* is similar to the *start state*.
            *   If the sun is at the top, and moves down to the horizon, it doesn't loop well.
            *   If the sun is *at* the horizon, then moves *up* and then *down*? No, "down toward the horizon".
            *   What if the sun's movement is tied to the loop, and the loop is a cycle of the *entire* visual state?
            *   Let's use a sine function for the sun's vertical position so it's smooth: $Y(t) = \text{horizon\_y} + \text{offset} \cdot \sin(\text{phase})$. But the prompt specifically says "down toward the horizon".
            *   Maybe I can use a "fade in/out" or just accept a small jump if it's subtle, OR I can have the sun move down, and when it reaches the horizon, it *gradually* reappears at the top? No, that's complex.
            *   Let's try: The sun moves from $Y=0.2H$ to $Y=0.5H$ (horizon). At $T=1$, $Y$ becomes $0.2H$.
            *   Actually, if I make the Sun's movement a "return" path.
            *   Wait! "Use a loop of 10 to 20 seconds that repeats without a distracting reset jump".
            *   If I animate the sun's $Y$ as a function of $t$ such that $Y(0) = Y(T)$, it's seamless.
            *   Example: $Y(t) = \text{horizon} + A \cdot \cos(\text{freq} \cdot t)$.
            *   This would move the sun up and down.
            *   "Move the sun slowly down toward the horizon". This implies a unidirectional movement.
            *   Maybe the "loop" is for the *grid* and the *starfield*, and the sun's movement is just... a slow drift?
            *   Actually, if I move the sun from $Y_{top}$ to $Y_{horizon}$ and then *slowly* move it back up, that's a loop.
            *   Or, I can make the sun's position $Y(t)$ follow a periodic function that *looks* like it's moving down.
            *   Let's go with: Sun moves from $Y_{start}$ to $Y_{horizon}$ and then back to $Y_{start}$. This is a loop.
            *   Actually, let's look at the grid: the grid moves towards the viewer. This is also a loop.
            *   I'll implement the sun as moving from a certain point towards the horizon, and when it reaches the horizon, it's "sun-set", and then it "sun-rises" back. That's a loop.

    *   *Grid:*
        *   Perspective projection:
            *   $Z$ goes from $0$ (horizon) to $1$ (viewer).
            *   Lines:
                *   Vertical: $x = \text{center} + \text{width} \cdot \text{offset\_x} / z$.
                *   Horizontal: $y = \text{horizon} + (1 - z) \cdot \text{height\_below\_horizon}$.
            *   Actually, simpler:
                *   Draw lines from $(x, horizon)$ to $(x, bottom)$ where $x$ is spaced.
                *   Draw lines from $(left, y)$ to $(right, y)$ where $y$ is spaced.
                *   To animate: $y\_offset$ increases.

    *   *Colors:*
        *   Background: Deep purple/black.
        *   Sun: Orange/Pink/Yellow gradient.
        *   Grid: Neon Cyan/Magenta.
        *   Stars: White/Cyan.

    *   *Implementation Details:*
        *   Canvas 2D is enough for this.
        *   `requestAnimationFrame`.
        *   `sunY` based on `sin(time)`.
        *   `gridOffset` based on `time`.

    *   *Refining the Sun:*
        *   Gradient: `createRadialGradient`.
        *   Scanlines: `ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'` or similar, drawn as horizontal rectangles.

    *   *Refining the Grid:*
        *   Use a loop to draw lines.
        *   Horizontal lines: $y = \text{horizon} + \text{step} \cdot n$. We need them to move.
        *   $y = \text{horizon} + \text{step} \cdot (n + \text{offset})$.
        *   Since it's perspective, the spacing between $y$ lines should increase as they approach the viewer.
        *   Actually, a simpler way to do a perspective grid:
            *   Draw lines from the vanishing point (horizon center) to the edges of the screen.
            *   Draw horizontal lines that get further apart as they get closer to the bottom.
            *   Formula for horizontal lines in perspective: $y = H + \text{dist} \cdot (1 - 1/z)$.
            *   Easier: $y = H + \text{height} \cdot (1 - \text{scale})$.
            *   Let's use the standard "grid lines in perspective" math.

    *   *Wait, a better way for the grid:*
        *   Horizontal lines: $y_i = H + \text{height} \cdot (1 - \text{ratio}_i)$.
        *   To animate: $y_i = H + \text{height} \cdot (1 - \text{ratio}_i + \text{offset})$.
        *   Wait, the "moving towards viewer" effect is best achieved by changing the $z$ or the offset.

    *   *Plan for `index.html`:*
        1.  `<html>`
        2.  `<style>`: Fullscreen canvas, overlay UI.
        3.  `<body>`: `<canvas>`, `<div class="controls">`.
        4.  `<script>`:
            *   `State`: `isPlaying`, `startTime`, `pausedTime`, `loopDuration`, `offset`.
            *   `draw()` function.
            *   `loop()` function.
            *   Event listeners for buttons.

    *   *Let's refine the sun's movement to satisfy "Move the sun slowly down toward the horizon" AND "loop without a distracting reset jump".*
        *   If the sun moves from $Y=0.2 \cdot H$ to $Y=0.48 \cdot H$ (horizon) and then the loop repeats, it's a jump.
        *   UNLESS: the loop duration is long and we use a smooth transition.
        *   Actually, if I use a `sin` wave, it moves down *then* up. This is a loop. It's not "just" down, but it's "down towards the horizon" for half the cycle.
        *   Let's try: `sunY = horizonY - (amplitude * Math.sin(phase))`. This moves it from above the horizon to the horizon and back.

    *   *Let's check the reflection requirement:* "Below the horizon, include a stylized reflection of the sun's colors on the ground plane, visually distinct from a second sun in the sky."
        *   The reflection can be a semi-transparent gradient on the ground, mirroring the sun's $X$ and color.

    *   *Refining the grid math:*
        *   $H$ = horizon height (e.g., $0.5 \cdot \text{canvas.height}$).
        *   Vanishing point $V = (W/2, H)$.
        *   Grid lines:
            1.  Vertical: Lines from $V$ to the bottom edge, spaced out.
                *   Actually, it's better to draw them as lines from $V$ to the edges.
                *   `for (let x = -W; x <= 2*W; x += spacing) { ... drawLine(V, edgePoint) ... }`
            2.  Horizontal: `for (let y = H; y < bottom; y += spacing) { ... }`
                *   To make them "move", the spacing should be in "z-space".
                *   Let $z$ be distance from horizon. $z \in [0, 1]$.
                *   $y = H + (H_{bottom} - H) \cdot z$.
                *   But in perspective, $z$ is not linear with $y$.
                *   Actually, $y = H + \text{height} \cdot \text{something}$.
                *   If we want the lines to look like they are approaching, we use $y = H + \text{height} \cdot (1 - 1/(z + 1))$.
                *   Actually, a much simpler way:
                    *   Vertical lines: $x = V.x + (x\_offset) \cdot \text{perspective\_factor}$.
                    *   Horizontal lines: $y = V.y + \text{dist\_from\_horizon}$.
                    *   To animate: `dist_from_horizon` moves.

    *   Let's go with this approach for the grid:
        1.  Draw vertical lines from $V(W/2, H)$ to the bottom edge.
            *   $x$ coordinates: $V.x + (i \cdot \text{spacing} - \text{total\_width}/2) \cdot \text{scaling}$.
            *   Wait, vertical lines in perspective are just lines from the vanishing point to the bottom edge at various $x$ positions.
            *   Actually, the lines should be: `ctx.moveTo(V.x + x_offset, V.y); ctx.lineTo(V.x + x_offset, bottom);` NO, that's not perspective.
            *   Perspective lines: `ctx.moveTo(V.x, V.y); ctx.lineTo(x_bottom, bottom);`
            *   Actually, let's just draw the grid as a set of lines:
                *   Vertical lines: `x = V.x + i * spacing`. But they should converge.
                *   Ah, the lines *are* the rays from the vanishing point.
                *   So, `ctx.moveTo(V.x, V.y); ctx.lineTo(V.x + i * gap, bottom);`
                *   Horizontal lines: $y$ positions. To look like perspective, they must get closer together as they approach the horizon.
                *   $y = H + \text{height} \cdot (1 - \text{some\_ratio})$.
                *   To animate: $y = H + \text{height} \cdot (1 - \text{some\_ratio} + \text{offset}) \pmod{\dots}$.

    *   *Wait, I have a better idea for the grid:*
        *   Use a simple perspective transformation or just draw lines that meet at the vanishing point.
        *   Horizontal lines: $y = H + \text{step} \cdot (n + \text{offset\_n})$.
        *   To get the "perspective" spacing: $y = H + \text{Height\_Below} \cdot (1 - 1 / (1 + \text{offset} + n \cdot \text{step}))$.
        *   Actually, let's just use:
            `for (let i = 0; i < 20; i++) { y = H + (i + offset) * step; ... }` and adjust `step`? No.
            Let's use: `y = H + HeightBelow * (1 - 1 / (1 + (i + offset) * density))`.
            This will make the lines get closer as they approach $H$.

    *   *Sun and Reflection:*
        *   Sun: $x, y$ (animated).
        *   Reflection: A gradient at $y = H + (H - sun\_y)$? No, the reflection is on the ground.
        *   The ground is $y > H$.
        *   If the sun is at $y_{sun} < H$, the reflection is on the ground.
        *   The prompt says: "Move the sun slowly down toward the horizon... Below the horizon, include a stylized reflection of the sun's colors on the ground plane, visually distinct from a second sun in the sky."
        *   This means the sun is *above* the horizon, and the reflection is *below* it.
        *   When the sun is at the horizon, the reflection is also at the horizon.

    *   *Visual Palette:*
        *   Background: `#050510` (very dark blue/black)
        *   Sun: `#ff0080` (magenta) to `#ff8c00` (dark orange) to `#ffcc00` (yellow).
        *   Grid: `#00ffff` (cyan).
        *   Stars: `#ffffff` (white).

    *   *Loop:*
        *   `totalTime` (seconds)
        *   `loopDuration = 15`
        *   `t = totalTime % loopDuration`
        *   `progress = t / loopDuration` (0 to 1)
        *   `sunY = horizonY - amplitude * Math.sin(progress * Math.PI)` -> This moves it from $Y_{top}$ to $Y_{horizon}$ and back to $Y_{top}$. This is a smooth loop.
        *   `gridOffset = (progress * 10) % 10` (or similar).

    *   *Canvas sizing:*
        *   `window.innerWidth`, `window.innerHeight`.
        *   Handle resize.

    *   *Controls:*
        *   HTML buttons with CSS for a "synthwave" look (neon borders).

    *   *Let's refine the scanlines on the sun:*
        *   Instead of just drawing lines, I can use `globalCompositeOperation = 'destination-out'` or just draw black/transparent rectangles.
        *   Actually, drawing horizontal rectangles with `rgba(0,0,0,0.5)` over the sun is easiest.

    *   *Starfield:*
        *   Generate a fixed set of stars at the start so they don't "pop" in/out.
        *   Use an array of `{x, y, size}`.

    *   *Let's write the code.*

    *   *Wait, one detail:* "The grid moves towards the viewer".
        *   In the perspective math $y = H + \text{height} \cdot (1 - 1 / (1 + (i + \text{offset}) \cdot \text{density}))$,
        *   Increasing `offset` will make the lines move "down" towards the viewer.
        *   Yes, that works.

    *   *Let's refine the sun's movement:*
        *   If `progress` is 0 to 1.
        *   `sunY = horizonY - (height_above_horizon * Math.sin(progress * Math.PI))`.
        *   At `progress = 0`, `sunY = horizonY`.
        *   At `progress = 0.5`, `sunY = horizonY - height_above_horizon`.
        *   At `progress = 1`, `sunY = horizonY`.
        *   This is a perfect loop. It goes from horizon up to a peak and back to horizon.
        *   Wait, "Move the sun slowly down toward the horizon".
        *   If it starts at the peak and moves down to the horizon, that's only half a loop.
        *   If it starts at the horizon, moves up, then moves down, that's a loop.
        *   Let's do: `sunY = horizonY - (amplitude * Math.sin(progress * Math.PI * 2))`.
            *   But that would mean it goes below the horizon.
            *   The prompt says: "Below the horizon, include a stylized reflection... visually distinct from a second sun in the sky."
            *   This suggests the sun stays *above* the horizon.
            *   So $Y_{sun} < Y_{horizon}$.
            *   Wait, if the sun is *always* above the horizon, it can't "move down toward the horizon" and then loop unless it jumps.
            *   UNLESS the loop is: Sun moves from top to horizon, then "fades out" and "fades in" at the top? No.
            *   Let's use: `sunY = horizonY - (amplitude * (0.5 + 0.5 * Math.cos(progress * Math.PI * 2)))`.
                *   Wait, `cos(0) = 1` -> `sunY = horizonY - amplitude`.
                *   `cos(PI) = -1` -> `sunY = horizonY`.
                *   `cos(2PI) = 1` -> `sunY = horizonY - amplitude`.
                *   This moves the sun from its peak down to the horizon and back up to its peak.
                *   This is a smooth loop. The sun is always above the horizon.
                *   The "down toward the horizon" part happens during the first half of the cycle.

    *   *Wait, what about the reflection?*
        *   If the sun is at $x_{sun}, y_{sun}$, the reflection is at $x_{sun}$ on the ground.
        *   The reflection should be a gradient on the ground.

    *   *Let's start coding.*

    *   *One more check:* "Use a loop of 10 to 20 seconds that repeats without a distracting reset jump."
        *   If I use the `cos` method, the sun movement is seamless.
        *   The grid movement is seamless.
        *   The starfield is static (or can move slightly, but static is fine).
        *   This satisfies all conditions.

    *   *Wait, the grid's horizontal lines:*
        *   To make them move "towards the viewer", the `offset` should be added to the index.
        *   `y = H + height_below * (1 - 1 / (1 + (i + offset) * density))`
        *   As `offset` increases, $1/(1 + (i+offset)\cdot d)$ decreases, so $1 - \dots$ increases.
        *   The $y$ value increases, so the lines move towards the bottom (the viewer).
        *   Perfect.

    *   *Implementation of the sun reflection:*
        *   A simple way: `ctx.fillStyle = sun_gradient; ctx.fillRect(sunX - width, H, width*2, height_below);`
        *   But a "stylized reflection" should probably be a triangle or a blurred shape.
        *   Let's use a radial gradient on the ground plane, centered at the sun's X, and its Y being $H + \text{something}$.
        *   Actually, a simple way to draw a "reflection" in perspective is to draw a gradient that matches the sun's colors.

    *   *Let's refine the grid colors:*
        *   A neon pink/cyan combo.
        *   Maybe alternating colors for lines? Or just one color for all.
        *   Let's use Cyan for the grid.

    *   *One final check on the scanlines:*
        *   `for (let i = 0; i < sun_height; i += 10) { ctx.fillRect(sunX - radius, sunY + i, radius * 2, 2); }`
        *   This will draw horizontal lines across the sun.

    *   *Wait, the starfield:*
        *   If the starfield is static, it's fine. But a little "parallax" would be cool.
        *   Actually, let's keep it simple. Static stars are fine.

    *   *Let's write the file.*

The user wants to verify the implementation. I need to run the application in the browser and check:
1.  Grid travel (moving towards the viewer).
2.  Sun movement (moving down towards the horizon).
3.  Reflected colors (below the horizon).
4.  Pause/Resume/Restart controls.

I will use the `browser` tool.