NeonOrbs

Animated neon orb background with beams

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

Animated neon orb background with beams