NeonOrbs

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