I let an AI write 6 WebGL hero sections — here's the one-CSS-variable reskin trick, and the honest review count

NeroTran — Mon, 27 Jul 2026 02:06:36 +0000

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

The effects don't hard-code their colours. Each hero reads its palette from CSS custom properties at runtime:

:root {
  --accent: #ff6a2b;   /* ember */
  --glow:   #ffb07a;
}

The shader reads those values on init — and a MutationObserver re-reads them the instant the theme or palette changes:

const root = document.documentElement;
const read = (v) => getComputedStyle(root).getPropertyValue(v).trim();

let accent = read('--accent');

new MutationObserver(() => {
  accent = read('--accent');            // re-read the token
  uniforms.uAccent.value.set(accent);   // push it to the shader
}).observe(root, { attributes: true, attributeFilter: ['style', 'data-theme'] });

So the aurora shader, the liquid metal, even the three.js scenes all follow your brand from a single token edit. Change --accent, and the whole effect re-skins — no shader edits, no rebuild. Six palettes × two themes ship in every file; adding your own is one CSS line.

The lesson that stuck with me: design tokens aren't just for buttons. Make your effects obey them too, and "brand-matched" stops being a bespoke job.

The boring parts the review passes forced

The "wow" is easy; the honest bit is what the gates caught:

prefers-reduced-motion: every hero ships a static poster and honours the reduced-motion query — opt out of motion and you get a clean, fast hero, not a blank box.
JS off: it still renders. The spectacle is progressive enhancement, not a dependency.
No CDN: the three.js engine is bundled beside the file. Works from disk, offline.
Weight budget: the whole pack is 309 KB.

None of that survived the first AI draft. That's the entire point of gating the output.

Grab the pack (free, no email wall)

Six self-contained HTML files — double-click and they run, the 3D ones too. Play with all six live, then take the zip:

👉 https://sdtk.dev/heroes?utm_source=devto&utm_medium=content&utm_campaign=distribution-r2

What it does NOT do, so you don't waste your time: it's not a page builder, no CMS, no hosting — it's raw HTML/CSS/JS you drop into whatever you're already building.

If you try the one-variable reskin trick on your own shader, I'd genuinely like to see it. And if "publish the review count" reads as trust-building — or worse than just showing the finished thing — tell me. I keep going back and forth on how much of the messy process to publish.

DEV Community: NeroTran

I let an AI write 6 WebGL hero sections — here's the one-CSS-variable reskin trick, and the honest review count

Re-skinning a WebGL shader with one CSS variable

The boring parts the review passes forced

Grab the pack (free, no email wall)