DIRECTION 13 · STYLE_PRESETS § 13 · concepts/design/generative-tech-flex.md
GENERATIVE
TECH-FLEX
RENDERERthree.js r167
SHADERsimplex + dither
UNIFORMSu_time · u_mouse · u_res
FRAGMENTS128 lines · 1 fbo
PIXEL-RATIOwindow.dpr
01 · PALETTE
True black + shader pulse
Pure #000000 base. Pulse colors derived from ASTRODITHER (#FF4FA3 hot pink) + classic terminal cyan and amber. Mesh-deep purple base for gradient meshes when used. Terminal-green for dev metadata only.
bg-primary
TRUE BLACK
#000000
bg-secondary
BLUE-TINT BLACK
#0A0A12
bg-elevated
LIFT SURFACE
#131320
accent-pulse
HOT PINK
#FF4FA3
accent-cool
CYAN
#00FFFF
accent-warm
AMBER WARNING
#FFB000
02 · TYPOGRAPHY
Monospace as flex
Display: Geist Mono (700) or JetBrains Mono (800). Hero: Druk Wide (Heavy) or custom variable-font experiment. Body: Geist Sans (400) at 14-15px (deliberately small).

MOODBOARD STACK: JetBrains Mono carries the entire page (display + body + mono). Inter (sans) only used for the section meta blocks where readability matters.
DISPLAY 88PX
Built <in_shader>
MONO BODY 14PX
/* fragment shader */
vec3 color = mix(bg, accent_pulse, fbm(uv * 4.0 + u_time * 0.1));
color = dither(color, gl_FragCoord.xy);
gl_FragColor = vec4(color, 1.0);
03 · MINI SHADERS
Generative-not-cycle
Every page load draws something slightly different. Seed with timestamp or visitor ID — never identical screenshots. Each tile below runs its own animated shader.
FBM · TIME-DRIVEN
CHLADNI · MOUSE-DRIVEN
DITHER · STEP-FUNCTION
04 · TECH-STACK CREDIT
The execution IS the brand
Tech-stack credit displayed as design ornament (footer or hover tooltip). NEVER hidden. The audience reads the stack and decides whether the brand is technically credible.
RENDERER
three.js r167
LANGUAGE
GLSL ES 3.00
SHADER TYPE
fragment + simplex
DITHER
8x8 Bayer matrix
POSTPROCESS
selective bloom · 4-tap
FRAMERATE
60 fps target
PIXEL RATIO
window.devicePixelRatio
FBO
1 · 512x512 · linear filtering
05 · SIGNATURE MOVES
Five recognizable patterns
Each signature is a screenshot-able artifact. The whole aesthetic optimizes for share-as-trophy.
SIG 01
RAY-MARCHED HERO
Three.js + WebGPU + TSL. Primary canvas built with shaders. NOT video loops. The hero scrolls overhead — see top of page.
SIG 02
MIX-BLEND-MODE STICKY CHROME
Header / nav adapts color to underlying shader pixel. Vercel Ship pattern. The nav at top of this page uses mix-blend-mode: difference.
SIG 03
AUDIO-REACTIVE PULSE
Mic / FFT drives visual pulse. Real audio reactivity, not pre-canned animation loops. ASTRODITHER pattern.

// MOODBOARD: implemented as mouse-driven u_mouse uniform on hero shader (move cursor to see). Production builds substitute mic input via getUserMedia + AnalyserNode FFT. Audio-reactive deferred here because requesting microphone permission inside a static moodboard would defeat the share-as-trophy pattern.
SIG 04
TECH-STACK CREDIT AS DESIGN
"WebGPU + TSL + custom fluid sim" displayed as caption-mono ornament. Never hidden. The credit IS the flex.
SIG 05
CUSTOM WEBGL CURSOR
Particle trail or shader-driven cursor replacing browser default. Mouse position drives shader uniforms. (Try moving your cursor over the hero — the shader reacts.)
06 · ANTI-PATTERNS
What this aesthetic refuses
DO-NOT-USE rules trace to specific failure modes. Each violation defeats the tech-flex premise.
✕Pre-rendered video loops disguised as shaders (defeats the entire flex)
✕Lottie animations (too lightweight for this aesthetic)
✕Static gradient meshes (use generative)
✕Stock 3D models from Sketchfab / off-the-shelf assets
✕Body text larger than the hero canvas
✕Photography (the visual IS the brand)
✕Bouncy / playful animations (severe + technical, not playful)
✕"AI generated" credit when work was hand-coded
60.0 fps