What problem does it solve?
Landing pages and hero sections often need an atmospheric, immersive background that adds depth without competing with foreground content. This Skill provides a repeatable recipe for building a perspective WebGL tech grid that recedes into space with subtle motion, so designers and developers avoid ad-hoc shader experiments and inconsistent results.
Core Features & Use Cases
- Perspective Grid Rendering: Build a large ground-plane grid viewed from an elevated camera, with line opacity fading by distance so the far field dissolves smoothly.
- Ambient Motion System: Add slow forward drift, a sparse additive particle field, and damped mouse-responsive camera parallax for calm, living depth.
- Tuning Controls: Adjust grid density, fade falloff, drift speed, camera height and tilt, and restrained accent-color glow to match any design system.
- Use Case: A designer building a dark SaaS hero section uses this Skill to generate a Three.js background grid that sits behind the headline, stays understated, and remains responsive and reduced-motion friendly.
Quick Start
Use the background-grid-webgl skill to add a subtle perspective WebGL grid background with drifting particles and gentle parallax behind my landing page hero.
