mushroomfleet/do-it-like-a-dreamer-html

Do It Like A Dreamer is a single web page built to show off what a modern browser can do without any frameworks, build tools, or outside libraries. Everything, from the animated background to the sound effects, lives inside one HTML file, and the page is meant to be its own documentation: you can view the source code to see exactly how each visual trick works while you are experiencing it. The page uses your scroll position as the main control. Scrolling acts like a throttle that drives a car themed dashboard showing RPM, gear, and speed, along with ten shift light indicators. The background is a painted, moving landscape created entirely from math inside a WebGL2 shader, meaning there are no textures or 3D models involved, just calculations that draw a highway, hills, and lights that shift from dusk to night to dawn as you scroll further down the page. Other details include a color scheme that smoothly changes hue as you move through the page, text that shifts in weight and width based on scroll position, and a tachometer gauge whose needle behaves like a spring, complete with realistic overshoot. There is also a live synthesized engine sound built using the browser's Web Audio tools rather than a pre recorded audio file, so it responds to how fast you are scrolling. Pressing the H key or clicking the orange button triggers a scripted sequence that pulls the engine up through six gears to its redline. To try it, you simply clone the repository and open the index.html file directly in a browser, or serve it with a simple local server command. It works best in a recent version of Chrome or Edge, and it is designed to degrade gracefully: older browsers without certain features will still show a working page, just with fewer effects, and it respects settings for reduced motion. The project structure is just the single HTML file, the original text prompt used to build it, and a README, making it a compact example rather than a full application framework.