Floating Elements
Dynamic floating geometric shapes background with physics simulation - 3D effects and connection lines
Pro Features
Unlock advanced capabilities with the Pro version
Multiple Shape Types
6 different geometric shapes with customizable combinations
Connection Networks
Dynamic connection lines between nearby elements
Glow Effects
Customizable glow intensity and colors
Mouse Interaction
Elements respond to mouse movement with physics
3D Depth Effect
Optional Z-axis depth simulation with perspective scaling and depth sorting via the enable3D prop
Performance Optimized
FPS limiting and efficient rendering
Installation
Install via CLI
npx @moontra/moonui-cli add floating-elementsUsage
Floating Elements
Examples
Ocean Blue - Floating Particles
Deep ocean themed floating elements with smooth continuous animation
Connected Nodes
30 shapes linked within 150px of each other
Sunset Vibes - Warm Elements
Beautiful sunset-themed floating shapes with warm gradient colors
Sunset Vibes
25 triangles and stars rotating at 2x speed
Aurora Borealis - Glowing Connections
Mystical aurora-inspired floating elements with vibrant colors
Aurora Particles
35 shapes with star geometry and glowing links
Deep Space - Cosmic Elements
Space-themed floating elements with stars and cosmic shapes
Deep Space
Cosmic particles floating in zero gravity
Minimal Tech - Clean Design
Minimalist floating elements with subtle connections
Minimal Design
Sharp transitions for modern aesthetics
Interactive Hero Section
Large hero section with mouse-interactive floating elements
Welcome to MoonUI Pro
Create stunning backgrounds with floating elements. Move your mouse to interact with the particles.
3D Depth and Heart Shape
enable3D perspective with the heart shape — both advertised but previously never shown