WebGL Magnetic Field is not just a background—it’s a premium interaction layer that brings physical weight and organic tension to your Framer site. Engineered with custom vertex shaders and real-time raycasting, this component generates a dense grid of light-emitting particles that respond to your cursor with a satisfying "magnetic" spring force.

Whether you are building a luxury brand hero, a deep-tech landing page, or an immersive portfolio background, Magnetic Field delivers buttery-smooth performance, additive blending visuals, and complete physical control right from the Framer sidebar.

✨ Key Highlights

• Magnetic Raycasting Logic: The particles aren't just moving; they are reacting to a physical "magnet" attached to your cursor. Set the power to positive to repel particles or negative to pull them into a high-density vortex.

• Scroll-Reactive Waves: Integrated scroll-sync technology triggers rhythmic ripples through the grid as the user moves down the page, creating a deep sense of environmental continuity.

• Additive Blending Visuals: Powered by a custom fragment shader, particles use additive blending to create realistic "light stacking," making the field glow intensely where particles cluster together.

• High-Performance Geometry: Supports grid densities of up to 30,000+ points while maintaining a locked 60FPS, thanks to GPU-accelerated vertex displacement.

• Dynamic Perspective Zoom: Easily adjust the camera distance to shift between a microscopic "dust" look or a macroscopic "celestial" environment.

⚙️ Complete Design Control

• Color & Atmosphere: Define your "Base" and "Accent" colors. The shader automatically interpolates between them based on particle elevation, creating a dynamic, multi-tonal landscape.

• Physics & Tension: Fine-tune the "Mouse Magnet" intensity and "Wave Speed." Adjust the "Damping" to make the field feel like thick liquid or a highly-responsive elastic mesh.

• Grid Rendering: Control the exact "Grid Density" and "Point Size." Use the "Camera Distance" slider to dial in the perfect field of view for your hero section.