Give your website a highly premium and modern feel with the Aurora Orbit background component. This GPU-accelerated effect generates a beautiful, fluid light show resembling the northern lights or a deep space nebula. The animation organically orbits a central void, blending three distinct color bands smoothly over your chosen background color.
Designed for maximum visual impact without sacrificing performance, it includes a smart auto-pause feature that stops the animation when scrolled out of view, saving your visitors' battery and CPU. Whether you're building a sleek dark-mode portfolio, an AI startup landing page, or a Web3 project, you have complete control over the orbit speed, swirl intensity, bloom, and exact positioning to perfectly match your brand's unique aesthetic.
Functions (Key Features):
🪐 Fluid Aurora Dynamics: Smooth, swirling bands of light that organically orbit a central point.
🎨 Rich Color Blending: Seamlessly mix three distinct aurora colors (Inner, Middle, Outer) over a base background.
🎛 Total Shape Control: Adjust the swirl intensity, bloom, zoom scale, and the size of the central void.
📍 Precise Positioning: Easily offset the center point along the X and Y axes to frame the effect perfectly behind your content.
🚀 Smart Performance: Optimized rendering with an auto-pause mechanism when the component is off-screen.
How to Use:
Copy & Paste: Copy the component and paste it directly onto your Framer canvas.
Layout Setup: Set the component's Width and Height to "Fill" (100%) and place it as an absolute background layer behind your content.
Color Palette: Pick your Background color, then select three harmonious colors for the Inner, Middle, and Outer Aurora bands.
Shape & Position: Use Void Size to adjust the empty center, and the Position X/Y sliders to move the focal point of the orbit.
Fine-Tune Animation: Adjust the Orbit Speed, Waviness (controls the swirl/distortion), and Bloom / Glow to create the perfect ambient atmosphere.
Give your website a highly premium and modern feel with the Aurora Orbit background component. This GPU-accelerated effect generates a beautiful, fluid light show resembling the northern lights or a deep space nebula. The animation organically orbits a central void, blending three distinct color bands smoothly over your chosen background color.
Designed for maximum visual impact without sacrificing performance, it includes a smart auto-pause feature that stops the animation when scrolled out of view, saving your visitors' battery and CPU. Whether you're building a sleek dark-mode portfolio, an AI startup landing page, or a Web3 project, you have complete control over the orbit speed, swirl intensity, bloom, and exact positioning to perfectly match your brand's unique aesthetic.
Functions (Key Features):
🪐 Fluid Aurora Dynamics: Smooth, swirling bands of light that organically orbit a central point.
🎨 Rich Color Blending: Seamlessly mix three distinct aurora colors (Inner, Middle, Outer) over a base background.
🎛 Total Shape Control: Adjust the swirl intensity, bloom, zoom scale, and the size of the central void.
📍 Precise Positioning: Easily offset the center point along the X and Y axes to frame the effect perfectly behind your content.
🚀 Smart Performance: Optimized rendering with an auto-pause mechanism when the component is off-screen.
How to Use:
Copy & Paste: Copy the component and paste it directly onto your Framer canvas.
Layout Setup: Set the component's Width and Height to "Fill" (100%) and place it as an absolute background layer behind your content.
Color Palette: Pick your Background color, then select three harmonious colors for the Inner, Middle, and Outer Aurora bands.
Shape & Position: Use Void Size to adjust the empty center, and the Position X/Y sliders to move the focal point of the orbit.
Fine-Tune Animation: Adjust the Orbit Speed, Waviness (controls the swirl/distortion), and Bloom / Glow to create the perfect ambient atmosphere.
