I've been building SDTK, a toolkit that puts real gates in front of AI-written code instead of trusting the first draft. To show what that actually buys, I pointed it at something visual and free: six "stop-scrolling" hero sections — a WebGL ember aurora, a floating 3D product, molten liquid metal, a particle swarm that spells your brand word, a scroll-driven film, and kinetic type.
All six in motion (60-second showcase):
The honest part first, because it's the reason I'm writing this: every line was AI-generated, and not one of the six was right on the first try. Each needed 1–3 human-reviewed passes — 12 in total — to clear a fixed bar: real browser render checks, WCAG contrast math, reduced-motion and JS-off fallbacks, and a hard file-weight budget. I'm posting the review count instead of the "AI nailed it cold" version, because that version didn't happen, and the number is more useful to you than the highlight reel.
Now the technique I actually want to share — the thing that makes these reusable.
Re-skinning a WebGL shader with one CSS variable
