Nova Orb

Show Preview
Nova Orb
Nova Orb

About Nova Orb

About

Nova Orb is a Framer code component that turns any section into a living 3D particle object. Tens of thousands of glowing points form a sphere, ring, torus or disc that breathes, flows and flares toward the cursor. It renders on WebGL2 with a soft edge glow and a bloom-like halo, so it reads as a real object with depth, not a flat looping background.

What you can customize

Start with the shape (sphere, ring, torus or disc), then set up to four colors and choose a vertical, horizontal, depth or around gradient. Pick Glow or Solid blending and a background color, or keep it transparent to float the orb over any section. Form controls set the particle count, size, shell thickness and a seed for a new pattern. Look controls set particle size, softness, brightness, edge glow, halo and halo size. Motion controls set noise, detail, flow speed, breathing amount and speed, rotation, spin and tilt. The cursor can flare the shell outward, attract it inward or be switched off, with its own strength and radius. You can also choose high or low quality, pause rendering while the orb is off screen, and add an accessible label for screen readers.

Great for (examples)

Add a Nova Orb to:

* SaaS and AI product hero sections

* Launch, waitlist and pricing pages

* Web3, crypto and fintech brands

* Agency and portfolio intros

* Music, event and creative studio sites

* Feature sections that need one focal visual

* Coming soon and 404 pages

In the Framer canvas the orb shows a still frame so editing stays fast, and every change in the right-side panel updates it instantly. On preview and published pages it animates, reacts to the cursor and pauses while off screen. Visitors who prefer reduced motion see a single still frame, and browsers without WebGL2 get a soft gradient fallback.

From Dulaj Design

ToastNotifySystem
ProductImageZoom
FrameMate Chess Game
Glitch Tail Snake

Related Components

Quote Deck
Fluid Image Morph
Floating Tiles
Image comparison