✨ Animated GIFs Showcase

3 animated assets available

← All Demos
Conductor
GIF

Conductor

Animated conductor waving baton

Musicconductor.gif
Lead Singer
GIF

Lead Singer

Lead performer animation

Musiclead.gif
Metronome
GIF

Metronome

Animated metronome ticking

Musicmetronome_ani.gif

📝 How to Use Animated GIFs

Next.js Image Component (Important!):

import Image from 'next/image';

<Image 
  src="/pics/conductor.gif" 
  alt="Conductor animation"
  width={200}
  height={200}
  unoptimized  // Required for GIF animation!
/>

âš ī¸ Important: Add unoptimized prop to preserve GIF animation

Standard HTML img tag:

<img src="/pics/metronome_ani.gif" alt="Metronome animation" />

CSS Background:

.animated-bg {
  background-image: url('/pics/lead.gif');
  background-size: cover;
  background-repeat: no-repeat;
}

â„šī¸ About GIF Format

✅ Pros:
  • Universal browser support
  • No JavaScript required
  • Auto-loops by default
  • Supports transparency
âš ī¸ Considerations:
  • Larger file sizes than video
  • Limited to 256 colors
  • No audio support
  • Cannot pause/play easily