🌌 Aurora Background - Framer Plugin

A mesmerizing animated aurora gradient background effect for Framer. Perfect for hero sections, landing pages, or any design that needs a dynamic, eye-catching backdrop.

✨ Features

• Animated Gradient: Smooth, infinite-loop aurora animation
• Fully Customizable: Control colors, opacity, blur, and animation speed
• Vignette Effect: Optional darkening around edges for better content readability
• Performance Optimized: Uses CSS animations for smooth 60fps performance
• Responsive: Works at any size

🎨 Customization Options

Colors

• Color 1, 2, 3: Choose your aurora color palette (default: purple, blue, pink)

Effects

• Opacity: Control the overall intensity (0-1)
• Blur: Adjust the blur amount for softer/sharper gradients (0-200px)
• Animation Speed: Control how fast the aurora moves (5-60 seconds)

Vignette

• Vignette Toggle: Enable/disable edge darkening
• Vignette Strength: Control darkness intensity (0-1)

🚀 How to Use in Framer

Option 1: Direct Installation

1. Open your Framer project
2. Go to Assets panel
3. Click + → From NPM
4. Search for @framer/aurora-background
5. Drag the component onto your canvas

Option 2: Code Component (Development)

1. In Framer, create a new Code File
2. Copy the contents of src/AuroraBackground.tsx
3. Paste into your code file
4. The component will appear in your Components panel

Option 3: Local Development

# Install dependencies
npm install

# Build the plugin
npm run build

💡 Usage Tips

As a Hero Background

1. Add Aurora Background to your canvas
2. Resize to full viewport width/height
3. Set opacity to 0.3-0.5 for subtlety
4. Layer your content on top

Color Combinations

Cosmic Purple (default)

• Color 1: #8b5cf6 (purple)
• Color 2: #3b82f6 (blue)
• Color 3: #ec4899 (pink)

Ocean Breeze

• Color 1: #06b6d4 (cyan)
• Color 2: #3b82f6 (blue)
• Color 3: #8b5cf6 (purple)

Sunset Glow

• Color 1: #f97316 (orange)
• Color 2: #ec4899 (pink)
• Color 3: #8b5cf6 (purple)

Forest Night

• Color 1: #10b981 (green)
• Color 2: #06b6d4 (cyan)
• Color 3: #3b82f6 (blue)

Performance Tips

• Lower blur values (40-60px) for better performance on slower devices
• Increase animation speed (30-40s) for smoother, less intensive animations
• Reduce opacity (0.2-0.3) for subtle effects that don't dominate the design

📦 What's Included

aurora-framer-plugin/
├── src/
│   ├── AuroraBackground.tsx  # Main component
│   └── index.tsx              # Entry point
├── package.json
├── tsconfig.json
└── README.md

🎯 Use Cases

• Hero Sections: Eye-catching landing page backgrounds
• Feature Showcases: Dynamic backgrounds for product highlights
• Loading Screens: Engaging backgrounds while content loads
• Modal Overlays: Interesting backdrops for popups
• Section Dividers: Animated transitions between content sections

🔧 Technical Details

• Built with React and Framer Motion
• Uses CSS repeating-linear-gradient for efficiency
• GPU-accelerated animations via transform and filter
• Fully typed with TypeScript
• No external dependencies beyond Framer ecosystem

📝 License

MIT - Feel free to use in personal and commercial projects!

🤝 Contributing

Found a bug or have a feature request? Feel free to open an issue or submit a pull request!

🌟 Show Your Support

If you like this plugin, give it a star and share it with the Framer community!

Made with ❤️ for the Framer community