Give your website a futuristic, high-tech aesthetic with the Magnetic Liquid Core. This advanced WebGL background component renders a stunning, glowing orbital ring filled with a custom inner color and surrounded by thousands of dynamic floating particles.
Designed for maximum interactivity, the core and its particles react magnetically to the user's cursor. As the mouse moves across the canvas, the fluid ring warps and the particles pull toward the cursor, creating a highly immersive and satisfying visual experience. Engineered for top-tier performance, it leverages pure GLSL shaders and includes a smart visibility sensor that automatically pauses rendering when scrolled out of view. Perfect for Web3 platforms, modern SaaS landing pages, and creative portfolios.
Functions (Key Features):
🧲 Magnetic Interaction: The fluid core and particles warp and pull dynamically towards the user's cursor based on customizable strength and range parameters.
✨ Particle Swarm: Renders up to 30,000 orbiting particles with fluid, wave-like physics for a dense, atmospheric look.
🎨 Custom Fill & Glow: Independent color controls for the background, glowing core edge, internal core fill, and particles.
📏 Precise Positioning: Easily offset the core along the X and Y axes to perfectly frame it within your specific layout.
🚀 Optimized Performance: GPU-accelerated WebGL rendering with an automatic off-screen pause mechanism to conserve battery and CPU.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer canvas.
Sizing & Layout: Set the component's Width and Height to "Fill" (100%) and place it as an absolute background behind your main content.
Color Scheme: Define the Background, Core Glow, Internal Fill, and Particles colors to match your brand identity.
Tweak Physics: Adjust the Particle Count, Base Core Size, and Orbit Speed to dictate the overall density and energy of the animation.
Interactivity: Fine-tune the Pull Strength and Pull Range to make the magnetic mouse effect feel more subtle or aggressive. Use the X/Y offset sliders to move the core's center point.
Alpheratz
