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.
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 "wow" is easy; the honest bit is what the gates caught:
prefers-reduced-motion
None of that survived the first AI draft. That's the entire point of gating the output.
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.