---
title: "NeonOrbs — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Effects. Animated neon orb background with beams"
canonical: "https://framer.elliotli.dev/component/neonorbs"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/NeonOrbs

# NeonOrbs

Animated neon orb background with beams

[View on Framer](https://framer.com/marketplace/components/neonorbs/?via=elliot-li)

![NeonOrbs preview image 1](https://framer.elliotli.dev/og/component/neonorbs/81544cf55c844118/1600x1200.jpg)

## Summary

Animated neon orb background with beams

## Description

Animated background with up to 8 glowing neon orbs and rotating light beams. Six entrance animations, three theme presets, interactive hover and click effects, and optional background textures. Built for hero sections, SaaS landing pages, and any dark-mode design that needs premium ambient motion.

## Features

-   Up to 8 individually sized and positioned glowing orbs
    
-   Rotating light beam on each orb with configurable speed
    
-   Six entrance animations — fade, slide up, slide down, slide left, slide right, scale
    
-   Three theme presets — cool, warm, monochromatic
    
-   Custom color mode — background, orb and beam colors
    
-   Hover scale effect on each orb — configurable scale multiplier
    
-   Three click effects — pulse, spin, glow
    
-   Optional background textures — dots, grid, noise
    
-   Texture opacity and scale controls
    
-   Individual size control per orb (200–1500px)
    
-   Animation speed multiplier (0.1–5x)
    
-   GPU accelerated CSS animations at 60fps
    
-   No dependencies
    

## Property Controls

**Theme & Colors**

-   Theme — cool, warm, monochromatic presets
    
-   Use Custom Colors — toggle manual color selection
    
-   Background Color · Orb Color · Beam Color
    

**Animation**

-   Speed — animation speed multiplier (0.1–5)
    
-   Number of Orbs — 1 to 8
    
-   Entrance Animation — fade, slide up, slide down, slide left, slide right, scale
    

**Orb Sizes**

-   Individual size control for all 8 orbs (200–1500px each)
    

**Background Texture**

-   Texture — none, dots, grid, noise
    
-   Texture Opacity — visibility (0–1)
    
-   Texture Scale — pattern size multiplier (0.1–5)
    

**Interactions**

-   Enable Hover — toggle hover scale effect
    
-   Hover Scale — scale multiplier on hover (1–1.5)
    
-   Enable Click — toggle click animations
    
-   Click Effect — pulse, spin, glow
    

## Technical Details

-   CSS keyframe animations for GPU-accelerated orb rotation
    
-   startTransition for React 18 performance
    
-   Conditional rendering — only active orbs rendered in DOM
    
-   Radial gradients for authentic neon depth per orb
    
-   Box shadows for neon halo glow effect
    
-   Optimized event handling for hover and click interactions
    

## Default Settings

-   4 orbs · Cool theme · Fade entrance · Speed 1x
    
-   Hover enabled · Hover scale 1.1
    
-   Click enabled · Pulse effect
    
-   No background texture
    

## Use Cases

Hero sections · SaaS landing pages · Tech company websites · Futuristic interfaces · Portfolio backgrounds · Product launch pages · Gaming websites · Dark mode designs · Creative agency sites

**SEO Keywords**

framer neon background · framer glowing orbs · framer animated background · framer neon orbs · framer dark background · framer glow effect · framer orb animation · framer hero background · framer neon component · framer background effect · framer light beam · framer ambient background · framer dark mode background · framer code component · framer background animation

## Rank history [How rankings work →](/terms#rankings)

-   All · #8234

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-03-09
- **Updated**: 2026-04-12
- **Added**: 2026-03-04
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo