Neon Effect
Retro neon sign effects with customizable colors, glowing borders, tube segments, animations, and realistic neon tube aesthetics for striking visual designs
Pro Features
Unlock advanced capabilities with the Pro version
Multiple Animations
6 built-in neon animations: pulse, flicker, electric, wave, breathing, and none
Dual-Tone & Rainbow
Create rich effects with dual colors or dynamic rainbow cycling
Tube Segments
Realistic neon tube segments with broken effect support
Electric Sparks
Random electric spark effects for enhanced realism
Reflection Effect
Ground reflection with adjustable opacity and blur
Vintage Filter
Sepia filter for authentic retro aesthetics
Text & Border Neon
Apply neon to text, borders, or both independently
Typography Control
Full control over font, weight, spacing, and transform
Installation
Install via CLI
npx @moontra/moonui-cli add neon-effectUsage
NEON LIGHTS
Retro futuristic design with glowing effects
Examples
Animation Types
NeonEffect supports multiple animation types: pulse, flicker, electric, wave, breathing, and none for different neon aesthetics
PULSE
Steady fade
FLICKER
Random flicker
ELECTRIC
Fast steps
BREATHING
Scale & glow
Text & Border Neon
Apply neon effects to text, borders, or both. Customize glow intensity and colors for striking typography and outlines
TEXT ONLY
Text neon effect
BORDER
Border neon effect
COMBINED
Text + Border
Dual-Tone & Rainbow Colors
Create rich neon effects with dual-tone colors for multi-color glow, or enable rainbow mode for dynamic color cycling
DUAL TONE
Pink + Cyan Glow
RAINBOW
Color Cycling
Reflection Effect
Add realistic ground reflection for neon signs with adjustable opacity and blur for enhanced depth
REFLECTION
Ground reflection effect
REFLECTION
Ground reflection effect
Interactive Button
Create stunning interactive neon buttons with multiple effects and animations for engaging UI elements