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.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Sizing: Set the container's Width and Height to "Fill" (100%) to use it as a full-page background. Ensure it sits behind your foreground text and elements.
Color Setup: Choose between a Single color mode for a classic grid or Gradient mode to define separate Peak and Valley colors.
Physics & Speed: Tweak the Flying Speed and Terrain Height to alter the energy and roughness of the landscape.
Perspective: Adjust the Camera Height and Floor Distance to find the perfect viewing angle for your layout.
Alpheratz
