VKB Hero 16

A live 3D landing hero recreated from the Pylon Terrain CodePen. A circular field of instanced pylons is displaced by simplex noise — height = noise(xz)² · maxHeight — recomposed every frame on a three.js InstancedMesh, with color ramping low→high through the Vandoko cool spectrum (deep teal → cyan → azure) and fading into obsidian fog for depth. Drag pans the noise field with momentum; the field also drifts slowly over time. The original is WebGPU + compute shaders and is explicitly broken on Apple/iOS — this is a faithful re-implementation on portable WebGL so it renders on Chrome, Firefox, Safari, and iOS, with an on-brand poster fallback if WebGL is unavailable. GL color constants are the documented Canvas/GL exception to the oklch rule; all page chrome uses oklch tokens with cyan as the lone signal. Respects prefers-reduced-motion and disposes all GPU resources on unmount.

Installation

Dependencies

Installs three and simplex-noise. The hero is a client component ('use client') and renders one static frame under reduced-motion preferences.

<VkbHero16
  headlineLead="See your whole system as"
  headlineAccent="terrain"
  headlineTrail="you can read at a glance."
/>

Lineage

• Source: Pylon Terrain — three.js, WebGPU by Liam Egan (CodePen, MIT)
• Adaptation: WebGPU + TSL compute → portable three.js WebGL InstancedMesh with CPU simplex displacement; brand cyan/azure/obsidian palette; drag-to-pan momentum preserved; on-brand poster fallback generated via gemini-cli nano-banana.