What a one-hour prototype is for
A single HTML file that fakes volumetric fog on a storefront, built in an hour with an AI assistant, to answer one question before committing any real time.
Someone asked whether a seasonal storefront could have a convincing fog effect without tanking performance or looking cheap. The honest answer was “I don’t know yet”, and the cheapest way to change that was to build the smallest thing that would tell me.
The build
One self-contained HTML file. A fake gothic storefront for a made-up shop, and over it a fog layer done with the Canvas 2D API: multi-octave value noise generated with a seeded PRNG, tiled and scrolled across three parallax layers on a half-resolution canvas, thresholded into wisps with CSS filters and mix-blend-mode: screen. A control panel exposes every parameter — density, drift, contrast, blur, a cursor wake — with a live FPS meter, so the question “does this stay at 60fps” has an answer you can see.
It’s built with an AI assistant driving most of the typing, in about an hour, and published as a GitHub Gist. It is not production code and was never meant to be.
What it’s for
A prototype like this exists to retire a question, not to become a feature. After an hour I knew: the effect is convincing at low density, it holds 60fps on a mid laptop, it needs a prefers-reduced-motion path, and the tuning that matters is contrast and drift speed, not density. That’s enough to say yes or no to the real work, which is the only thing I needed it for.
The rest of the file — the parameter panel, the audio, the FPS meter — is scaffolding for learning fast, and it gets thrown away.