Infinite Wireframe

Infinite Wireframe

About Infinite Wireframe

Transport your users into a retro-futuristic landscape with the Infinite Wireframe component. Utilizing Three.js and custom GLSL shaders, this WebGL background renders a continuous, seamlessly looping flight over an undulating wireframe terrain. The resulting visual is a hypnotic, high-tech grid that is perfect for gaming portfolios, Web3 landing pages, and synthwave-inspired designs.

The component is engineered for visual flexibility and high performance. You can use a classic single-color neon grid or switch to Gradient Mode to color-code the peaks and valleys of the terrain dynamically. With precise controls over the Flying Speed, Terrain Height, and Camera Height, you can easily dictate the mood of the scene—from a slow, sweeping aerial view to a fast-paced, low-altitude run.

Functions (Key Features):

  • 🛸 Endless Flight Animation: A mathematically perfect, seamlessly looping forward-scroll effect generated directly on the GPU.

  • ⛰️ Procedural Terrain: The undulating mountains and valleys are generated using Simplex noise for organic, non-repeating landscapes.

  • 🎨 Elevation Gradients: Toggle 'Gradient Mode' to apply custom colors specifically to the high peaks and low valleys of the grid.

  • 🎥 Camera Control: Adjust the Camera Height and Floor Distance to change the perspective from a top-down view to a first-person flyover.

  • WebGL Efficiency: Operates at a smooth 60fps with an automatic fade-to-black horizon to blend beautifully with your website's background.