4SIGHT ANIMATION LAB
A developer showroom showcasing the 12 cinema-grade branding animation variants. Each logo variant is available as both a dynamic React component and a standalone, pure-CSS animated SVG asset.
Fade In
Smooth opacity fade, slight upward translation, and hover scaling.
Neon Flicker
Cyberpunk flicker-in entrance and a pulsing neon glow on hover.
Glitch
Digital chromatic aberration splitting red and cyan subchannels on hover.
Pulse Glow
Continuously breathing aura background glow with a premium easing curve.
Cinematic
Scale-up with blur-to-sharp animation and interactive 3D tilt skew.
Sonar Ripple
Staggered radar echo rings pulsing outwards behind the solid logo.
Electric Current
Sparks of light flowing continuously along the outer stroke paths.
Liquid Fill
A sloshing wave clip-path rising to fill the logo with fluid blue.
Hologram HUD
Sci-fi interface look with grid patterns, scanning laser, and opacity glitches.
Prism Split
Split RGB chromatic refraction shifting dynamically on hover.
Integrating Standalone SVGs
The standalone SVGs in public/assets/ contain self-encapsulated CSS and SMIL animations. They can be loaded directly as standard images:<!-- Standard HTML -->
<img src="/assets/4sight-matrix-scan.svg" alt="4Sight Logo" width="200" />
/* Tailwind / Next.js Background */
<div className="bg-[url('/assets/4sight-neon-flicker.svg')] bg-contain bg-no-repeat" />