---
title: "Aurora Orbit — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Give your website a highly premium and modern feel with the Aurora Orbit background component."
canonical: "https://framer.elliotli.dev/component/aurora-orbit"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Aurora Orbit

# Aurora Orbit

Animated aurora orbit background.

[View on Framer](https://framer.com/marketplace/components/aurora-orbit/?via=elliot-li)

![Aurora Orbit preview image 1](https://framer.elliotli.dev/og/component/aurora-orbit/ae3d24290a6eaa68/1600x1200.jpg)

## Summary

Give your website a highly premium and modern feel with the Aurora Orbit background component.

## Description

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:**

1.  **Copy & Paste:** Copy the component and paste it directly onto your Framer canvas.
    
2.  **Layout Setup:** Set the component's Width and Height to **"Fill" (100%)** and place it as an absolute background layer behind your content.
    
3.  **Color Palette:** Pick your **Background** color, then select three harmonious colors for the **Inner, Middle, and Outer Aurora** bands.
    
4.  **Shape & Position:** Use **Void Size** to adjust the empty center, and the **Position X/Y** sliders to move the focal point of the orbit.
    
5.  **Fine-Tune Animation:** Adjust the **Orbit Speed**, **Waviness** _(controls the swirl/distortion)_, and **Bloom / Glow** to create the perfect ambient atmosphere.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3099

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-08-03
- **Updated**: 2026-08-03
- **Added**: 2026-08-03
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background