---
title: "Nebula Hero"
canonical_url: "https://framerhub.io/components/nebula-hero"
last_updated: "2026-06-15T14:46:30.308Z"
---

## Stunning 3D Particle Backgrounds for Framer

Add cinematic galaxy, nebula, and cosmic effects to your hero sections. Five ready-to-use presets with full customization—no code required.

Designed for agencies and freelancers who need premium hero sections fast.

## Features

**Five Visual Presets**
Galaxy, Nebula, Star Field, Swarm, or Vortex—each with unique particle patterns and motion.

**Interactive Controls**
Mouse-controlled orbit rotation and zoom with smooth damping for a polished feel.

**Full Customization**
Adjust particle density, animation speed, zoom level, colors, and particle size—all from Framer's properties panel.

**Auto Color Transitions**
Enable automatic color shifts that cycle smoothly at your preferred speed, or set custom colors manually.

**Performance Optimized**
Smooth 60fps animation that adapts to any viewport size. Works perfectly on desktop and mobile.

## Use Cases

**Hero Sections** — Make unforgettable first impressions with animated cosmic backgrounds

**Product Launches** — Showcase tech products with futuristic effects that communicate innovation

**Agency Portfolios** — Stand out with interactive 3D backgrounds that demonstrate design excellence

**SaaS Landing Pages** — Build credibility with sophisticated animations that convey professionalism

**Event Pages** — Create excitement for conferences and launches with dynamic cosmic visuals

![Nebula Hero Preview](/framerhub/img/components/control/nebula-hero.jpg)

## How to Use

### Installation

After purchasing from FramerHub:

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Nebula Hero 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

Everything you need is in Framer's properties panel:

**Visual Style**

- Choose from 5 presets: Galaxy, Nebula, Star Field, Swarm, Vortex
- Adjust particle density and size
- Set animation speed and initial zoom

**Colors**

- Customize background, inner, and outer gradient colors
- Or enable auto color transitions with speed control

**Interaction**

- Toggle mouse rotation (orbit controls)
- Enable/disable scroll zoom
- Set auto-play on or off

### Quick Tips

**Best Performance** — Reduce particle counts on mobile (20,000 inner, 40,000 ring) for smooth animation

**Color Harmony** — Use complementary colors for depth. Dark backgrounds make particles pop

**Layering** — Place text above the component. White text with subtle shadows works best

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Why Designers Love This

Five ready-to-use presets mean you start with something beautiful, then make it yours with full color and animation control. No code, no complexity—just copy, paste, and customize through Framer's familiar properties panel.

Perfect for agencies delivering premium work fast and freelancers who want to stand out with interactive 3D effects.

---