---
title: "Aurora"
canonical_url: "https://framerhub.io/components/aurora"
last_updated: "2026-06-15T14:46:28.678Z"
---

## Aurora

Bring the magic of the northern lights to your website. Aurora generates a flowing, organic curtain of light using procedural noise, creating a soothing and premium background effect that never repeats.

## Features

**Organic Flow**
The light rays move naturally, simulating the unpredictable yet rhythmic dance of real aurora borealis.

**Color Customization**
Start with a base color and control the hue variation to create green, purple, or any other colored aurora effects.

**Performance Focused**
Uses off-screen canvas rendering and optimized transparency handling to ensure smooth performance without blocking the main thread.

## Use Cases

**Hero Backgrounds** — Create an immersive, dreamy first impression.

**Landing Pages** — Add visual interest without distracting from your content.

**Portfolio Sites** — Showcase a modern, artistic aesthetic.

**SaaS Products** — Create a premium, polished feel for your app.

![Aurora Preview](/framerhub/img/components/control/aurora.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Aurora in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

Customize the appearance and behavior using Framer's property controls.

**Intensity**

- Controls the density of aurora rays (0.1 to 2)

**Base Color**

- Primary color of the aurora rays

**Color Variation**

- How much the colors vary from the base color (0-180 degrees)

**Speed**

- Animation speed of the flowing rays

**Blur Amount**

- Glow intensity and softness

### Quick Tips

**Best Performance** — Keep intensity at 1 or below for smooth animation on most devices.

**Color Combinations** — Green with 60° variation gives classic aurora look. Try purple or cyan for different moods.

**Layering** — Place content above the component. Use contrasting text colors for readability.

**Speed Settings** — Slower speeds (0.5-0.8) feel more elegant and hypnotic.

## License

**Free Component** — Use freely in personal and commercial projects.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Credits

[Ambient Canvas Backgrounds](https://github.com/crnacura/AmbientCanvasBackgrounds) by [Sean Free](https://codepen.io/seanfree/) for [Codrops](https://tympanus.net/codrops/?p=36743).

---