Genie9 Logo Animation Showcase
Selected Animation: Draw Animation
Logo path draws itself progressively
Draw Animation
Logo path draws itself progressively
Spiral Draw
Draws while rotating and scaling up
Fade In
Smooth opacity transition
Scale Up
Springs from center with bounce
Rotate In
Rotates 180° while fading in
Morph Effect
Scale and rotate combined
Continuous Pulse
Subtle breathing effect (looped)
Size Variations
Logo at different sizes with static display
32px
48px
64px
96px
128px
Color Variations
Logo with different color schemes
Blue
Purple
Green
Red
Orange
Gradient
Combined Effects
Multiple logos with different animations playing simultaneously
Hover Scale
Continuous Spin
Bounce
Looking for the perfect font?
Explore futuristic and AI-inspired fonts for the Genie9 brand
Implementation Guide
To use the animated logo in your components:
import { Genie9LogoAnimated } from '@/components/logos/Genie9LogoAnimated'
// Basic usage with draw animation
<Genie9LogoAnimated className="w-10 h-10" />
// With specific animation type
<Genie9LogoAnimated
className="w-10 h-10"
animationType="scale"
/>
// Static version (no animation)
<Genie9LogoStatic className="w-10 h-10" />