Elevate your digital presence with Wireframe Waves. This high-performance WebGL component uses Three.js and custom GLSL shaders to render dual layers of undulating wireframe terrain. The resulting animation creates a hypnotic, futuristic corridor effect that instantly draws users into your content.
Designed for maximum visual impact and flexibility, you can toggle between a sleek single-color wireframe or a dynamic Gradient Mode that maps custom colors to the peaks and valleys of the waves. With full control over the animation speed, wave strength, gap distance, and mesh resolution, it acts as the perfect atmospheric background for cyberpunk, Web3, gaming, and cutting-edge technology websites.
Functions (Key Features):
🌊 Dual Wave Layers: Features top and bottom wireframe planes that create a futuristic 3D corridor.
🎨 Elevation Gradients: Toggle 'Gradient Mode' to map custom colors smoothly to the peaks and valleys of the geometry.
⚡ WebGL Performance: Custom shaders ensure smooth, 60fps animations with depth-based fading to blend seamlessly into your background.
🛠️ Physics Control: Fine-tune the Speed, Wave Strength, and Gap distance between the top and bottom planes.
📐 Adjustable Detail: Control the mesh Detail (resolution) to balance visual density and browser performance.
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, and ensure it is placed behind your main content.
Color Mode: Choose whether to use a single Wire Color or toggle Gradient Mode to define specific colors for the high and low points of the waves.
Animation: Adjust the Speed and Wave Strength to make the movement feel calm and slow or fast and turbulent.
Layout & Detail: Tweak the Gap distance to open or close the 3D corridor, and adjust the Detail slider to balance visual fidelity with device performance.
Alpheratz
