Aurora Flow
17 KB single fileA full-viewport ember-aurora shader with monumental type rising through the light.
WebGL · zero depsOpen live →
Free pack · built with sdtk-design
Six heroes that survive the first three seconds.
WebGL aurora, a floating 3D product, molten metal, a particle swarm that spells your word, scroll-driven film, kinetic type. One self-contained HTML file each — previewed live below, downloaded free.
● live — the actual file, not a videoWebGL · zero deps
Open full screen ↗Try the controls inside the preview — the colour dots switch among six palettes, ◑ flips light/dark. Every knob ships in the file you download.
> RE-SKIN LIVE
Six palettes, two themes — twelve looks in the box
Hue and luminance are independent layers: pick any of six colour palettes and flip light/dark on top. The WebGL and three.js effects re-read the tokens live — change one accent and the whole hero follows, 3D included.
ember · aurora · nebula · rose · jade · azure — the same picker ships inside every file
> WHAT'S INSIDE
Every hero is one file you can read
No build step, no CDN, no framework. Copy a hero into your site; HTML, CSS, and effect code are all inside. The two three.js heroes keep one bundled engine file beside them — and still run offline from disk.
Product Orbit
13 KB + 526 KB bundleA machined object floating in studio light, orbiting your cursor.
three.js · offlineOpen live →
Constellation
11 KB + 512 KB bundleThousands of particles that assemble into your brand word, scatter, and reform.
three.js · offlineOpen live →
Liquid Metal
17 KB single fileA molten surface that ripples where you touch it.
WebGL · zero depsOpen live →
Scroll Film
13 KB single fileA pinned three-act cinematic that plays as the visitor scrolls.
pure CSSOpen live →
Kinetic Type
12 KB single fileOversized split-text choreography with a magnetic call-to-action.
pure CSSOpen live →
> HOW IT WAS MADE
AI-authored. Human-reviewed. We counted.
Every line of hero code was generated with SDTK — and not one hero was right on the first try. Each took one to three human-reviewed passes (twelve in total) to clear a strict gate: real browser render checks, WCAG contrast math, reduced-motion and JS-off fallbacks, a hard weight budget. That's the real number, measured instead of asserted.
Self-contained
Unzip, double-click, done — even the 3D heroes run straight from disk. Zero external requests.
Respects visitors
Honours prefers-reduced-motion, works with JavaScript off (static poster), proper contrast and landmarks.
Token-driven
Colours, speed, density, the constellation word — plain CONFIG values and CSS tokens at the top of each file.
Free license
Use on unlimited projects you build, personal and commercial. Just don't resell the pack itself. Full terms inside.
Take the pack. It's free.
sdtk-hero-pack1.zip — 6 heroes + a bonus landing hero, docs, and the license. This is what sdtk-design produces; the toolkit that built it is one command away.