Here are the different animation and style options for the prototype logo. Choose the one that best fits your vision.
Your navigation icon, enlarged and given the "Showcase" treatment. Great for a minimal, clean look.
<div class="w-28 h-28 rounded-full bg-slate-800/60 border border-slate-700 flex items-center justify-center shadow-lg floating-logo">
<img src="https://i.imgur.com/abFl1je.png" alt="BAGGED™ Icon Logo" class="w-full h-full object-cover rounded-full p-2 drop-shadow-[0_0px_35px_rgba(56,189,248,0.4)]">
</div>
A gentle up-and-down motion with the signature blue glow. This creates perfect brand consistency.
<div class="w-28 h-28 rounded-full bg-slate-800/60 border border-slate-700 flex items-center justify-center shadow-lg floating-logo">
<img src="https://i.imgur.com/abFl1je.png" alt="BAGGED™ Logo" class="w-full h-full object-cover rounded-full p-2 drop-shadow-[0_0px_35px_rgba(56,189,248,0.4)]">
</div>
The circular background pulses with a blue glow, using the same effect as your navigation buttons.
<style>
.pulsing-container { animation: pulse 2.5s infinite; }
</style>
<div class="w-28 h-28 rounded-full bg-slate-800/60 border border-slate-700 flex items-center justify-center shadow-lg pulsing-container">
<img src="https://i.imgur.com/abFl1je.png" alt="BAGGED™ Logo" class="w-full h-full object-cover rounded-full p-2">
</div>
The most dynamic option. The logo floats up and down while the background simultaneously pulses.
<div class="w-28 h-28 rounded-full bg-slate-800/60 border border-slate-700 flex items-center justify-center shadow-lg floating-logo pulsing-container">
<img src="https://i.imgur.com/abFl1je.png" alt="BAGGED™ Logo" class="w-full h-full object-cover rounded-full p-2">
</div>
A simple, non-animated effect. A soft, permanent blue glow is added to the white circle. Clean and professional.
<div class="w-28 h-28 rounded-full bg-slate-800/60 border border-slate-700 flex items-center justify-center shadow-xl shadow-cyan-500/30">
<img src="https://i.imgur.com/abFl1je.png" alt="BAGGED™ Logo" class="w-full h-full object-cover rounded-full p-2">
</div>
Adds a clean, dark border around the logo container for definition. Shown here with the float animation.
<div class="w-28 h-28 rounded-full bg-slate-800/60 border-2 border-slate-500 flex items-center justify-center shadow-lg floating-logo">
<img src="https://i.imgur.com/abFl1je.png" alt="BAGGED™ Logo" class="w-full h-full object-cover rounded-full p-2">
</div>