Animated Logo Showcase

Explore different animations and customizations for the Lynora Labs logo

Lynora Labs

Click or hover over the logo to trigger animations

Customize Logo

<AnimatedLogo 
  size={80} 
  variant="default" 
  color="#a855f7" 
  withText={true} 
  textPosition="right" 
/>

Usage Examples

Header Logo

Lynora Labs

Perfect for website headers and navigation bars

Loading Screen

Use as a loading indicator with continuous animation

Footer Branding

Lynora Labs

Subtle animation for footer branding elements

Implementation Guide

To use the animated logo in your project, follow these steps:

  1. Import the component:
    import { AnimatedLogo } from "@/components/animated-logo"
  2. Add it to your layout or page:
    <AnimatedLogo size={60} variant="pulse" withText={true} />
  3. Customize with props:
    • size: Logo size in pixels (default: 60)
    • variant: Animation style - "default", "spin", "pulse", "morph", or "glitch"
    • color: Logo color as hex code (default: "#a855f7")
    • interactive: Whether the logo responds to hover/click (default: true)
    • withText: Whether to show "Lynora Labs" text (default: false)
    • textPosition: Text position - "right" or "bottom" (default: "right")