Commit Graph

2 Commits

Author SHA1 Message Date
ZacharyZcR
a02f362fb0 feat: Add breathe light effect as alternate loading animation with random selection
Implement dual-animation system with random selection:

Breathe animation features:
- Dynamic pulsing glow effect with 5-layer light halo
- Sequential letter appearance with elastic bounce
- Continuous floating animation for letters
- Circular pulse rings expanding outward (3 colors: blue, purple, cyan)
- Orbiting light dots on circular path (4 dots)
- Particle burst effect in 8 directions
- Text scaling with breathing rhythm

Technical details:
- 50/50 random selection between Glitch and Breathe on each load
- Breathe cycle: 2.5s with smooth easing
- Letter entrance: 0.8s with cubic-bezier bounce
- Circular pulse rings to avoid visual artifacts
- Optimized animation timing for smooth performance

Visual improvements:
- Stronger glow intensity (up to 150px radius)
- Brightness variation (1.1 to 1.3)
- Multi-colored effects (blue, purple, cyan gradient)
- Smooth particle dispersal
- Professional breathing rhythm

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 21:11:06 +08:00
ZacharyZcR
bc02acf650 feat: Add professional glitch-effect loading animation with minimum duration control
Implement unified LoadingOverlay component with advanced glitch effects:

Animation features:
- Glitch text effect with RGB chromatic aberration
- Dynamic clip-path based text slicing animations
- Random flicker and screen tearing effects
- Horizontal glitch block artifacts
- CRT-style scan line with color gradient
- Fractal noise overlay for authenticity

Technical improvements:
- Minimum display duration (600-800ms) to prevent flickering
- Smooth fade-in/fade-out transitions
- Consistent TERMIX branding across all loading states
- Multiple animation layers with different timing
- Mix-blend-mode and advanced CSS filters

Applied to:
- SSH terminal connection loading
- File manager directory loading
- Server metrics loading

Brand enhancement:
- Uses TERMIX monospace typography
- Cyberpunk-style visual effects
- Professional loading experience
- Stronger brand recognition

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 21:00:31 +08:00