A detailed engineering case study of Ridgeline, a cinematic 3D hiking site built in Webflow using Three.js and React Three Fiber. The author covers the full architecture: embedding a self-hosted WebGL bundle into Webflow via attribute-driven mounting, using the Webflow MCP (driven by Claude) to build and maintain the entire site from code, processing real SRTM elevation data through Blender into Draco-compressed glTF assets, and writing a single procedural fragment shader with fwidth()-based anti-aliasing for the survey-contour terrain look. Key engineering challenges addressed include preventing first-paint flash with synchronous head CSS, avoiding React re-renders on scroll by using refs and GSAP ScrollTrigger, eliminating a ~1-second shader compile freeze with compileAsync, and achieving 60fps by freezing shadow maps, moving particle animation to the GPU vertex shader, and removing unnecessary MSAA on post-processing passes.
