Nebula Hero

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

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 unlimited client projects with full commercial rights. No redistribution.

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.