Glow Effect
Advanced glow effect component with multiple animation types, customizable colors, gradients, and multi-layer effects for creating stunning visual enhancements
Pro features
What the Pro version adds to this component.
Multiple Animations
6 built-in animation types: pulse, breathe, flicker, wave, rainbow, and none
Multi-layer Glow
Create depth with multiple glow layers and adjustable offsets
Gradient Support
Beautiful gradient glows with customizable colors and directions
Neon Effect
Realistic neon sign effect with flicker animation
Mouse Tracking
Interactive glow that follows cursor movement
Custom Shapes
Box, circle, star, and hexagon glow shapes
Hover Effects
Intensity boost and special effects on hover
Text Glow
Apply glow effects directly to typography
Installation
Install via CLI
npx @moontra/moonui-cli add glow-effectUsage
Glow Effect
Transform your UI with dynamic glow effects. Support for multiple animations, colors, and advanced features.
Examples
Animation Types
GlowEffect supports multiple animation types: pulse, breathe, flicker, wave, rainbow, and none for different visual effects
Multi-layer Glow
Create depth and complexity with multi-layer glow effects. Each layer adds intensity and visual richness
Gradient Glow
Apply beautiful gradient glows with customizable colors and directions for vibrant multi-color effects
Neon Effect
Create realistic neon sign effects with flicker animation and intense glow for retro-futuristic designs
Interactive Mouse Tracking
Enable dynamic mouse tracking for interactive glow effects that follow cursor movement within the element
Hover & Interactive Effects
Combine hover effects with glow intensity multipliers and backdrop blur for interactive elements
Custom Shapes
Clip the glow layer into box, circle, star, or hexagon shapes using the shape prop
Text Glow & Inner Glow
Apply the glow directly to typography with textGlow, or add a glow inset within the element with innerGlow
Wave Animation
The wave animation type sweeps a directional highlight across the glow layer
Custom Filter & Mobile Optimization
Override the glow layer's CSS filter with customFilter, or automatically disable the effect on small screens with disableOnMobile