Workflow & Engineering
TheProcess.
Four creative engineering workflows, calibrated for high-performance web experiences. Each one establishes the foundation for the next — no production code until the token and shader architecture is settled.
Phases
04
Default duration
6 — 9 weeks
Owners
Solo + cherry-picked partners
Output
Production code + handover
- 01
SCAFFOLD
- 02
SHADERS
- 03
MOTION
- 04
HARDEN
Workflow 01 · SCAFFOLD
Editorial Scaffolding & Token Architecture
Establish the typographic baseline, CSS design tokens, and semantic document graph before drawing a single polygon. Every aesthetic choice is anchored to a measurable contrast and token budget.
- InputsDesign tokens · CSS vars · type scale
- OutputToken schema · App Router scaffolding
- ToolsTailwind CSS · Next.js 16 · TypeScript 5.9
- Days5 — 8 working days
Workflow 02 · SHADERS
GLSL Shader Pipeline & WebGL Canvas
Author multi-octave fragment shaders and WebGL2 render loops with hardware-conscious constraints: DPR capping, off-screen pausing, and zero-leak context management.
- InputsSIMD math · fbm noise · DPR budget
- OutputGLSL shaders · WebGL2 canvas harness
- Toolsraw WebGL2 · GLSL · Three.js
- Days10 — 14 working days
Workflow 03 · MOTION
Kinetic Choreography & Shared rAF Bus
Synchronize smooth scrolling with WebGL rendering through a unified requestAnimationFrame loop and continuous exponential damping. Zero React re-renders on the scroll hot path.
- InputsrAF bus · Lenis scroll · damping constant
- OutputSynchronized scroll · zero-lag loop
- ToolsLenis · GSAP · rafBus.ts · damp.ts
- Days10 — 12 working days
Workflow 04 · HARDEN
Zero-Jank Hardening & Verification Gate
Enforce strict Content Security Policy, sub-100ms interaction latency, zero layout shift, and automated TypeScript quality gates before deployment.
- InputsCSP headers · INP latency · CLS shift
- OutputGrade A security · 100/100 Lighthouse
- Toolssecurityheaders.com · PageSpeed · ESLint
- Days8 — 10 working days