Shader hero background studio

1 test · 2 finished runs (2 agent, 0 raw one-shot) · 2 live demos

The prompt

Build a single-file web page (index.html, no frameworks, plain WebGL2 or WebGPU) that serves as a landing-page hero background studio. It shows 5 animated full-screen shader backgrounds: mesh gradient, liquid metal, grainy aurora, dithered dots, and flowing noise lines. A left sidebar switches presets and exposes 4-6 live sliders per preset (speed, scale, colours, grain). Over the background sits a sample hero headline and CTA button so the result looks like a real product site. Include an 'Export' button that copies a self-contained HTML/GLSL snippet of the current preset with its settings. It must run smoothly at 60 fps and auto-cycle through the presets every 4 seconds when idle, so a screen recording shows all five. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls.