Enhanced BrandLogo Component Demo
Featuring advanced animated path drawing with multiple animation modes
🎨 Animation Modes
Default (Staggered)
Original staggered drawing with 0.2s delays
Typewriter
Sequential letter-by-letter completion
Signature
Continuous flowing animation
Elastic
Spring physics with overshoot
Breathing
Living, continuous oscillation
Reverse
Disappears then redraws dramatically
⚡ Speed & Timing Controls
Slow Typewriter
Speed: 0.5x, Delay: 0.4s
Fast Signature
Speed: 2x
Rapid Elastic
Speed: 1.8x, Delay: 0.1s
Slow Breathing
Speed: 0.7x
🔄 Enhanced Loading States
Pulse Loading
Gentle breathing effect
Wave Loading
Sequential wave pattern
Shimmer Loading
Elegant shimmer effect
Heartbeat Loading
Rhythmic double pulse
Orbit Loading
Rotating highlight effect
Skeleton Loading
Subtle skeleton effect
⚡ Loading Speed Variations
Fast Loading
Speed: Fast (0.6x duration)
Normal Loading
Speed: Normal (1x duration)
Slow Loading
Speed: Slow (1.8x duration)
📊 Progress Loading
25% Progress
Determinate loading
50% Progress
Half complete
75% Progress
Nearly complete
Custom Color
Custom green color
🎨 Enhanced Path Drawing Styles
Smooth Drawing
Clean, smooth path drawing
Sketch Drawing
Hand-drawn sketch effect
Neon Drawing
Glowing neon effect
Glitch Drawing
Digital glitch effect
Liquid Drawing
Fluid, flowing effect
Electric Drawing
Electric spark effect
🔄 Style + Mode Combinations
Neon Pulse
Pulsing neon glow
Sketch Wave
Hand-drawn wave effect
Electric Glitch
Sparking glitch effect
🎨 Background Color Recommendations
Light Backgrounds (Professional & Clean)
#FFFFFF
Pure White
#FDF8F3
Cream White
#F7F9FB
Cool White
#F9F9F9
Light Gray
Medium Backgrounds (Warm & Natural)
#F0EDE8
Warm Gray
#EBE6E0
Beige Gray
#E6F2FF
Light Blue
#F0F8E6
Light Sage
Dark Backgrounds (Modern & Premium)
#1A1A1A
Charcoal
#2C1810
Dark Brown
#0F172A
Slate Dark
#374151
Cool Gray
Recommended by Use Case
Professional/Business
Pure white background
Corporate websites, dashboards
Creative/Artistic
Cream background
Portfolios, creative platforms
Modern/Tech
Cool white background
Apps, SaaS products
Premium/Luxury
Dark background
High-end products, luxury brands
📏 Size Variations
Small
Medium
Large
Extra Large
🔧 Configuration Examples
No Mount Animation
Appears instantly, no drawing effect
No Hover Animation
Hover to see - no scale/rotate effect
Custom Styling
With custom border and background
Accessibility Friendly
Respects prefers-reduced-motion
💡 Usage Tips
Animation Modes:
- • Typewriter: Form submissions, step processes
- • Signature: Brand intro, splash screens
- • Breathing: Background loading indicators
- • Elastic: Interactive feedback, success states
Loading Modes:
- • Pulse: Gentle breathing for ambient loading
- • Wave: Sequential wave for data processing
- • Shimmer: Elegant shimmer for content loading
- • Heartbeat: Double pulse for status updates
- • Orbit: Rotating highlight for uploads
- • Skeleton: Subtle effect for placeholders
Path Drawing Styles:
- • Smooth: Clean, professional drawing
- • Sketch: Hand-drawn, artistic effect
- • Neon: Glowing, futuristic style
- • Glitch: Digital, cyberpunk aesthetic
- • Liquid: Fluid, organic animation
- • Electric: Sparking, energetic effect
Performance Notes:
- • All animations respect prefers-reduced-motion
- • ARIA labels and focus states preserved
- • Progress loading for determinate operations
- • Custom colors and speeds supported
- • Optional loading text display
- • Full backward compatibility maintained
Background Tips:
- • White/Light: Best contrast, professional feel
- • Cream/Warm: Harmonious, creative aesthetic
- • Cool Tones: Modern, tech-friendly balance
- • Dark: Premium feel, golden color pops
- • Ensure 4.5:1 contrast ratio for accessibility
- • Consider brand consistency with color choices
Try hovering over any logo to see the interactive hover animations! 🎯