[ HERO_LAB ]
> Generative hero ideas, both themes at once — drag the seam
> Every frame below is one canvas. The shader picks its palette and its shading model per pixel, from which side of the seam that pixel lands on — left is neon-terminal, right is sketch.
> Drag the seam (or focus it and use ←/→) to slide one theme over the other.
> Colours are measured off real elements carrying the .dark and .sketch classes, so these are the actual design-system tokens, not approximations of them.
> Reduced motion draws one still frame with no animation loop; each canvas parks itself when scrolled out of view.
> Weights and the case against a 3D engine live in docs/hero-webgl-research.md; the single-hero prototype is at webgl-heroes.
> Each shader fades its own field to 13% behind the lockup. Turn it off to see the raw field — and to see why accent-coloured type at this size loses to a bright line crossing the same pixels.
[ CONTOUR ]
A drifting field read as elevation lines.
Smooth fbm, evenly spaced. The calm one.
RYAN KELLY
FULL_STACK_ENGINEER.exe
RYAN KELLY
FULL_STACK_ENGINEER.exe
- ON BLACK
- Isolines glowing off a radar sweep.
- ON PAPER
- Ordnance-survey contours, index lines inked heavier.
- WHAT FLIPS
- Line weight carries the depth on paper; brightness carries it on black.
[ CROSSHATCH ]
Pen shading driven by one tonal field.
Three passes at fixed angles, gated on tone. Classic crosshatch.
RYAN KELLY
FULL_STACK_ENGINEER.exe
RYAN KELLY
FULL_STACK_ENGINEER.exe
- ON BLACK
- Angled neon rules, dense where the field is dark.
- ON PAPER
- Native. This is how a pen actually shades — it starts here.
- WHAT FLIPS
- The paper-first idea. Black mode is the inversion, not the default.
[ HORIZON ]
Perspective floor grid running to a ring on the horizon.
RYAN KELLY
FULL_STACK_ENGINEER.exe
RYAN KELLY
FULL_STACK_ENGINEER.exe
- ON BLACK
- Neon grid receding into black, ring blooming like a light source.
- ON PAPER
- Drafting-paper perspective study — ruled ink lines, no glow.
- WHAT FLIPS
- The bloom. On paper it becomes a heavier ink stroke instead.
[ DOT_MATRIX ]
One image, sampled once per cell, drawn as dots.
RYAN KELLY
FULL_STACK_ENGINEER.exe
RYAN KELLY
FULL_STACK_ENGINEER.exe
- ON BLACK
- Coarse square LED panel, each dot blooming.
- ON PAPER
- Fine 45° print halftone — the screen a newspaper uses.
- WHAT FLIPS
- The screen geometry itself: square and coarse against angled and fine.
[ TRACE ]
Three waveforms over a graticule.
RYAN KELLY
FULL_STACK_ENGINEER.exe
RYAN KELLY
FULL_STACK_ENGINEER.exe
- ON BLACK
- Oscilloscope phosphor, each trace smearing an afterglow.
- ON PAPER
- Seismograph pen on tinted chart stock, complete with a wobble.
- WHAT FLIPS
- Accent and ink swap roles: lit beam on a dim grid, ink pen on tinted paper.
[ GLYPH_RAIN ]
Columns of hashed 5×6 bitmap glyphs falling.
RYAN KELLY
FULL_STACK_ENGINEER.exe
RYAN KELLY
FULL_STACK_ENGINEER.exe
- ON BLACK
- Terminal rain, bright head, phosphor tail.
- ON PAPER
- Typewriter strike — inked or not, no half-tones.
- WHAT FLIPS
- Continuous fade against a hard stamp threshold.
[ THE_RULE_THESE_TEST ]
> Recolouring is not theming. A glow is added light, and added light on paper reads as a thumbprint — so every idea here swaps its shading model at the seam, not just its palette: bloom becomes ink weight, a continuous fade becomes a hard stamp, a coarse LED screen becomes a fine 45° halftone.
> An idea that only survives on black is a failed idea for this site, however good it looks there. Drag the seam past the middle and see which ones hold.