Nebula Hero

A 3D particle galaxy for Framer hero sections

Nebula Hero fills a section with thousands of glowing particles arranged as a galaxy, a nebula cloud, a star field, a swarm or a vortex. The particles drift and rotate on their own, and visitors can drag to orbit the scene or scroll to zoom in. It is built for the first screen of a page, where one strong visual has to carry the brand before anyone reads a word.

Everything is set from Framer's properties panel: the preset, how many particles there are and how big they are, the colors, the speed and whether the scene responds to the mouse. There is no Three.js code to write and no 3D scene to host anywhere else.

Features

Five presets. Galaxy, Nebula, Star Field, Swarm and Vortex each arrange and move the particles differently, so one component covers several looks.

Orbit and zoom. Mouse rotation uses smooth damping, so the scene eases to a stop instead of snapping. Scroll zoom can be switched off separately.

Color control. Set background, inner and outer gradient colors by hand, or let the component cycle through colors automatically at a speed you choose.

Auto-play. The animation runs on its own, with adjustable speed, so the hero never looks frozen while the page loads around it.

Where Nebula Hero works best

AI and developer tool launches. Use the Galaxy preset with a deep navy background and cyan inner color, with a short white headline centered above it. The spiral reads as scale and intelligence without needing a product screenshot in the first screen.

Event and conference pages. Star Field with a slow speed works behind the date, location and register button. Keep auto color transitions off so the event's brand colors stay fixed.

Agency and studio portfolios. Vortex or Swarm with orbit controls on gives visitors something to play with on the homepage, which signals technical skill before they reach the case studies.

Product teasers. A tight Nebula cloud with a slow automatic color shift works for a "coming soon" page, where the visual is most of the content and a single email field sits below it.

How to Use

Customization

Visual style

• Preset: Galaxy, Nebula, Star Field, Swarm or Vortex
• Particle density and particle size
• Animation speed and initial zoom

Colors

• Background, inner and outer gradient colors
• Auto color transitions, with a speed control

Interaction

• Mouse rotation (orbit controls) on or off
• Scroll zoom on or off
• Auto-play on or off

Starting settings

Calm hero. Galaxy preset, low speed, auto color off, mouse rotation off. The scene moves slowly behind your text and never competes with it.

Playful homepage. Swarm preset, medium speed, mouse rotation on, scroll zoom off so the page still scrolls normally.

Brand moment. Nebula preset with auto color transitions on at a slow speed, for a full-screen section between two content blocks.

Performance and mobile

Nebula Hero renders with WebGL, so particle count is the main cost. On phones, about 20,000 inner and 40,000 ring particles keeps the animation smooth. Dark backgrounds make particles stand out, which means you can use fewer of them for the same effect. Keep your headline as real text above the component so it loads first and stays readable for search engines, and use white text with a soft shadow for contrast.

Compared with similar components

Quantum Nebula is a 3D particle system with a torus shape and a hologram mode that builds particles from your own image, so it suits product or logo reveals. Volumetric Galaxy renders a softer, cloud-like galaxy that works as a full-section background rather than a focal object. Star Warp is a starfield that rushes toward the viewer, which reads as speed instead of scale. Choose Nebula Hero when you want five looks in one component and visitors to be able to orbit the scene.