webgl-landing-steering

Start from the page's conversion goal and brand signal, then pick one dominant lane: subtle depth fields for SaaS readability, particle/data visuals for technical products, object-centric 3D for product launches, or cinematic scenes for campaigns. Avoid mixing multiple heavy effects in one hero.

Use a subtle depth field lane with soft gradient meshes, slow parallax planes, and light bloom via Three.js plane shaders. Keep motion low-amplitude and secondary to copy so hero text contrast and CTA prominence stay first.

Cap the pixel ratio with Math.min(devicePixelRatio, 1.5-2), reduce particle counts, remove expensive postprocessing, and lazy-load heavy assets. Always ship an immediate non-WebGL poster or fallback so first paint is never blocked.

Yes, the Skill requires respecting prefers-reduced-motion by rendering a still frame or low-motion mode. It also requires maintaining color contrast over animated backgrounds so hero copy stays readable.

Conversion drops when motion amplitude is too high, backgrounds compete with the CTA, or WebGL delays message comprehension. Fix it by softening the background, raising CTA contrast, and ensuring the headline is readable within three seconds.

Avoid heavy effects on pricing and high-intent pages where WebGL should stay decorative only, and when the team cannot maintain shader complexity. Default to low or medium risk implementations unless the page is an explicit campaign microsite.