Write a single self-contained HTML file that runs directly i...
Prompt
Write a single self-contained HTML file that runs directly in a browser. Use a full-page HTML5 canvas and vanilla JavaScript only. Do not use external libraries, frameworks, images, fonts, SVG files, or external assets. Create a realistic side-view animation of a car driving through a landscape. The car must remain visible in the foreground, positioned around the lower third of the screen, while the environment scrolls continuously from right to left to create the feeling that the car is moving forward. Use a layered parallax scene for depth. Include at least these layers: - sky with a smooth day-night cycle - sun, moon, or changing sky colors depending on the time of day - distant hills or mountains moving slowly - mid-distance trees or terrain moving at medium speed - nearby roadside elements such as poles, bushes, signs, fences, or guardrails moving faster - road surface, lane markings, shadows, puddles, reflections, and foreground ground details moving fastest The landscape should repeat seamlessly, but it should not feel obviously tiled. Use procedural variation or reusable generated scenery segments so that the animation feels natural and believable. Add a gradual day-night cycle that changes the mood of the scene over time. The sky, ambient light, car highlights, shadows, road color, distant scenery, and visibility should all react to the time of day. The transition should be smooth and cinematic, not abrupt. Add rain that can appear during the animation. The rain should feel atmospheric and believable: - render many falling rain streaks with slight wind direction - add subtle splashes or small droplets near the road - add wet road reflections and darker road colors during rain - make headlights or highlights more visible when the scene is dark or rainy - keep the effect performant and smooth Animate the car realistically: - wheels must spin at a speed that matches the road movement - tires should have visible rotation details - the car body should have subtle suspension movement, small vertical bounce, and slight pitch changes - add shadows under the car and lighting highlights that match the current time of day - optionally add headlights during night or rain - keep the side-view silhouette clear and recognizable The animation should feel calm, cinematic, immersive, and smooth. Use requestAnimationFrame for the animation loop. Make the canvas responsive to window resizing and support high-DPI screens using devicePixelRatio. Aim for clean, readable code and good performance. Return only the complete HTML code. Do not include explanations, Markdown formatting, or anything outside the HTML file.
A system prompt was added to support web rendering
